@payfit/unity-components 3.9.6 → 3.9.7

package/dist/esm/ai-kit.js

@@ -13,9 +13,10 @@ import { AIComposerSubmitAction as f } from "./modules/ai-kit/components/ai-comp
 import { AIComposerTextArea as p } from "./modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js";
 import { useAIKitFieldContext as m, useAIKitFormContext as h } from "./modules/ai-kit/hooks/ai-kit-form-context.js";
 import { aiKitForm as g, useAIKitForm as _ } from "./modules/ai-kit/hooks/use-ai-kit-form.js";
-import { AIOutcomeCardIcon as v } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.js";
-import { AIOutcomeCardTitle as y } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.js";
-import { AIOutcomeCardDescription as b } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.js";
-import { AIOutcomeCardActions as x } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.js";
-import { AIOutcomeCardAction as S } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.js";
-export { r as AIButton, c as AIComposer, l as AIComposerAction, u as AIComposerActions, d as AIComposerAlert, o as AIComposerAttachment, s as AIComposerAttachmentsGroup, f as AIComposerSubmitAction, p as AIComposerTextArea, S as AIOutcomeCardAction, x as AIOutcomeCardActions, b as AIOutcomeCardDescription, v as AIOutcomeCardIcon, y as AIOutcomeCardTitle, a as AITriggerButton, i as PayfitAIBrand, e as RawAIOutcomeCard, t as aiGradientEffect, n as aiGradientSurfaceEffect, g as aiKitForm, m as useAIKitFieldContext, _ as useAIKitForm, h as useAIKitFormContext };
+import { AIChatEventFeedback as v } from "./modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.js";
+import { AIOutcomeCardIcon as y } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.js";
+import { AIOutcomeCardTitle as b } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.js";
+import { AIOutcomeCardDescription as x } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.js";
+import { AIOutcomeCardActions as S } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.js";
+import { AIOutcomeCardAction as C } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.js";
+export { r as AIButton, v as AIChatEventFeedback, c as AIComposer, l as AIComposerAction, u as AIComposerActions, d as AIComposerAlert, o as AIComposerAttachment, s as AIComposerAttachmentsGroup, f as AIComposerSubmitAction, p as AIComposerTextArea, C as AIOutcomeCardAction, S as AIOutcomeCardActions, x as AIOutcomeCardDescription, y as AIOutcomeCardIcon, b as AIOutcomeCardTitle, a as AITriggerButton, i as PayfitAIBrand, e as RawAIOutcomeCard, t as aiGradientEffect, n as aiGradientSurfaceEffect, g as aiKitForm, m as useAIKitFieldContext, _ as useAIKitForm, h as useAIKitFormContext };

package/dist/esm/modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.d.ts

@@ -0,0 +1,62 @@
+import { HTMLAttributes, ReactNode } from 'react';
+type BaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The outcome message displayed alongside the state indicator. */
+    label: ReactNode;
+    /**
+     * Controls whether the label is announced when it is inserted into the DOM.
+     * Use `off` when a parent chat log announces transcript updates or when
+     * rendering message history.
+     * @default 'auto'
+     */
+    announce?: 'auto' | 'off';
+};
+export type AIChatEventFeedbackProps = (BaseProps & {
+    /** Confirms a completed AI chat action. */
+    state: 'success';
+    /** Renders result content below the confirmation label. */
+    resultSlot?: () => ReactNode;
+    actionsSlot?: never;
+}) | (BaseProps & {
+    /** Explains that an AI chat action could not be completed. */
+    state: 'failure';
+    /** Renders one or more recovery controls below the error label. */
+    actionsSlot: () => ReactNode;
+    resultSlot?: never;
+});
+/**
+ * Gives people a clear, accessible explanation when an AI chat action reaches
+ * a terminal outcome.
+ * The component presents a success or failure state with a localized status
+ * prefix, then places consumer-owned result content or recovery actions below
+ * the label without introducing feedback state or toggle behavior.
+ * @param props - The event outcome, label, and state-specific slot content.
+ * @param props.label - The message that explains the event outcome.
+ * @param props.state - Selects the success or failure presentation.
+ * @param props.resultSlot - Renders successful-event content below the label.
+ * @param props.actionsSlot - Renders failure recovery controls below the label.
+ * @param props.announce - Enables or disables the component's live-region
+ *   announcement for the label.
+ * @see {@link AIChatEventFeedbackProps} for the state-specific prop contract.
+ * @example
+ * ```tsx
+ * import { Button } from '@payfit/unity-components'
+ * import { AIChatEventFeedback } from '@payfit/unity-components/ai-kit'
+ *
+ * <AIChatEventFeedback
+ *   state="failure"
+ *   label="The leave request could not be created."
+ *   actionsSlot={() => <Button>Try again</Button>}
+ * />
+ * ```
+ * @remarks
+ * - A successful event may render an outcome card through `resultSlot`; a
+ *   failed event requires `actionsSlot` for one or more recovery controls.
+ * - `announce="auto"` gives success labels a polite `status` announcement and
+ *   failure labels an assertive `alert` announcement. `announce="off"`
+ *   removes the nested live region for transcripts that already announce
+ *   updates.
+ * - Only the label is inside the live region. Slot content remains outside it
+ *   so controls and outcome-card content are not repeated by screen readers.
+ */
+export declare const AIChatEventFeedback: import('react').ForwardRefExoticComponent<AIChatEventFeedbackProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.js

