@payfit/unity-components 3.9.5 → 3.9.7
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.
- package/dist/esm/ai-kit.js +7 -6
- package/dist/esm/modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.d.ts +62 -0
- package/dist/esm/modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.js +85 -0
- package/dist/esm/modules/ai-kit/index.d.ts +1 -0
- package/i18n/en-GB.json +2 -0
- package/i18n/es-ES.json +2 -0
- package/i18n/fr-FR.json +2 -0
- package/package.json +8 -7
- package/src/agent-references/component-catalog.json +25 -0
package/dist/esm/ai-kit.js
CHANGED
|
@@ -13,9 +13,10 @@ import { AIComposerSubmitAction as f } from "./modules/ai-kit/components/ai-comp
|
|
|
13
13
|
import { AIComposerTextArea as p } from "./modules/ai-kit/components/ai-composer/parts/AIComposerTextArea.js";
|
|
14
14
|
import { useAIKitFieldContext as m, useAIKitFormContext as h } from "./modules/ai-kit/hooks/ai-kit-form-context.js";
|
|
15
15
|
import { aiKitForm as g, useAIKitForm as _ } from "./modules/ai-kit/hooks/use-ai-kit-form.js";
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
|
|
16
|
+
import { AIChatEventFeedback as v } from "./modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.js";
|
|
17
|
+
import { AIOutcomeCardIcon as y } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardIcon.js";
|
|
18
|
+
import { AIOutcomeCardTitle as b } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardTitle.js";
|
|
19
|
+
import { AIOutcomeCardDescription as x } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardDescription.js";
|
|
20
|
+
import { AIOutcomeCardActions as S } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardActions.js";
|
|
21
|
+
import { AIOutcomeCardAction as C } from "./modules/ai-kit/components/ai-outcome-card/parts/AIOutcomeCardAction.js";
|
|
22
|
+
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 };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
type BaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
3
|
+
/** The outcome message displayed alongside the state indicator. */
|
|
4
|
+
label: ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* Controls whether the label is announced when it is inserted into the DOM.
|
|
7
|
+
* Use `off` when a parent chat log announces transcript updates or when
|
|
8
|
+
* rendering message history.
|
|
9
|
+
* @default 'auto'
|
|
10
|
+
*/
|
|
11
|
+
announce?: 'auto' | 'off';
|
|
12
|
+
};
|
|
13
|
+
export type AIChatEventFeedbackProps = (BaseProps & {
|
|
14
|
+
/** Confirms a completed AI chat action. */
|
|
15
|
+
state: 'success';
|
|
16
|
+
/** Renders result content below the confirmation label. */
|
|
17
|
+
resultSlot?: () => ReactNode;
|
|
18
|
+
actionsSlot?: never;
|
|
19
|
+
}) | (BaseProps & {
|
|
20
|
+
/** Explains that an AI chat action could not be completed. */
|
|
21
|
+
state: 'failure';
|
|
22
|
+
/** Renders one or more recovery controls below the error label. */
|
|
23
|
+
actionsSlot: () => ReactNode;
|
|
24
|
+
resultSlot?: never;
|
|
25
|
+
});
|
|
26
|
+
/**
|
|
27
|
+
* Gives people a clear, accessible explanation when an AI chat action reaches
|
|
28
|
+
* a terminal outcome.
|
|
29
|
+
* The component presents a success or failure state with a localized status
|
|
30
|
+
* prefix, then places consumer-owned result content or recovery actions below
|
|
31
|
+
* the label without introducing feedback state or toggle behavior.
|
|
32
|
+
* @param props - The event outcome, label, and state-specific slot content.
|
|
33
|
+
* @param props.label - The message that explains the event outcome.
|
|
34
|
+
* @param props.state - Selects the success or failure presentation.
|
|
35
|
+
* @param props.resultSlot - Renders successful-event content below the label.
|
|
36
|
+
* @param props.actionsSlot - Renders failure recovery controls below the label.
|
|
37
|
+
* @param props.announce - Enables or disables the component's live-region
|
|
38
|
+
* announcement for the label.
|
|
39
|
+
* @see {@link AIChatEventFeedbackProps} for the state-specific prop contract.
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* import { Button } from '@payfit/unity-components'
|
|
43
|
+
* import { AIChatEventFeedback } from '@payfit/unity-components/ai-kit'
|
|
44
|
+
*
|
|
45
|
+
* <AIChatEventFeedback
|
|
46
|
+
* state="failure"
|
|
47
|
+
* label="The leave request could not be created."
|
|
48
|
+
* actionsSlot={() => <Button>Try again</Button>}
|
|
49
|
+
* />
|
|
50
|
+
* ```
|
|
51
|
+
* @remarks
|
|
52
|
+
* - A successful event may render an outcome card through `resultSlot`; a
|
|
53
|
+
* failed event requires `actionsSlot` for one or more recovery controls.
|
|
54
|
+
* - `announce="auto"` gives success labels a polite `status` announcement and
|
|
55
|
+
* failure labels an assertive `alert` announcement. `announce="off"`
|
|
56
|
+
* removes the nested live region for transcripts that already announce
|
|
57
|
+
* updates.
|
|
58
|
+
* - Only the label is inside the live region. Slot content remains outside it
|
|
59
|
+
* so controls and outcome-card content are not repeated by screen readers.
|
|
60
|
+
*/
|
|
61
|
+
export declare const AIChatEventFeedback: import('react').ForwardRefExoticComponent<AIChatEventFeedbackProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
62
|
+
export {};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { forwardRef as e } from "react";
|
|
2
|
+
import { uyMerge as t, uyTv as n } from "@payfit/unity-themes";
|
|
3
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
4
|
+
import { useIntl as a } from "react-intl";
|
|
5
|
+
import { Icon as o } from "@payfit/unity-icons";
|
|
6
|
+
//#region src/modules/ai-kit/components/aichat-event-feedback/AIChatEventFeedback.tsx
|
|
7
|
+
var s = n({
|
|
8
|
+
slots: {
|
|
9
|
+
base: ["uy:grid uy:grid-cols-[auto_minmax(0,1fr)] uy:gap-x-75"],
|
|
10
|
+
label: "uy:flex uy:min-w-0 uy:items-start",
|
|
11
|
+
labelText: "uy:typography-body uy:text-content-neutral",
|
|
12
|
+
stateIcon: "uy:mt-25 uy:shrink-0 uy:md:mt-0",
|
|
13
|
+
content: "uy:col-start-2 uy:flex uy:min-w-0 uy:flex-col uy:gap-100",
|
|
14
|
+
actions: "uy:flex uy:flex-wrap uy:gap-100"
|
|
15
|
+
},
|
|
16
|
+
variants: { state: {
|
|
17
|
+
success: { stateIcon: "uy:text-content-success" },
|
|
18
|
+
failure: { stateIcon: "uy:text-content-danger" }
|
|
19
|
+
} },
|
|
20
|
+
defaultVariants: { state: "success" }
|
|
21
|
+
}), c = {
|
|
22
|
+
success: {
|
|
23
|
+
accessibleLabelId: "unity:module:ai-kit:chat-event-feedback:success",
|
|
24
|
+
accessibleLabelDefault: "Success: ",
|
|
25
|
+
icon: "CheckCircleFilled",
|
|
26
|
+
role: "status"
|
|
27
|
+
},
|
|
28
|
+
failure: {
|
|
29
|
+
accessibleLabelId: "unity:module:ai-kit:chat-event-feedback:failure",
|
|
30
|
+
accessibleLabelDefault: "Error: ",
|
|
31
|
+
icon: "WarningCircleFilled",
|
|
32
|
+
role: "alert"
|
|
33
|
+
}
|
|
34
|
+
}, l = e(({ announce: e = "auto", actionsSlot: n, className: l, label: u, resultSlot: d, state: f, ...p }, m) => {
|
|
35
|
+
let h = a(), g = s({ state: f }), _ = c[f], v = h.formatMessage({
|
|
36
|
+
id: _.accessibleLabelId,
|
|
37
|
+
defaultMessage: _.accessibleLabelDefault
|
|
38
|
+
}), y = e === "auto" ? {
|
|
39
|
+
"aria-atomic": !0,
|
|
40
|
+
"aria-live": _.role === "alert" ? "assertive" : "polite",
|
|
41
|
+
role: _.role
|
|
42
|
+
} : void 0;
|
|
43
|
+
return /* @__PURE__ */ i("div", {
|
|
44
|
+
...p,
|
|
45
|
+
ref: m,
|
|
46
|
+
className: t(g.base(), l),
|
|
47
|
+
"data-dd-privacy": "mask",
|
|
48
|
+
"data-state": f,
|
|
49
|
+
children: [/* @__PURE__ */ r(o, {
|
|
50
|
+
"aria-hidden": "true",
|
|
51
|
+
className: g.stateIcon(),
|
|
52
|
+
role: "presentation",
|
|
53
|
+
size: 20,
|
|
54
|
+
src: _.icon
|
|
55
|
+
}), /* @__PURE__ */ i("div", {
|
|
56
|
+
className: g.content(),
|
|
57
|
+
children: [
|
|
58
|
+
/* @__PURE__ */ r("div", {
|
|
59
|
+
...y,
|
|
60
|
+
className: g.label(),
|
|
61
|
+
children: /* @__PURE__ */ i("div", {
|
|
62
|
+
className: g.labelText(),
|
|
63
|
+
"data-unity-slot": "label",
|
|
64
|
+
children: [/* @__PURE__ */ r("span", {
|
|
65
|
+
className: "uy:sr-only",
|
|
66
|
+
children: v
|
|
67
|
+
}), u]
|
|
68
|
+
})
|
|
69
|
+
}),
|
|
70
|
+
f === "success" && d ? /* @__PURE__ */ r("div", {
|
|
71
|
+
"data-unity-slot": "result",
|
|
72
|
+
children: d()
|
|
73
|
+
}) : null,
|
|
74
|
+
f === "failure" ? /* @__PURE__ */ r("div", {
|
|
75
|
+
className: g.actions(),
|
|
76
|
+
"data-unity-slot": "actions",
|
|
77
|
+
children: n()
|
|
78
|
+
}) : null
|
|
79
|
+
]
|
|
80
|
+
})]
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
l.displayName = "AIChatEventFeedback";
|
|
84
|
+
//#endregion
|
|
85
|
+
export { l as AIChatEventFeedback };
|
|
@@ -13,6 +13,7 @@ export { AIComposerTextArea, type AIComposerTextAreaProps, } from './components/
|
|
|
13
13
|
export { aiGradientEffect, aiGradientSurfaceEffect, } from './utils/ai-gradient-effect.js';
|
|
14
14
|
export { aiKitForm, useAIKitForm } from './hooks/use-ai-kit-form.js';
|
|
15
15
|
export { useAIKitFieldContext, useAIKitFormContext, } from './hooks/ai-kit-form-context.js';
|
|
16
|
+
export { AIChatEventFeedback, type AIChatEventFeedbackProps, } from './components/aichat-event-feedback/AIChatEventFeedback.js';
|
|
16
17
|
export { RawAIOutcomeCard, type RawAIOutcomeCardProps, } from './components/ai-outcome-card/RawAIOutcomeCard.js';
|
|
17
18
|
export { AIOutcomeCardIcon, type AIOutcomeCardIconProps, } from './components/ai-outcome-card/parts/AIOutcomeCardIcon.js';
|
|
18
19
|
export { AIOutcomeCardTitle, type AIOutcomeCardTitleProps, } from './components/ai-outcome-card/parts/AIOutcomeCardTitle.js';
|
package/i18n/en-GB.json
CHANGED
|
@@ -150,6 +150,8 @@
|
|
|
150
150
|
"unity:layout:funnel:skip-links:sidebar": "Sidebar",
|
|
151
151
|
"unity:layout:funnel:skip-links:footer": "Footer",
|
|
152
152
|
"unity:layout:funnel:sidebar:aria-label": "Process steps",
|
|
153
|
+
"unity:module:ai-kit:chat-event-feedback:success": "Success: ",
|
|
154
|
+
"unity:module:ai-kit:chat-event-feedback:failure": "Error: ",
|
|
153
155
|
"unity:module:ai-kit:composer:action": "Composer action",
|
|
154
156
|
"unity:module:ai-kit:composer:attachment-group": "Attachments",
|
|
155
157
|
"unity:module:ai-kit:composer:attachment:remove": "Remove Attachment",
|
package/i18n/es-ES.json
CHANGED
|
@@ -150,6 +150,8 @@
|
|
|
150
150
|
"unity:layout:funnel:skip-links:sidebar": "Barra lateral",
|
|
151
151
|
"unity:layout:funnel:skip-links:footer": "Pie de página",
|
|
152
152
|
"unity:layout:funnel:sidebar:aria-label": "Pasos del proceso",
|
|
153
|
+
"unity:module:ai-kit:chat-event-feedback:success": "Éxito: ",
|
|
154
|
+
"unity:module:ai-kit:chat-event-feedback:failure": "Error: ",
|
|
153
155
|
"unity:module:ai-kit:composer:action": "Acción de composer",
|
|
154
156
|
"unity:module:ai-kit:composer:attachment-group": "Ficheros adjuntos",
|
|
155
157
|
"unity:module:ai-kit:composer:attachment:remove": "Eliminar",
|
package/i18n/fr-FR.json
CHANGED
|
@@ -151,6 +151,8 @@
|
|
|
151
151
|
"unity:layout:funnel:skip-links:sidebar": "Barre latérale",
|
|
152
152
|
"unity:layout:funnel:skip-links:footer": "Pied de page",
|
|
153
153
|
"unity:layout:funnel:sidebar:aria-label": "Étapes du processus",
|
|
154
|
+
"unity:module:ai-kit:chat-event-feedback:success": "Succès : ",
|
|
155
|
+
"unity:module:ai-kit:chat-event-feedback:failure": "Erreur : ",
|
|
154
156
|
"unity:module:ai-kit:composer:action": "Action du composer",
|
|
155
157
|
"unity:module:ai-kit:composer:attachment-group": "Fichiers joints",
|
|
156
158
|
"unity:module:ai-kit:composer:attachment:remove": "Supprimer",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-components",
|
|
3
|
-
"version": "3.9.
|
|
3
|
+
"version": "3.9.7",
|
|
4
4
|
"module": "./dist/esm/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"@formatjs/intl": "4.1.12",
|
|
104
104
|
"@internationalized/date": "3.12.4",
|
|
105
105
|
"minimatch": "10.2.5",
|
|
106
|
-
"@payfit/unity-illustrations": "3.9.
|
|
106
|
+
"@payfit/unity-illustrations": "3.9.7",
|
|
107
107
|
"@radix-ui/react-avatar": "1.2.6",
|
|
108
108
|
"@radix-ui/react-slot": "1.3.3",
|
|
109
109
|
"@react-aria/interactions": "3.28.1",
|
|
@@ -132,8 +132,8 @@
|
|
|
132
132
|
"zod": "4.6.5"
|
|
133
133
|
},
|
|
134
134
|
"peerDependencies": {
|
|
135
|
-
"@payfit/unity-icons": "3.9.
|
|
136
|
-
"@payfit/unity-themes": "3.9.
|
|
135
|
+
"@payfit/unity-icons": "3.9.7",
|
|
136
|
+
"@payfit/unity-themes": "3.9.7",
|
|
137
137
|
"@storybook/react-vite": "^10",
|
|
138
138
|
"@tanstack/react-query": "^5",
|
|
139
139
|
"@tanstack/form-core": "1.33.5",
|
|
@@ -153,12 +153,13 @@
|
|
|
153
153
|
"@payfit/hr-app-eslint": "0.0.0-use.local",
|
|
154
154
|
"@payfit/hr-app-oxlint": "0.0.0-use.local",
|
|
155
155
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
156
|
+
"@payfit/figma-tools": "0.0.0-use.local",
|
|
156
157
|
"@payfit/storybook-addon-console-errors": "0.0.0-use.local",
|
|
157
158
|
"@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
|
|
158
159
|
"@payfit/storybook-config": "0.0.0-use.local",
|
|
159
|
-
"@payfit/unity-icons": "3.9.
|
|
160
|
-
"@payfit/unity-illustrations": "3.9.
|
|
161
|
-
"@payfit/unity-themes": "3.9.
|
|
160
|
+
"@payfit/unity-icons": "3.9.7",
|
|
161
|
+
"@payfit/unity-illustrations": "3.9.7",
|
|
162
|
+
"@payfit/unity-themes": "3.9.7",
|
|
162
163
|
"@payfit/vite-configs": "0.0.0-use.local",
|
|
163
164
|
"@storybook/addon-a11y": "10.6.0",
|
|
164
165
|
"@storybook/addon-designs": "11.1.4",
|
|
@@ -25,6 +25,31 @@
|
|
|
25
25
|
],
|
|
26
26
|
"title": "AIButton"
|
|
27
27
|
},
|
|
28
|
+
{
|
|
29
|
+
"description": "Reports successful or failed AI chat actions with optional outcome content or required recovery actions.",
|
|
30
|
+
"docsHref": "?path=/docs/ai-kit-aichateventfeedback--docs",
|
|
31
|
+
"id": "ai-kit-aichateventfeedback",
|
|
32
|
+
"keywords": [
|
|
33
|
+
"ai",
|
|
34
|
+
"chat",
|
|
35
|
+
"event",
|
|
36
|
+
"feedback",
|
|
37
|
+
"success",
|
|
38
|
+
"failure"
|
|
39
|
+
],
|
|
40
|
+
"preview": {
|
|
41
|
+
"type": "story",
|
|
42
|
+
"story": "success",
|
|
43
|
+
"storyId": "ai-kit-aichateventfeedback--success"
|
|
44
|
+
},
|
|
45
|
+
"related": [],
|
|
46
|
+
"section": "components",
|
|
47
|
+
"tags": [
|
|
48
|
+
"type:component",
|
|
49
|
+
"category:feedback"
|
|
50
|
+
],
|
|
51
|
+
"title": "AIChatEventFeedback"
|
|
52
|
+
},
|
|
28
53
|
{
|
|
29
54
|
"description": "Composes an accessible AI prompt field with attachments, feedback, and lifecycle-aware actions.",
|
|
30
55
|
"docsHref": "?path=/docs/ai-kit-aicomposer--docs",
|