@webority/chat-react 0.22.0 → 0.23.0

package/README.md

@@ -194,11 +194,13 @@ Escape closes it, and the question box takes focus when it opens.
 | `resolveLink`, `linkComponent` | Reply links; see Replies below. |
 | `confirmAction`, `onViewTicket` | Support action cards; see `ActionCard`. |
 | `rating` | Offer ratings under stored replies. Default true. |
+| `renderReply` | Draws each assistant reply your way; see Custom reply rendering below. |
 
 ### `<ChatThread />`, `<ChatMessage />`, `<ChatComposer />`
 
 The panel's parts, for a product that lays out its own assistant page. `ChatThread` takes
-`turns`, `empty`, `onRate`, `resolveLink`, `linkComponent`, `confirmAction` and `onViewTicket`.
+`turns`, `empty`, `onRate`, `resolveLink`, `linkComponent`, `confirmAction`, `onViewTicket` and
+`renderReply`.
 Each answer is a polite live region, marked busy while it streams. `ChatComposer` takes
 `onSubmit`, `busy`, `disabled`, `maxLength` and `inputRef`; Enter sends, Shift and Enter starts a
 new line.
@@ -231,3 +233,21 @@ A link shows only when its href has the form `scheme:kind/id` (for example `tick
 and `resolveLink(href)` returns an in-app route starting with `/`. Any other link, including every
 web address, shows its label as plain text. Pass the router's `Link` as `linkComponent` so a link
 navigates inside the portal.
+
+### Custom reply rendering
+
+A product that draws replies its own way (charts, maths) passes `renderReply` to `ChatPanel`,
+`ChatThread` or `ChatMessage`. It is called as `renderReply(turn, { streaming })` for each
+assistant reply that has text, and what it returns replaces `ChatMarkdown`. `turn.answer` is the
+text so far, and `streaming` is true while it is still arriving. The person's question, the
+"thinking" state, errors, action cards, the rating and the layout stay the library's. With no
+`renderReply`, replies render as above.
+
+```jsx
+<ChatPanel
+    chat={chat}
+    open={open}
+    onClose={() => setOpen(false)}
+    renderReply={(turn, { streaming }) => <RichReply text={turn.answer} live={streaming} />}
+/>
+```

package/dist/chat-react.js

@@ -471,21 +471,21 @@ function re({ client: a, onOpen: s, onDeleted: c, pageSize: l = 20, labels: d })
 }
 //#endregion
 //#region src/components/ChatLauncher.jsx
-var ie = { zIndex: "var(--wui-z-fixed)" }, ae = {
-	end: "end-0",
-	start: "start-0"
+var ie = {
+	zIndex: "var(--wui-z-fixed)",
+	bottom: 0
+}, ae = {
+	end: { insetInlineEnd: 0 },
+	start: { insetInlineStart: 0 }
 };
 function oe({ onClick: e, open: t = !1, position: r = "end", icon: i = "sparkles", className: a, style: o, labels: s }) {
 	let c = M(s);
 	return /* @__PURE__ */ b("span", {
 		"data-support-capture": "exclude",
-		className: [
-			"position-fixed bottom-0 m-3",
-			ae[r],
-			a
-		].filter(Boolean).join(" "),
+		className: ["position-fixed m-3", a].filter(Boolean).join(" "),
 		style: {
 			...ie,
+			...ae[r],
 			...o
 		},
 		children: /* @__PURE__ */ b(n, {
@@ -842,8 +842,8 @@ var pe = {
 	whiteSpace: "pre-wrap",
 	overflowWrap: "anywhere"
 };
-function Q({ turn: e, onRate: n, resolveLink: i, linkComponent: a, confirmAction: o, onViewTicket: s, labels: c }) {
-	let l = M(c), u = e.streaming && !e.answer;
+function Q({ turn: e, onRate: n, resolveLink: i, linkComponent: a, confirmAction: o, onViewTicket: s, renderReply: c, labels: l }) {
+	let u = M(l), f = e.streaming && !e.answer;
 	return /* @__PURE__ */ x("li", {
 		className: "d-flex flex-column gap-2",
 		children: [e.question && /* @__PURE__ */ x("div", {
@@ -851,7 +851,7 @@ function Q({ turn: e, onRate: n, resolveLink: i, linkComponent: a, confirmAction
 			style: pe,
 			children: [/* @__PURE__ */ x("span", {
 				className: "visually-hidden",
-				children: [l.you, ": "]
+				children: [u.you, ": "]
 			}), /* @__PURE__ */ b(r, {
 				padding: "sm",
 				variant: "muted",
@@ -864,25 +864,25 @@ function Q({ turn: e, onRate: n, resolveLink: i, linkComponent: a, confirmAction
 			children: [
 				/* @__PURE__ */ x("span", {
 					className: "visually-hidden",
-					children: [l.assistant, ": "]
+					children: [u.assistant, ": "]
 				}),
 				/* @__PURE__ */ b("div", {
 					"aria-live": "polite",
 					"aria-busy": e.streaming,
-					children: u ? /* @__PURE__ */ x("span", {
+					children: f ? /* @__PURE__ */ x("span", {
 						className: "d-inline-flex align-items-center gap-2 wui-text-sm text-body-secondary",
 						children: [/* @__PURE__ */ b(d, {
 							size: "sm",
-							label: l.thinking
+							label: u.thinking
 						}), /* @__PURE__ */ b("span", {
 							"aria-hidden": "true",
-							children: l.thinking
+							children: u.thinking
 						})]
-					}) : e.answer && /* @__PURE__ */ b(X, {
+					}) : e.answer && (c ? c(e, { streaming: !!e.streaming }) : /* @__PURE__ */ b(X, {
 						text: e.answer,
 						resolveLink: i,
 						linkComponent: a
-					})
+					}))
 				}),
 				e.error && /* @__PURE__ */ b(t, {
 					size: "sm",
@@ -893,12 +893,12 @@ function Q({ turn: e, onRate: n, resolveLink: i, linkComponent: a, confirmAction
 					action: e,
 					confirmAction: o,
 					onViewTicket: s,
-					labels: c
+					labels: l
 				}, e.token)),
 				n && e.messageId && !e.streaming && /* @__PURE__ */ b(Z, {
 					rating: e.rating,
 					onRate: (t, r) => n(e.id, t, r),
-					labels: c
+					labels: l
 				})
 			]
 		})]
@@ -906,23 +906,23 @@ function Q({ turn: e, onRate: n, resolveLink: i, linkComponent: a, confirmAction
 }
 //#endregion
 //#region src/components/ChatThread.jsx
-function $({ turns: e, empty: t, onRate: n, resolveLink: r, linkComponent: i, confirmAction: a, onViewTicket: s, labels: c }) {
-	let l = M(c), u = _(null), d = e[e.length - 1];
+function $({ turns: e, empty: t, onRate: n, resolveLink: r, linkComponent: i, confirmAction: a, onViewTicket: s, renderReply: c, labels: l }) {
+	let u = M(l), d = _(null), f = e[e.length - 1];
 	return h(() => {
-		u.current?.scrollIntoView({ block: "end" });
+		d.current?.scrollIntoView({ block: "end" });
 	}, [
 		e.length,
-		d?.answer,
-		d?.error,
-		d?.actions
+		f?.answer,
+		f?.error,
+		f?.actions
 	]), e.length === 0 ? t ?? /* @__PURE__ */ b(o, {
 		icon: "sparkles",
 		size: "sm",
-		title: l.emptyTitle,
-		text: l.emptyText
+		title: u.emptyTitle,
+		text: u.emptyText
 	}) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("ol", {
 		className: "list-unstyled d-flex flex-column gap-3 mb-0",
-		"aria-label": l.thread,
+		"aria-label": u.thread,
 		children: e.map((e) => /* @__PURE__ */ b(Q, {
 			turn: e,
 			onRate: n,
@@ -930,18 +930,19 @@ function $({ turns: e, empty: t, onRate: n, resolveLink: r, linkComponent: i, co
 			linkComponent: i,
 			confirmAction: a,
 			onViewTicket: s,
-			labels: c
+			renderReply: c,
+			labels: l
 		}, e.id))
-	}), /* @__PURE__ */ b("div", { ref: u })] });
+	}), /* @__PURE__ */ b("div", { ref: d })] });
 }
 //#endregion
 //#region src/components/ChatPanel.jsx
-function me({ chat: n, open: r, onClose: i, title: a, titleIcon: o = "sparkles", headerActions: c, empty: u, disclaimer: f, maxLength: p = 4e3, allowanceThreshold: m = 10, width: g = "440px", resolveLink: v, linkComponent: y, confirmAction: S, onViewTicket: C, rating: w = !0, labels: T }) {
-	let E = M(T), D = _(null), { refreshAllowance: O } = n;
+function me({ chat: n, open: r, onClose: i, title: a, titleIcon: o = "sparkles", headerActions: c, empty: u, disclaimer: f, maxLength: p = 4e3, allowanceThreshold: m = 10, width: g = "440px", resolveLink: v, linkComponent: y, confirmAction: S, onViewTicket: C, rating: w = !0, renderReply: T, labels: E }) {
+	let D = M(E), O = _(null), { refreshAllowance: k } = n;
 	h(() => {
-		r && O().catch(() => {});
-	}, [r, O]);
-	let k = n.messagesLeftToday, A = a ?? E.panelTitle;
+		r && k().catch(() => {});
+	}, [r, k]);
+	let A = n.messagesLeftToday, j = a ?? D.panelTitle;
 	return /* @__PURE__ */ b(l, {
 		show: r,
 		onHide: i,
@@ -957,20 +958,20 @@ function me({ chat: n, open: r, onClose: i, title: a, titleIcon: o = "sparkles",
 						name: o,
 						size: 18
 					})
-				}), A]
+				}), j]
 			}), /* @__PURE__ */ x("div", {
 				className: "d-flex align-items-center gap-1",
 				children: [
 					c,
 					/* @__PURE__ */ b(e, {
 						icon: "plus",
-						label: E.newChat,
+						label: D.newChat,
 						onClick: n.newConversation,
 						disabled: n.turns.length === 0 && !n.loading
 					}),
 					/* @__PURE__ */ b(e, {
 						icon: "x",
-						label: E.close,
+						label: D.close,
 						onClick: i
 					})
 				]
@@ -979,30 +980,30 @@ function me({ chat: n, open: r, onClose: i, title: a, titleIcon: o = "sparkles",
 		footer: /* @__PURE__ */ x("div", {
 			className: "d-flex flex-column gap-2",
 			children: [
-				k !== null && k <= m && /* @__PURE__ */ b("p", {
+				A !== null && A <= m && /* @__PURE__ */ b("p", {
 					className: "wui-text-xs text-body-secondary mb-0",
 					role: "status",
-					children: E.allowance(k)
+					children: D.allowance(A)
 				}),
 				/* @__PURE__ */ b(I, {
 					onSubmit: n.submit,
 					busy: n.streaming || n.loading,
-					disabled: k === 0,
+					disabled: A === 0,
 					maxLength: p,
-					inputRef: D,
-					labels: T
+					inputRef: O,
+					labels: E
 				}),
 				/* @__PURE__ */ b("p", {
 					className: "wui-text-xs text-body-secondary mb-0",
-					children: f ?? E.disclaimer
+					children: f ?? D.disclaimer
 				})
 			]
 		}),
-		ariaLabel: typeof A == "string" ? A : E.panelTitle,
-		onEntered: () => D.current?.focus(),
+		ariaLabel: typeof j == "string" ? j : D.panelTitle,
+		onEntered: () => O.current?.focus(),
 		children: n.loading ? /* @__PURE__ */ b("div", {
 			className: "d-flex justify-content-center py-4",
-			children: /* @__PURE__ */ b(d, { label: E.loadingConversation })
+			children: /* @__PURE__ */ b(d, { label: D.loadingConversation })
 		}) : n.loadError ? /* @__PURE__ */ b(t, {
 			variant: "danger",
 			children: n.loadError.message
@@ -1014,7 +1015,8 @@ function me({ chat: n, open: r, onClose: i, title: a, titleIcon: o = "sparkles",
 			linkComponent: y,
 			confirmAction: S,
 			onViewTicket: C,
-			labels: T
+			renderReply: T,
+			labels: E
 		})
 	});
 }

package/dist/types/components/ChatMessage.d.ts

@@ -12,9 +12,12 @@
  * @param {(token: string) => Promise<{ id: string, number: string }>} [props.confirmAction] Shows
  *   support action cards; see `ActionCard`.
  * @param {(ticket: { id: string, number: string }) => void} [props.onViewTicket]
+ * @param {(turn: import('../useChat.js').ChatTurn, state: { streaming: boolean }) => import('react').ReactNode} [props.renderReply]
+ *   Draws the assistant's answer in place of `ChatMarkdown` (charts, maths). The question, action
+ *   cards, rating and layout stay the library's.
  * @param {Partial<typeof import('../labels.js').DEFAULT_CHAT_LABELS>} [props.labels]
  */
-export default function ChatMessage({ turn, onRate, resolveLink, linkComponent, confirmAction, onViewTicket, labels: labelOverrides }: {
+export default function ChatMessage({ turn, onRate, resolveLink, linkComponent, confirmAction, onViewTicket, renderReply, labels: labelOverrides, }: {
     turn: import('../useChat.js').ChatTurn;
     onRate?: (turnId: string, rating: "Up" | "Down", note?: string) => Promise<unknown>;
     resolveLink?: (href: string) => string | null | undefined;
@@ -27,5 +30,8 @@ export default function ChatMessage({ turn, onRate, resolveLink, linkComponent,
         id: string;
         number: string;
     }) => void;
+    renderReply?: (turn: import('../useChat.js').ChatTurn, state: {
+        streaming: boolean;
+    }) => import('react').ReactNode;
     labels?: Partial<typeof import('../labels.js').DEFAULT_CHAT_LABELS>;
 }): import("react").JSX.Element;

package/dist/types/components/ChatPanel.d.ts

@@ -23,9 +23,11 @@
  *   support action cards, e.g. `supportClient.confirmAction`.
  * @param {(ticket: { id: string, number: string }) => void} [props.onViewTicket]
  * @param {boolean} [props.rating=true] Offer thumbs under stored replies.
+ * @param {(turn: import('../useChat.js').ChatTurn, state: { streaming: boolean }) => import('react').ReactNode} [props.renderReply]
+ *   Draws each assistant answer instead of `ChatMarkdown`; see `ChatMessage`.
  * @param {Partial<typeof import('../labels.js').DEFAULT_CHAT_LABELS>} [props.labels]
  */
-export default function ChatPanel({ chat, open, onClose, title, titleIcon, headerActions, empty, disclaimer, maxLength, allowanceThreshold, width, resolveLink, linkComponent, confirmAction, onViewTicket, rating, labels: labelOverrides, }: {
+export default function ChatPanel({ chat, open, onClose, title, titleIcon, headerActions, empty, disclaimer, maxLength, allowanceThreshold, width, resolveLink, linkComponent, confirmAction, onViewTicket, rating, renderReply, labels: labelOverrides, }: {
     chat: ReturnType<typeof import('../useChat.js').useChat>;
     open: boolean;
     onClose: () => void;
@@ -48,5 +50,8 @@ export default function ChatPanel({ chat, open, onClose, title, titleIcon, heade
         number: string;
     }) => void;
     rating?: boolean;
+    renderReply?: (turn: import('../useChat.js').ChatTurn, state: {
+        streaming: boolean;
+    }) => import('react').ReactNode;
     labels?: Partial<typeof import('../labels.js').DEFAULT_CHAT_LABELS>;
 }): import("react").JSX.Element;

package/dist/types/components/ChatThread.d.ts

@@ -10,9 +10,11 @@
  * @param {import('react').ElementType} [props.linkComponent]
  * @param {(token: string) => Promise<{ id: string, number: string }>} [props.confirmAction]
  * @param {(ticket: { id: string, number: string }) => void} [props.onViewTicket]
+ * @param {(turn: import('../useChat.js').ChatTurn, state: { streaming: boolean }) => import('react').ReactNode} [props.renderReply]
+ *   Draws each assistant answer instead of `ChatMarkdown`; see `ChatMessage`.
  * @param {Partial<typeof import('../labels.js').DEFAULT_CHAT_LABELS>} [props.labels]
  */
-export default function ChatThread({ turns, empty, onRate, resolveLink, linkComponent, confirmAction, onViewTicket, labels: labelOverrides, }: {
+export default function ChatThread({ turns, empty, onRate, resolveLink, linkComponent, confirmAction, onViewTicket, renderReply, labels: labelOverrides, }: {
     turns: import('../useChat.js').ChatTurn[];
     empty?: import('react').ReactNode;
     onRate?: (turnId: string, rating: "Up" | "Down", note?: string) => Promise<unknown>;
@@ -26,5 +28,8 @@ export default function ChatThread({ turns, empty, onRate, resolveLink, linkComp
         id: string;
         number: string;
     }) => void;
+    renderReply?: (turn: import('../useChat.js').ChatTurn, state: {
+        streaming: boolean;
+    }) => import('react').ReactNode;
     labels?: Partial<typeof import('../labels.js').DEFAULT_CHAT_LABELS>;
 }): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/chat-react",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Webority AI assistant for React portals: a streaming chat client, a store-agnostic chat hook, and the launcher, panel, thread, rating and support action card, built on @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -32,7 +32,7 @@
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^19.0.0",
-    "@webority/ui-react": "0.22.0"
+    "@webority/ui-react": "0.23.0"
   },
   "devDependencies": {
     "@testing-library/dom": "10.4.2",
@@ -50,7 +50,7 @@
     "typescript": "^7.0.2",
     "vite": "^8.0.12",
     "vitest": "5.0.1",
-    "@webority/ui-react": "0.22.0"
+    "@webority/ui-react": "0.23.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json",