@@ -0,0 +1,85 @@
+import { forwardRef as e } from "react";
+import { uyMerge as t, uyTv as n } from "@payfit/unity-themes";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useIntl as a } from "react-intl";
+import { Icon as o } from "@payfit/unity-icons";
+//#region src/modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.tsx
+var s = n({
+	slots: {
+		base: ["uy:grid uy:grid-cols-[auto_minmax(0,1fr)] uy:gap-x-75"],
+		label: "uy:flex uy:min-w-0 uy:items-start",
+		labelText: "uy:typography-body uy:text-content-neutral",
+		stateIcon: "uy:mt-25 uy:shrink-0 uy:md:mt-0",
+		content: "uy:col-start-2 uy:flex uy:min-w-0 uy:flex-col uy:gap-100",
+		actions: "uy:flex uy:flex-wrap uy:gap-100"
+	},
+	variants: { state: {
+		success: { stateIcon: "uy:text-content-success" },
+		failure: { stateIcon: "uy:text-content-danger" }
+	} },
+	defaultVariants: { state: "success" }
+}), c = {
+	success: {
+		accessibleLabelId: "unity:module:ai-kit:chat-event-feedback:success",
+		accessibleLabelDefault: "Success: ",
+		icon: "CheckCircleFilled",
+		role: "status"
+	},
+	failure: {
+		accessibleLabelId: "unity:module:ai-kit:chat-event-feedback:failure",
+		accessibleLabelDefault: "Error: ",
+		icon: "WarningCircleFilled",
+		role: "alert"
+	}
+}, l = e(({ announce: e = "auto", actionsSlot: n, className: l, label: u, resultSlot: d, state: f, ...p }, m) => {
+	let h = a(), g = s({ state: f }), _ = c[f], v = h.formatMessage({
+		id: _.accessibleLabelId,
+		defaultMessage: _.accessibleLabelDefault
+	}), y = e === "auto" ? {
+		"aria-atomic": !0,
+		"aria-live": _.role === "alert" ? "assertive" : "polite",
+		role: _.role
+	} : void 0;
+	return /* @__PURE__ */ i("div", {
+		...p,
+		ref: m,
+		className: t(g.base(), l),
+		"data-dd-privacy": "mask",
+		"data-state": f,
+		children: [/* @__PURE__ */ r(o, {
+			"aria-hidden": "true",
+			className: g.stateIcon(),
+			role: "presentation",
+			size: 20,
+			src: _.icon
+		}), /* @__PURE__ */ i("div", {
+			className: g.content(),
+			children: [
+				/* @__PURE__ */ r("div", {
+					...y,
+					className: g.label(),
+					children: /* @__PURE__ */ i("div", {
+						className: g.labelText(),
+						"data-unity-slot": "label",
+						children: [/* @__PURE__ */ r("span", {
+							className: "uy:sr-only",
+							children: v
+						}), u]
+					})
+				}),
+				f === "success" && d ? /* @__PURE__ */ r("div", {
+					"data-unity-slot": "result",
+					children: d()
+				}) : null,
+				f === "failure" ? /* @__PURE__ */ r("div", {
+					className: g.actions(),
+					"data-unity-slot": "actions",
+					children: n()
+				}) : null
+			]
+		})]
+	});
+});
+l.displayName = "AIChatEventFeedback";
+//#endregion
+export { l as AIChatEventFeedback };

package/dist/esm/modules/ai-kit/index.d.ts

@@ -13,6 +13,7 @@ export { AIComposerTextArea, type AIComposerTextAreaProps, } from './components/
 export { aiGradientEffect, aiGradientSurfaceEffect, } from './utils/ai-gradient-effect.js';
 export { aiKitForm, useAIKitForm } from './hooks/use-ai-kit-form.js';
 export { useAIKitFieldContext, useAIKitFormContext, } from './hooks/ai-kit-form-context.js';
