npm - @cratis/components - Versions diffs - 3.6.0 → 4.0.0 - Mend

@cratis/components 3.6.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1324) hide show

package/dist/esm/{Canvas/shapes/ChatBubble → Chat/Kit}/AnchoredOverlay.js RENAMED Viewed

@@ -2,12 +2,11 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-/** Space on the preferred side under which an above/below overlay flips to the other side. */
 const FLIP_THRESHOLD = 260;
 function computePlacement(anchor, side, align, gap) {
     if (side === 'left' || side === 'right') {
         return {
-            top: anchor.top + (anchor.height / 2),
+            top: anchor.top + anchor.height / 2,
             left: side === 'right' ? anchor.right + gap : anchor.left - gap,
             transform: side === 'right' ? 'translateY(-50%)' : 'translate(-100%, -50%)',
         };
@@ -15,10 +14,14 @@ function computePlacement(anchor, side, align, gap) {
     const spaceBelow = window.innerHeight - anchor.bottom - gap;
     const spaceAbove = anchor.top - gap;
     const resolved = side === 'below'
-        ? (spaceBelow < FLIP_THRESHOLD && spaceAbove > spaceBelow ? 'above' : 'below')
-        : (spaceAbove < FLIP_THRESHOLD && spaceBelow > spaceAbove ? 'below' : 'above');
+        ? spaceBelow < FLIP_THRESHOLD && spaceAbove > spaceBelow
+            ? 'above'
+            : 'below'
+        : spaceAbove < FLIP_THRESHOLD && spaceBelow > spaceAbove
+            ? 'below'
+            : 'above';
     const horizontal = align === 'center'
-        ? { left: anchor.left + (anchor.width / 2), transform: 'translateX(-50%)' }
+        ? { left: anchor.left + anchor.width / 2, transform: 'translateX(-50%)' }
         : align === 'right'
             ? { left: anchor.right, transform: 'translateX(-100%)' }
             : { left: anchor.left, transform: undefined };
@@ -26,14 +29,7 @@ function computePlacement(anchor, side, align, gap) {
         ? { top: anchor.bottom + gap, ...horizontal }
         : { bottom: window.innerHeight - anchor.top + gap, ...horizontal };
 }
-/**
- * Renders its children into a fixed-position portal on <body>, anchored to an element on the board.
- * Board overlays (menus, pickers, tooltips) must float above everything: the slice columns use
- * content-visibility paint containment for virtualization, which clips any absolutely-positioned
- * descendant to the column box — portaling is what lets an overlay escape (the same approach the
- * Cratis Dropdown takes with appendTo=document.body).
- */
-const AnchoredOverlay = ({ anchorRef, open, side = 'below', align = 'left', gap = 8, children }) => {
+const AnchoredOverlay = ({ anchorRef, open, side = 'below', align = 'left', gap = 8, children, }) => {
     const [placement, setPlacement] = useState();
     useLayoutEffect(() => {
         if (!open) {

package/dist/esm/Chat/Kit/AnchoredOverlay.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AnchoredOverlay.js","sources":["../../../../Chat/Kit/AnchoredOverlay.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAuCA,MAAM,cAAc,GAAG,GAAG;AAS1B,SAAS,gBAAgB,CACrB,MAAe,EACf,IAAyB,EACzB,KAA2B,EAC3B,GAAW,EAAA;IAEX,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,KAAK,OAAO,EAAE;QACrC,OAAO;YACH,GAAG,EAAE,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC;AACnC,YAAA,IAAI,EAAE,IAAI,KAAK,OAAO,GAAG,MAAM,CAAC,KAAK,GAAG,GAAG,GAAG,MAAM,CAAC,IAAI,GAAG,GAAG;YAC/D,SAAS,EAAE,IAAI,KAAK,OAAO,GAAG,kBAAkB,GAAG,wBAAwB;SAC9E;IACL;IAEA,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,MAAM,GAAG,GAAG;AAC3D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG;AACnC,IAAA,MAAM,QAAQ,GACV,IAAI,KAAK;AACL,UAAE,UAAU,GAAG,cAAc,IAAI,UAAU,GAAG;AAC1C,cAAE;AACF,cAAE;AACN,UAAE,UAAU,GAAG,cAAc,IAAI,UAAU,GAAG;AAC5C,cAAE;cACA,OAAO;AAEnB,IAAA,MAAM,UAAU,GACZ,KAAK,KAAK;AACN,UAAE,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,kBAAkB;UACrE,KAAK,KAAK;cACR,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,mBAAmB;AACtD,cAAE,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE;IAEvD,OAAO,QAAQ,KAAK;AAChB,UAAE,EAAE,GAAG,EAAE,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE,GAAG,UAAU;AAC3C,UAAE,EAAE,MAAM,EAAE,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,UAAU,EAAE;AAC1E;AASO,MAAM,eAAe,GAAmC,CAAC,EAC5D,SAAS,EACT,IAAI,EACJ,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,CAAC,EACP,QAAQ,GACX,KAAI;IACD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAyB;IAEnE,eAAe,CAAC,MAAK;QACjB,IAAI,CAAC,IAAI,EAAE;YACP,YAAY,CAAC,SAAS,CAAC;YACvB;QACJ;QACA,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,qBAAqB,EAAE;AACzD,QAAA,IAAI,CAAC,MAAM;YAAE;AACb,QAAA,YAAY,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AAC5D,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;AAEvC,IAAA,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,IAAI;AAEpC,IAAA,OAAO,YAAY,CACfA,GAAA,CAAA,KAAA,EAAA,EACI,KAAK,EAAE;AACH,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,SAAS,CAAC,GAAG;YAClB,MAAM,EAAE,SAAS,CAAC,MAAM;YACxB,IAAI,EAAE,SAAS,CAAC,IAAI;YACpB,SAAS,EAAE,SAAS,CAAC,SAAS;AACjC,SAAA,EAAA,QAAA,EAEA,QAAQ,EAAA,CACP,EACN,QAAQ,CAAC,IAAI,CAChB;AACL;;"}

package/dist/esm/Chat/Kit/Avatar/PersonAvatarCircle.d.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import type { Guid } from '@cratis/fundamentals';
+/** The parameters {@link PersonAvatarCircleProps.buildAvatarUrl} resolves into an image URL. */
+export interface BuildAvatarUrlParams {
+    /** The identifier of the person, as a string. */
+    userId: string;
+    /** The kind of owner the avatar belongs to, matching the storage layout. */
+    ownerType: 'Users' | 'Personas' | 'Agents';
+    /** The avatar rendition requested. */
+    avatarSize: 'Small' | 'Medium';
+    /** A value that changes whenever the avatar image changes, for cache-busting. */
+    version?: number | string;
+}
+/**
+ * Props for rendering a person's avatar image when one has been uploaded and a URL can be built for
+ * it, falling back to their initials on a color derived from their identifier so the same person
+ * always shows the same fallback color.
+ */
+export interface PersonAvatarCircleProps {
+    /** The identifier of the person, used to build the avatar image URL. */
+    userId: Guid | string;
+    /** The person's display name, used for initials and accessibility text. */
+    name: string;
+    /** Whether the person has an uploaded avatar image. */
+    hasAvatar: boolean;
+    /** The rendered size, in pixels. */
+    size: number;
+    /** The kind of owner the avatar belongs to, matching the storage layout. Defaults to 'Users'. */
+    ownerType?: 'Users' | 'Personas' | 'Agents';
+    /** The avatar rendition to request from the server. Defaults to 'Small'. */
+    avatarSize?: 'Small' | 'Medium';
+    /**
+     * A value that changes whenever the avatar image changes (e.g. the upload timestamp). Passed on to
+     * {@link buildAvatarUrl} so a re-uploaded avatar can bust the aggressive HTTP cache on the old URL.
+     */
+    version?: number | string;
+    /**
+     * Builds the avatar image URL from the resolved parameters. Omit to always show the initials
+     * fallback - this library ships no avatar storage convention of its own, so a host with an avatar
+     * endpoint passes this to opt into images; one without simply never renders a broken `<img>`.
+     */
+    buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
+    /** Additional class name applied to the circle, for context-specific styling (borders, cursor, ...). */
+    className?: string;
+}
+/**
+ * Renders a person's avatar image when one has been uploaded and a URL can be built for it, falling
+ * back to their initials on a color derived from their identifier so the same person always shows the
+ * same fallback color.
+ */
+export declare const PersonAvatarCircle: ({ userId, name, hasAvatar, size, ownerType, avatarSize, version, buildAvatarUrl, className, }: PersonAvatarCircleProps) => import("react").JSX.Element;
+//# sourceMappingURL=PersonAvatarCircle.d.ts.map

package/dist/esm/Chat/Kit/Avatar/PersonAvatarCircle.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PersonAvatarCircle.d.ts","sourceRoot":"","sources":["../../../../../Chat/Kit/Avatar/PersonAvatarCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAIjD,gGAAgG;AAChG,MAAM,WAAW,oBAAoB;IACjC,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IAEf,4EAA4E;IAC5E,SAAS,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE3C,sCAAsC;IACtC,UAAU,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE/B,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,MAAM,WAAW,uBAAuB;IACpC,wEAAwE;IACxE,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IAEtB,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IAEb,uDAAuD;IACvD,SAAS,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IAEb,iGAAiG;IACjG,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE5C,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEhC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,MAAM,CAAC;IAE1D,wGAAwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,+FAUhC,uBAAuB,gCAgDzB,CAAC"}

package/dist/esm/Chat/Kit/Avatar/PersonAvatarCircle.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { getInitials } from './getInitials.js';
+import { getAvatarColor } from './getAvatarColor.js';
+const PersonAvatarCircle = ({ userId, name, hasAvatar, size, ownerType = 'Users', avatarSize = 'Small', version, buildAvatarUrl, className, }) => {
+    const initials = getInitials(name);
+    const dimension = `${size}px`;
+    const src = buildAvatarUrl?.({
+        userId: userId.toString(),
+        ownerType,
+        avatarSize,
+        version,
+    });
+    const [failedSrc, setFailedSrc] = useState(null);
+    const showImage = hasAvatar && !!src && src !== failedSrc;
+    return (jsx("span", { className: className ? `person-avatar-circle ${className}` : 'person-avatar-circle', style: {
+            width: dimension,
+            height: dimension,
+            background: showImage ? undefined : getAvatarColor(userId.toString()),
+        }, "aria-label": name, title: name, children: showImage ? (jsx("img", { className: 'person-avatar-circle-image', src: src, alt: name, draggable: false, onError: () => setFailedSrc(src) })) : (jsx("span", { className: 'person-avatar-circle-initials', style: { fontSize: `${Math.max(8, Math.round(size * 0.4))}px` }, children: initials })) }));
+};
+export { PersonAvatarCircle };
+//# sourceMappingURL=PersonAvatarCircle.js.map

package/dist/esm/Chat/Kit/Avatar/PersonAvatarCircle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PersonAvatarCircle.js","sources":["../../../../../Chat/Kit/Avatar/PersonAvatarCircle.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAqEO,MAAM,kBAAkB,GAAG,CAAC,EAC/B,MAAM,EACN,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,SAAS,GAAG,OAAO,EACnB,UAAU,GAAG,OAAO,EACpB,OAAO,EACP,cAAc,EACd,SAAS,GACa,KAAI;AAC1B,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC;AAClC,IAAA,MAAM,SAAS,GAAG,CAAA,EAAG,IAAI,IAAI;AAC7B,IAAA,MAAM,GAAG,GAAG,cAAc,GAAG;AACzB,QAAA,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE;QACzB,SAAS;QACT,UAAU;QACV,OAAO;AACV,KAAA,CAAC;IAMF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;IAC/D,MAAM,SAAS,GAAG,SAAS,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,KAAK,SAAS;AAEzD,IAAA,QACIA,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EACL,SAAS,GAAG,CAAA,qBAAA,EAAwB,SAAS,EAAE,GAAG,sBAAsB,EAE5E,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;AACxE,SAAA,EAAA,YAAA,EACW,IAAI,EAChB,KAAK,EAAE,IAAI,YAEV,SAAS,IACNA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAC,4BAA4B,EACtC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,IAAI,EACT,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,MAAM,YAAY,CAAC,GAAG,CAAC,EAAA,CAClC,KAEFA,GAAA,CAAA,MAAA,EAAA,EACI,SAAS,EAAC,+BAA+B,EACzC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,CAAA,EAAA,CAAI,EAAE,EAAA,QAAA,EAE9D,QAAQ,GACN,CACV,EAAA,CACE;AAEf;;"}

package/dist/esm/Chat/Kit/Avatar/getAvatarColor.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * Computes a deterministic avatar background color from a stable seed - the person's identifier -
+ * so the same person always shows the same fallback color everywhere their avatar appears,
+ * regardless of how their name is rendered in that context.
+ * @param seed A stable identifier for the person (e.g. their user id as a string).
+ * @returns A hex color from the predefined avatar palette.
+ */
+export declare const getAvatarColor: (seed: string) => string;
+//# sourceMappingURL=getAvatarColor.d.ts.map

package/dist/esm/Chat/Kit/Avatar/getAvatarColor.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"getAvatarColor.d.ts","sourceRoot":"","sources":["../../../../../Chat/Kit/Avatar/getAvatarColor.ts"],"names":[],"mappings":"AAcA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,KAAG,MAM7C,CAAC"}

package/dist/esm/Chat/Kit/Avatar/getAvatarColor.js ADDED Viewed

@@ -0,0 +1,20 @@
+const AVATAR_COLORS = [
+    '#4f46e5',
+    '#7c3aed',
+    '#be185d',
+    '#be123c',
+    '#c2410c',
+    '#0369a1',
+    '#047857',
+    '#0f766e',
+];
+const getAvatarColor = (seed) => {
+    let hash = 0;
+    for (let charIndex = 0; charIndex < seed.length; charIndex++) {
+        hash = (hash * 31 + seed.charCodeAt(charIndex)) | 0;
+    }
+    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+};
+export { getAvatarColor };
+//# sourceMappingURL=getAvatarColor.js.map

package/dist/esm/Chat/Kit/Avatar/getAvatarColor.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"getAvatarColor.js","sources":["../../../../../Chat/Kit/Avatar/getAvatarColor.ts"],"sourcesContent":[null],"names":[],"mappings":"AAGA,MAAM,aAAa,GAAG;IAClB,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACZ;AASM,MAAM,cAAc,GAAG,CAAC,IAAY,KAAY;IACnD,IAAI,IAAI,GAAG,CAAC;AACZ,IAAA,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;AAC1D,QAAA,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC;IACvD;AACA,IAAA,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC;AAC/D;;"}

package/dist/esm/Chat/Kit/Avatar/getInitials.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * Computes up to two uppercase initials from a display name.
+ * @param name The display name.
+ * @returns One or two initials, or '?' when none can be derived.
+ */
+export declare const getInitials: (name: string) => string;
+//# sourceMappingURL=getInitials.d.ts.map

package/dist/esm/Chat/Kit/Avatar/getInitials.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"getInitials.d.ts","sourceRoot":"","sources":["../../../../../Chat/Kit/Avatar/getInitials.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,MACgE,CAAC"}

package/dist/esm/Chat/Kit/Avatar/getInitials.js ADDED Viewed

@@ -0,0 +1,4 @@
+const getInitials = (name) => name.trim().split(/\s+/).filter(Boolean).map(word => word[0]).join('').slice(0, 2).toUpperCase() || '?';
+export { getInitials };
+//# sourceMappingURL=getInitials.js.map

package/dist/esm/Chat/Kit/Avatar/getInitials.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"getInitials.js","sources":["../../../../../Chat/Kit/Avatar/getInitials.ts"],"sourcesContent":[null],"names":[],"mappings":"AAQO,MAAM,WAAW,GAAG,CAAC,IAAY,KACpC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,IAAI;;"}

package/dist/esm/Chat/Kit/Avatar/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { PersonAvatarCircle } from './PersonAvatarCircle.js';
+export type { PersonAvatarCircleProps, BuildAvatarUrlParams } from './PersonAvatarCircle.js';
+export { getAvatarColor } from './getAvatarColor.js';

package/dist/esm/Chat/Kit/Avatar/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+export { PersonAvatarCircle } from './PersonAvatarCircle.js';
+export { getAvatarColor } from './getAvatarColor.js';
+// `getInitials` is an internal helper used by `PersonAvatarCircle` and is
+// intentionally not part of the public API.

package/dist/esm/Chat/Kit/Chat.d.ts ADDED Viewed

@@ -0,0 +1,106 @@
+import type React from 'react';
+import type { Guid } from '@cratis/fundamentals';
+import type { BuildAvatarUrlParams } from './Avatar/index.js';
+import { type ChatComposerLabels } from './ChatComposer.js';
+import { type ChatMessageBubbleLabels } from './ChatMessageBubble.js';
+import type { ChatMessage } from './ChatMessage.js';
+import type { ChatTypingAuthor } from './ChatTypingAuthor.js';
+import { ChatVariant } from './ChatVariant.js';
+import { type FailedReplyLabels, type FailedReplyReportDetails } from './FailedReply.js';
+import type { MentionCandidate } from './Mentions/index.js';
+/** Overrides for every label the {@link Chat} panel and its children render. Any field left unset
+ *  falls back to a literal English default — this library ships no i18n mechanism of its own, so a
+ *  host that localizes passes its own translated strings through here. */
+export interface ChatLabels {
+    /** The panel's own title, shown when not {@link ChatVariant.Docked}. Defaults to `'Comments'`. */
+    title?: string;
+    /** Tooltip for the close button. Defaults to `'Close'`. */
+    close?: string;
+    /** Accessible label for the close button. Defaults to `'Close panel'`. */
+    closePanel?: string;
+    /** Shown when there are no messages yet. Defaults to `'No comments yet. Be the first!'`. */
+    noComments?: string;
+    /** One author typing. `{name}` is substituted. Defaults to `'{name} is typing'`. */
+    typing?: string;
+    /** Two authors typing. `{first}`/`{second}` are substituted. Defaults to `'{first} and {second} are typing'`. */
+    typingTwo?: string;
+    /** Three or more authors typing. Defaults to `'Several people are typing'`. */
+    typingSeveral?: string;
+    /** Labels forwarded to the {@link ChatComposer}. */
+    composer?: ChatComposerLabels;
+    /** Labels forwarded to every {@link ChatMessageBubble}. */
+    messageBubble?: ChatMessageBubbleLabels;
+    /** Labels forwarded to every {@link FailedReply}. */
+    failedReply?: FailedReplyLabels;
+}
+/**
+ * Props for the full conversation panel — messages, composer, typing indicator, and reactions.
+ * Accepts message data and reports sends/reactions/actions; owns no state except the draft being typed.
+ */
+export interface ChatProps {
+    /**
+     * Identifies this conversation for opt-in messaging: when set, every send additionally
+     * publishes a {@link ChatMessageAdded} carrying this id over the Arc messenger, at the same
+     * moment `onSend` fires. Omit for exactly the previous behavior — `onSend` alone, nothing
+     * published.
+     */
+    id?: string;
+    /** The messages to render in chronological order. */
+    messages: ChatMessage[];
+    /** Invoked with the trimmed message text when the user sends. */
+    onSend: (text: string) => void;
+    /** Invoked when the close button is activated (only rendered when not {@link ChatVariant.Docked}). */
+    onClose: () => void;
+    /** The panel's title. Defaults to the localized `'Comments'` or {@link ChatLabels.title}. */
+    title?: string;
+    /** Whether the composer takes focus when mounted. Defaults to `false`. */
+    autoFocus?: boolean;
+    /**
+     * How the conversation is presented. Docked leaves the frame and heading to whatever contains
+     * it, which is what a chat sidebar provides.
+     */
+    variant?: ChatVariant;
+    /** Everyone who can be mentioned from this conversation. Omit (together with
+     *  {@link resolveMentionCandidates}) to turn mentions off. */
+    mentionCandidates?: MentionCandidate[];
+    /**
+     * Resolves who can be mentioned as the person types — see
+     * {@link ChatComposerProps.resolveMentionCandidates}.
+     */
+    resolveMentionCandidates?: (query: string) => MentionCandidate[] | Promise<MentionCandidate[]>;
+    /** Who the conversation is currently waiting on — someone typing, or an agent working. */
+    typingAuthors?: ChatTypingAuthor[];
+    /**
+     * The identifier of whoever is looking at the conversation. Reactions are only offered when this
+     * is given, together with {@link onReact} — a conversation whose backend cannot yet record a
+     * reaction simply does not render the affordance.
+     */
+    currentUserId?: Guid;
+    /** Invoked with the message reacted to and the emoji picked, whether given, changed, or taken back. */
+    onReact?: (messageId: Guid, emoji: string) => void;
+    /**
+     * Invoked with the message somebody asked to have carried out. Omit to leave the affordance off — a
+     * conversation whose subject is not something the host can act on does not offer it.
+     */
+    onAct?: (messageId: Guid) => void;
+    /**
+     * Decides which messages {@link ChatProps.onAct} is offered on. Omit to offer it on all of them.
+     */
+    canAct?: (message: ChatMessage) => boolean;
+    /** Builds the avatar image URL for every author shown in the panel. Omit to always show initials. */
+    buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
+    /**
+     * Builds the href for a failed turn's "report this" link. Omit to hide the report action on every
+     * {@link FailedReply} line — see {@link FailedReplyProps.buildReportUrl}.
+     */
+    buildReportUrl?: (details: FailedReplyReportDetails) => string;
+    /** Overrides for every label the panel and its children render. Unset fields fall back to
+     *  literal English defaults. */
+    labels?: ChatLabels;
+}
+/**
+ * The full conversation panel — messages, composer, typing indicator, and reactions. It renders
+ * message bubbles, the composer row, and the typing indicator, and coordinates reactions/quick-reply/action
+ * callbacks. Owns no state except the draft being typed.
+ */
+export declare const Chat: React.FC<ChatProps>;

package/dist/esm/{Canvas/shapes/ChatBubble → Chat/Kit}/Chat.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback, useEffect } from 'react';
-import { useOptionalMessenger } from '../../messaging/useOptionalMessenger.js';
+import { useOptionalMessenger } from '../../Common/messaging/useOptionalMessenger.js';
 import { ChatMessageAdded } from './ChatMessageAdded.js';
 import { ChatComposer } from './ChatComposer.js';
 import { ChatMessageBubble } from './ChatMessageBubble.js';
@@ -38,19 +38,15 @@ function computeRenderInfo(messages) {
         return { showAuthor, showTimestamp };
     });
 }
-/**
- * Composes the "X is typing" line from whoever the conversation is waiting on.
- * @param authors The authors currently typing or working.
- * @param labels Label overrides, as passed to {@link Chat}.
- * @returns The label to show, empty when nobody is.
- */
 function typingLabel(authors, labels) {
     if (authors.length === 0)
         return '';
     if (authors.length === 1)
         return (labels?.typing ?? '{name} is typing').replace('{name}', authors[0].name);
     if (authors.length === 2)
-        return (labels?.typingTwo ?? '{first} and {second} are typing').replace('{first}', authors[0].name).replace('{second}', authors[1].name);
+        return (labels?.typingTwo ?? '{first} and {second} are typing')
+            .replace('{first}', authors[0].name)
+            .replace('{second}', authors[1].name);
     return labels?.typingSeveral ?? 'Several people are typing';
 }
 const Chat = ({ id, messages, onSend, onClose, title, autoFocus = false, variant = ChatVariant.Floating, mentionCandidates, resolveMentionCandidates, typingAuthors = [], currentUserId, onReact, onAct, canAct, buildAvatarUrl, buildReportUrl, labels, }) => {
@@ -59,11 +55,9 @@ const Chat = ({ id, messages, onSend, onClose, title, autoFocus = false, variant
     const renderInfo = useMemo(() => computeRenderInfo(messages), [messages]);
     const isDocked = variant === ChatVariant.Docked;
     const resolvedTitle = title ?? labels?.title ?? 'Comments';
-    // Opt-in messaging: resolves to undefined without an Arc messenger. Publishing also requires
-    // the `id` prop — without one there is nothing to key a {@link ChatMessageAdded} by.
     const publish = useOptionalMessenger();
-    const handleSend = useCallback((text, mentions) => {
-        onSend(text, mentions);
+    const handleSend = useCallback((text) => {
+        onSend(text);
         if (id)
             publish?.(new ChatMessageAdded(id, text));
     }, [onSend, id, publish]);
@@ -71,11 +65,9 @@ const Chat = ({ id, messages, onSend, onClose, title, autoFocus = false, variant
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }, [messages, typingAuthors.length]);
     const quickReply = (authorName) => composerRef.current?.prefill(`@${authorName} `);
-    return (jsxs("div", { className: `chat-panel${isDocked ? ' chat-panel--docked' : ''}`, onClick: event => event.stopPropagation(), children: [!isDocked && (jsxs("div", { className: 'chat-panel-header', children: [jsx("span", { className: 'chat-panel-title', children: resolvedTitle }), jsx("button", { className: 'chat-panel-close', onClick: onClose, title: labels?.close ?? 'Close', "aria-label": labels?.closePanel ?? 'Close panel', children: "\u00D7" })] })), jsxs("div", { className: 'chat-panel-messages', children: [messages.length === 0 && (jsx("p", { className: 'chat-panel-empty', children: labels?.noComments ?? 'No comments yet. Be the first!' })), messages.map((message, index) => {
-                        // A turn that ended in failure is not something its author said, so it never becomes
-                        // a bubble — it stands where the answer would have been and says so.
+    return (jsxs("div", { className: `chat-panel${isDocked ? ' chat-panel--docked' : ''}`, onClick: (event) => event.stopPropagation(), children: [!isDocked && (jsxs("div", { className: 'chat-panel-header', children: [jsx("span", { className: 'chat-panel-title', children: resolvedTitle }), jsx("button", { type: 'button', className: 'chat-panel-close', onClick: onClose, title: labels?.close ?? 'Close', "aria-label": labels?.closePanel ?? 'Close panel', children: "\u00D7" })] })), jsxs("div", { className: 'chat-panel-messages', children: [messages.length === 0 && (jsx("p", { className: 'chat-panel-empty', children: labels?.noComments ?? 'No comments yet. Be the first!' })), messages.map((message, index) => {
                         if (message.failureDetail !== undefined) {
-                            return jsx(FailedReply, { message: message, buildReportUrl: buildReportUrl, labels: labels?.failedReply }, message.id.toString());
+                            return (jsx(FailedReply, { message: message, buildReportUrl: buildReportUrl, labels: labels?.failedReply }, message.id.toString()));
                         }
                         const { showAuthor, showTimestamp } = renderInfo[index];
                         return (jsx(ChatMessageBubble, { message: message, showAuthor: showAuthor, showTimestamp: showTimestamp, formattedTimestamp: formatTimestamp(message.timestamp), currentUserId: currentUserId, onReact: onReact, onQuickReply: quickReply, onAct: onAct && (canAct?.(message) ?? true) ? onAct : undefined, buildAvatarUrl: buildAvatarUrl, labels: labels?.messageBubble }, message.id.toString()));

package/dist/esm/Chat/Kit/Chat.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Chat.js","sources":["../../../../Chat/Kit/Chat.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Chat/Kit/ChatAuthorKind.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * What kind of team member wrote a message. Only the author's identifier is ever stored, so the kind
+ * is resolved when a conversation is rendered — it decides which avatar the message shows.
+ */
+export declare enum ChatAuthorKind {
+    /** A message authored by an application user. */
+    User = "user",
+    /** A message authored by an automated agent. */
+    Agent = "agent"
+}
+//# sourceMappingURL=ChatAuthorKind.d.ts.map

package/dist/esm/Chat/Kit/ChatAuthorKind.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ChatAuthorKind.d.ts","sourceRoot":"","sources":["../../../../Chat/Kit/ChatAuthorKind.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,oBAAY,cAAc;IACtB,iDAAiD;IACjD,IAAI,SAAS;IAEb,gDAAgD;IAChD,KAAK,UAAU;CAClB"}

package/dist/esm/Chat/Kit/ChatAuthorKind.js ADDED Viewed

@@ -0,0 +1,8 @@
+var ChatAuthorKind;
+(function (ChatAuthorKind) {
+    ChatAuthorKind["User"] = "user";
+    ChatAuthorKind["Agent"] = "agent";
+})(ChatAuthorKind || (ChatAuthorKind = {}));
+export { ChatAuthorKind };
+//# sourceMappingURL=ChatAuthorKind.js.map

package/dist/esm/Chat/Kit/ChatAuthorKind.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ChatAuthorKind.js","sources":["../../../../Chat/Kit/ChatAuthorKind.ts"],"sourcesContent":[null],"names":[],"mappings":"IAOY;AAAZ,CAAA,UAAY,cAAc,EAAA;AAEtB,IAAA,cAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AAGb,IAAA,cAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACnB,CAAC,EANW,cAAc,KAAd,cAAc,GAAA,EAAA,CAAA,CAAA;;"}

package/dist/esm/Chat/Kit/ChatBubble.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import type React from 'react';
+import type { Guid } from '@cratis/fundamentals';
+import { type BuildAvatarUrlParams } from './Avatar/index.js';
+/**
+ * Props for a canvas-rendered chat bubble avatar with hover preview and optional thinking indicator.
+ * Shows the author's avatar circle with an optional selection ring, animated thinking dots, and a
+ * hover card previewing the conversation state.
+ */
+export interface ChatBubbleProps {
+    /** The identifier of the person this bubble represents. */
+    authorId: Guid | string;
+    /** The person's display name, used for the avatar and preview. */
+    authorName: string;
+    /** Whether the person has an uploaded avatar image. */
+    hasAvatar: boolean;
+    /** The avatar circle's diameter in pixels. Defaults to `56`. */
+    size?: number;
+    /** Whether to suppress the hover preview card. Defaults to `false`. */
+    suppressPreview?: boolean;
+    /** The most recent message text shown in the preview. */
+    previewMessage?: string;
+    /** The timestamp of the most recent message shown in the preview. */
+    previewTimestamp?: Date;
+    /** The number of replies shown in the preview. */
+    replyCount?: number;
+    /** Whether to show the animated thinking-bubble indicator. Defaults to `false`. */
+    showThinkingBubbles?: boolean;
+    /** Whether to show the selection ring around the avatar. Defaults to `false`. */
+    selected?: boolean;
+    /** Builds the avatar image URL. Omit to always show initials — see {@link PersonAvatarCircleProps}. */
+    buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
+}
+/**
+ * A canvas-rendered chat bubble avatar with hover preview and optional thinking indicator. Shows
+ * the author's avatar circle with an optional selection ring, animated thinking dots trailing
+ * down-right, and a hover card previewing the conversation state.
+ */
+export declare const ChatBubble: React.FC<ChatBubbleProps>;

package/dist/esm/{Canvas/shapes/ChatBubble → Chat/Kit}/ChatBubble.js RENAMED Viewed

@@ -20,10 +20,7 @@ function formatTimestamp(date) {
 }
 const ChatBubble = ({ authorId, authorName, hasAvatar, size = 56, suppressPreview = false, previewMessage, previewTimestamp, replyCount, showThinkingBubbles = false, selected = false, buildAvatarUrl, }) => {
     const [isHovered, setIsHovered] = useState(false);
-    // The thinking dots always use the person's deterministic color, even when an avatar image is
-    // shown, so they stay visually tied to the person rather than picking up an unrelated color.
     const color = getAvatarColor(authorId.toString());
-    // Thinking-bubble animation state
     const [dotsVisible, setDotsVisible] = useState(showThinkingBubbles);
     const [dotsExiting, setDotsExiting] = useState(false);
     const previousShowBubbles = useRef(false);
@@ -50,7 +47,7 @@ const ChatBubble = ({ authorId, authorName, hasAvatar, size = 56, suppressPrevie
                     height: size,
                     borderRadius: '50%',
                     boxShadow: selected
-                        ? `inset 0 0 0 3px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.22)`
+                        ? `inset 0 0 0 3px var(--cratis-primary-color), 0 4px 12px rgba(0, 0, 0, 0.22)`
                         : '0 4px 12px rgba(0, 0, 0, 0.22)',
                     position: 'relative',
                 }, children: jsx(PersonAvatarCircle, { userId: authorId, name: authorName, hasAvatar: hasAvatar, size: size, avatarSize: 'Medium', buildAvatarUrl: buildAvatarUrl }) }), dotsVisible && (jsxs("div", { className: `thinking-bubbles ${dotsExiting ? 'thinking-bubbles--exiting' : 'thinking-bubbles--entering'}`, onAnimationEnd: handleDotsAnimationEnd, "aria-hidden": 'true', children: [jsx("div", { className: 'thinking-dot thinking-dot--1', style: {
@@ -72,8 +69,8 @@ const ChatBubble = ({ authorId, authorName, hasAvatar, size = 56, suppressPrevie
                     marginLeft: 14,
                     transform: 'translateY(-50%)',
                     width: 224,
-                    background: 'var(--surface-card)',
-                    border: '1px solid var(--surface-border)',
+                    background: 'var(--cratis-surface-card)',
+                    border: '1px solid var(--cratis-surface-border)',
                     borderRadius: 10,
                     boxShadow: '0 8px 24px rgba(0, 0, 0, 0.14)',
                     padding: '10px 12px',
@@ -82,7 +79,38 @@ const ChatBubble = ({ authorId, authorName, hasAvatar, size = 56, suppressPrevie
                     alignItems: 'flex-start',
                     pointerEvents: 'none',
                     zIndex: 9999,
-                }, children: [jsx(PersonAvatarCircle, { userId: authorId, name: authorName, hasAvatar: hasAvatar, size: 30, buildAvatarUrl: buildAvatarUrl }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 3, flexWrap: 'wrap' }, children: [jsx("span", { style: { ...FONT, fontSize: 12, fontWeight: 600, color: 'var(--text-color)' }, children: authorName.length > PREVIEW_AUTHOR_NAME_MAX_LENGTH ? `${authorName.slice(0, PREVIEW_AUTHOR_NAME_MAX_LENGTH)}…` : authorName }), previewTimestamp && (jsx("span", { style: { ...FONT, fontSize: 10, color: 'var(--text-color-secondary)' }, children: formatTimestamp(previewTimestamp) }))] }), jsx("p", { style: { ...FONT, fontSize: 11, color: 'var(--text-color)', margin: '0 0 6px', lineHeight: 1.4 }, children: previewMessage ? (previewMessage.length > PREVIEW_MESSAGE_MAX_LENGTH ? `${previewMessage.slice(0, PREVIEW_MESSAGE_MAX_LENGTH)}…` : previewMessage) : 'No messages yet' }), replyCount !== undefined && replyCount > 0 && (jsx("span", { style: { ...FONT, fontSize: 10, color: 'var(--primary-color)' }, children: replyCount === 1 ? '1 reply' : `${replyCount} replies` }))] })] }))] }));
+                }, children: [jsx(PersonAvatarCircle, { userId: authorId, name: authorName, hasAvatar: hasAvatar, size: 30, buildAvatarUrl: buildAvatarUrl }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'baseline',
+                                    gap: 6,
+                                    marginBottom: 3,
+                                    flexWrap: 'wrap',
+                                }, children: [jsx("span", { style: {
+                                            ...FONT,
+                                            fontSize: 12,
+                                            fontWeight: 600,
+                                            color: 'var(--cratis-text-color)',
+                                        }, children: authorName.length > PREVIEW_AUTHOR_NAME_MAX_LENGTH
+                                            ? `${authorName.slice(0, PREVIEW_AUTHOR_NAME_MAX_LENGTH)}…`
+                                            : authorName }), previewTimestamp && (jsx("span", { style: {
+                                            ...FONT,
+                                            fontSize: 10,
+                                            color: 'var(--cratis-text-color-secondary)',
+                                        }, children: formatTimestamp(previewTimestamp) }))] }), jsx("p", { style: {
+                                    ...FONT,
+                                    fontSize: 11,
+                                    color: 'var(--cratis-text-color)',
+                                    margin: '0 0 6px',
+                                    lineHeight: 1.4,
+                                }, children: previewMessage
+                                    ? previewMessage.length > PREVIEW_MESSAGE_MAX_LENGTH
+                                        ? `${previewMessage.slice(0, PREVIEW_MESSAGE_MAX_LENGTH)}…`
+                                        : previewMessage
+                                    : 'No messages yet' }), replyCount !== undefined && replyCount > 0 && (jsx("span", { style: {
+                                    ...FONT,
+                                    fontSize: 10,
+                                    color: 'var(--cratis-primary-color)',
+                                }, children: replyCount === 1 ? '1 reply' : `${replyCount} replies` }))] })] }))] }));
 };
 export { ChatBubble };

package/dist/esm/Chat/Kit/ChatBubble.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ChatBubble.js","sources":["../../../../Chat/Kit/ChatBubble.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Chat/Kit/ChatComposer.d.ts ADDED Viewed

@@ -0,0 +1,62 @@
+import type React from 'react';
+import type { BuildAvatarUrlParams } from './Avatar/index.js';
+import { type MentionCandidate } from './Mentions/index.js';
+import { type ReactionPickerLabels } from './ReactionPicker.js';
+/** Overrides for the composer's own labels. Any field left unset falls back to a literal English
+ *  default. */
+export interface ChatComposerLabels {
+    /** Placeholder text for the draft input. Defaults to `'Write a message… (Enter to send)'`. */
+    placeholder?: string;
+    /** Tooltip/accessible label for the emoji-insert toggle. Defaults to `'Insert emoji'`. */
+    insertEmoji?: string;
+    /** Tooltip for the send button. Defaults to `'Send'`. */
+    send?: string;
+    /** Accessible label for the send button. Defaults to `'Send message'`. */
+    sendMessage?: string;
+    /** Labels forwarded to the emoji-insert {@link ReactionPicker}. */
+    reactionPicker?: ReactionPickerLabels;
+}
+/**
+ * Props for the compose row of a conversation — the text area, the `@` mention list it opens, and
+ * the send button. It owns the draft so the surrounding panel stays a renderer of messages.
+ */
+export interface ChatComposerProps {
+    /** Everyone who can be mentioned from this conversation. Omit to turn mentions off. */
+    mentionCandidates?: MentionCandidate[];
+    /**
+     * Resolves who can be mentioned as the person types, invoked with what has been typed after
+     * the `@` — for hosts whose candidates come from a lookup rather than a list they already
+     * hold. May answer synchronously or with a promise; a stale answer (one that arrives after
+     * the query has moved on) is dropped. Combines with {@link mentionCandidates} when both are
+     * given.
+     * @param query What has been typed after the `@`.
+     * @returns The candidates matching the query.
+     */
+    resolveMentionCandidates?: (query: string) => MentionCandidate[] | Promise<MentionCandidate[]>;
+    /**
+     * Invoked with the trimmed message text when the user sends, together with who that text
+     * actually mentions — reduced from every candidate the draft saw, so a mention that was
+     * picked but edited away again does not count.
+     */
+    onSend: (text: string, mentions: MentionCandidate[]) => void;
+    /** Whether to take focus when mounted. */
+    autoFocus?: boolean;
+    /** Builds the avatar image URL for mention candidates. Omit to always show initials. */
+    buildAvatarUrl?: (params: BuildAvatarUrlParams) => string;
+    /** Overrides for the composer's labels. Unset fields fall back to literal English defaults. */
+    labels?: ChatComposerLabels;
+}
+/**
+ * Imperative actions a caller can drive on the composer without owning its draft state — used by a
+ * quick reply, which sets the starting text for whatever the person types next rather than sending
+ * anything itself.
+ */
+export interface ChatComposerHandle {
+    /** Replaces the current draft and takes focus, caret placed at the end. */
+    prefill: (text: string) => void;
+}
+/**
+ * The compose row of a conversation — the text area, the `@` mention list it opens, and the send
+ * button. It owns the draft so the surrounding panel stays a renderer of messages.
+ */
+export declare const ChatComposer: React.ForwardRefExoticComponent<ChatComposerProps & React.RefAttributes<ChatComposerHandle>>;