@payfit/unity-components
Version:
86 lines (85 loc) • 2.64 kB
JavaScript
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 };