Ai.Actions#

Experimental: The AI extension and its component APIs may change in the future. Please give us feedback on your experience with them.

Import#

import { Action, Actions } from '@dnb/eufemia/extensions/ai'
import '@dnb/eufemia/extensions/ai/style'
render(
  <Actions>
    <Action icon="thumbs_up" label="Good answer" />
  </Actions>
)

Description#

Ai.Actions with Ai.Action shows icon buttons below a message, like copy, feedback or regenerate. Give them to the actions property of Ai.Message. Each Ai.Action is a small tertiary Button with a default-size icon and an expanded touch area. Its label is used for the tooltip and for screen readers. Actions have 0.375rem spacing, and unselected icons use the theme's neutral alternative color.

For feedback, control selected from your application. It applies Button's selected styling and exposes aria-pressed as true or false. Keep the label unchanged when selection changes. Store one choice per answer, so positive and negative feedback cannot both be selected, and allow the selected action to clear the choice. Omit selected for ordinary commands such as regenerate. An explicit aria-pressed is still forwarded if your application needs to control it separately.

The application owns feedback storage, requests and errors. Selection alone does not confirm that feedback reached a server. Use disabled while saving if users should not change the choice, and show a useful error if saving fails. The message actions demo demonstrates selection locally.

For copying a response, place CopyOnClick.Button inside Ai.Actions. Pass size="small", iconSize="default" and bounding to match the other actions. Set the text as copyContent, and provide a descriptive title and tooltip, such as "Copy answer". It handles the clipboard and announces a confirmation only after a successful copy. The message actions demo shows this composition.

Demos#

Message actions#

Copy the answer, select positive or negative feedback, switch the selection, or press the selected action again to clear it. The feedback state is local to this demo. Each action has a tooltip and supports keyboard activation.

const Feedback = () => {
  const [feedback, setFeedback] = useState<'positive' | 'negative' | null>(
    null
  )
  return (
    <Message
      name="Aino"
      actions={
        <Actions role="group" aria-label="Answer feedback">
          <CopyOnClick.Button
            size="small"
            iconSize="default"
            bounding
            copyContent="Your card is now blocked."
            title="Copy answer"
            tooltip="Copy answer"
          />
          <Action
            icon={thumbs_up}
            label="Good answer"
            selected={feedback === 'positive'}
            onClick={() =>
              setFeedback(feedback === 'positive' ? null : 'positive')
            }
          />
          <Action
            icon={thumbs_down}
            label="Bad answer"
            selected={feedback === 'negative'}
            onClick={() =>
              setFeedback(feedback === 'negative' ? null : 'negative')
            }
          />
        </Actions>
      }
    >
      Your card is now blocked.
    </Message>
  )
}
render(<Feedback />)