+export { AIChatEventFeedback, type AIChatEventFeedbackProps, } from './components/aichat-event-feedback/AIChatEventFeedback.js';
 export { RawAIOutcomeCard, type RawAIOutcomeCardProps, } from './components/ai-outcome-card/RawAIOutcomeCard.js';
 export { AIOutcomeCardIcon, type AIOutcomeCardIconProps, } from './components/ai-outcome-card/parts/AIOutcomeCardIcon.js';
 export { AIOutcomeCardTitle, type AIOutcomeCardTitleProps, } from './components/ai-outcome-card/parts/AIOutcomeCardTitle.js';

package/i18n/en-GB.json

@@ -150,6 +150,8 @@
   "unity:layout:funnel:skip-links:sidebar": "Sidebar",
   "unity:layout:funnel:skip-links:footer": "Footer",
   "unity:layout:funnel:sidebar:aria-label": "Process steps",
+  "unity:module:ai-kit:chat-event-feedback:success": "Success: ",
+  "unity:module:ai-kit:chat-event-feedback:failure": "Error: ",
   "unity:module:ai-kit:composer:action": "Composer action",
   "unity:module:ai-kit:composer:attachment-group": "Attachments",
   "unity:module:ai-kit:composer:attachment:remove": "Remove Attachment",

package/i18n/es-ES.json

@@ -150,6 +150,8 @@
   "unity:layout:funnel:skip-links:sidebar": "Barra lateral",
   "unity:layout:funnel:skip-links:footer": "Pie de página",
   "unity:layout:funnel:sidebar:aria-label": "Pasos del proceso",
+  "unity:module:ai-kit:chat-event-feedback:success": "Éxito: ",
+  "unity:module:ai-kit:chat-event-feedback:failure": "Error: ",
   "unity:module:ai-kit:composer:action": "Acción de composer",
   "unity:module:ai-kit:composer:attachment-group": "Ficheros adjuntos",
   "unity:module:ai-kit:composer:attachment:remove": "Eliminar",

package/i18n/fr-FR.json

@@ -151,6 +151,8 @@
   "unity:layout:funnel:skip-links:sidebar": "Barre latérale",
   "unity:layout:funnel:skip-links:footer": "Pied de page",
   "unity:layout:funnel:sidebar:aria-label": "Étapes du processus",
+  "unity:module:ai-kit:chat-event-feedback:success": "Succès : ",
+  "unity:module:ai-kit:chat-event-feedback:failure": "Erreur : ",
   "unity:module:ai-kit:composer:action": "Action du composer",
   "unity:module:ai-kit:composer:attachment-group": "Fichiers joints",
   "unity:module:ai-kit:composer:attachment:remove": "Supprimer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.9.6",
+  "version": "3.9.7",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -103,7 +103,7 @@
     "@formatjs/intl": "4.1.12",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.9.6",
+    "@payfit/unity-illustrations": "3.9.7",
     "@radix-ui/react-avatar": "1.2.6",
     "@radix-ui/react-slot": "1.3.3",
     "@react-aria/interactions": "3.28.1",
@@ -132,8 +132,8 @@
     "zod": "4.6.5"
   },
   "peerDependencies": {
-    "@payfit/unity-icons": "3.9.6",
-    "@payfit/unity-themes": "3.9.6",
+    "@payfit/unity-icons": "3.9.7",
+    "@payfit/unity-themes": "3.9.7",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/form-core": "1.33.5",
@@ -157,9 +157,9 @@
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "3.9.6",
-    "@payfit/unity-illustrations": "3.9.6",
-    "@payfit/unity-themes": "3.9.6",
+    "@payfit/unity-icons": "3.9.7",
+    "@payfit/unity-illustrations": "3.9.7",
+    "@payfit/unity-themes": "3.9.7",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-designs": "11.1.4",

package/src/agent-references/component-catalog.json

@@ -25,6 +25,31 @@
       ],
       "title": "AIButton"
     },
+    {
+      "description": "Reports successful or failed AI chat actions with optional outcome content or required recovery actions.",
+      "docsHref": "?path=/docs/ai-kit-aichateventfeedback--docs",
+      "id": "ai-kit-aichateventfeedback",
+      "keywords": [
+        "ai",
+        "chat",
+        "event",
+        "feedback",
+        "success",
+        "failure"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "success",
+        "storyId": "ai-kit-aichateventfeedback--success"
+      },
+      "related": [],
+      "section": "components",
+      "tags": [
+        "type:component",
+        "category:feedback"
+      ],
+      "title": "AIChatEventFeedback"
+    },
     {
       "description": "Composes an accessible AI prompt field with attachments, feedback, and lifecycle-aware actions.",
       "docsHref": "?path=/docs/ai-kit-aicomposer--docs",