Ai.Message#

<Conversation
  scrollBehavior="end"
  style={{
    height: '24rem',
    maxWidth: '23rem',
  }}
>
  <Message from="user">Chatmessage from the user.</Message>
  <Message
    aria-label="Aino"
    avatar={<Avatar size="small" icon={aino} hasLabel />}
  >
    Chatmessage from a bot.
    <br />
    Beep-bop.
  </Message>
  <Message grouped avatar={<Avatar size="small" icon={aino} hasLabel />}>
    <Response>More information from the same bot.</Response>
  </Message>
  <Message from="user">
    Thanks. This longer message wraps before reaching the opposite edge of
    the conversation.
  </Message>
  <Message
    avatar={<Avatar size="small" icon={customer_service} hasLabel />}
  >
    Hello from customer service.
  </Message>
</Conversation>

<Message
  variant="plain"
  name="Solve"
  timestamp="15:24"
  avatar={
    <Avatar variant="secondary" hasLabel>
      S
    </Avatar>
  }
  aiGenerated
>
  <Response>
    {
      'It seems you made **2 transfers** 12.02. Choose the correct one below.'
    }
  </Response>
</Message>

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

<Message from="user">What did I spend on food?</Message>
<Message>
  <Task title="Checking your transactions" status="done" />
  <Response parseIncompleteMarkdown={false}>
    You spent **4 200 kr** on groceries in March.
  </Response>
  <Sources
    sources={[
      {
        url: 'https://www.dnb.no/privat/dagligbank',
        title: 'Everyday banking',
      },
    ]}
  />
</Message>