Ai.Actions#

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

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.

Aino

Your card is now blocked.

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 />)

Suggest an edit