@payfit/unity-components
Version:
63 lines (62 loc) • 2.91 kB
TypeScript
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 {};