Button interaction on AI UI kit

[tonge495]

Hi Paste team,

Our team has been using the AI UI kit for the AI chat message card for thumbs up/down feedback.

We noticed that there were some discrepancies on the active state for the buttons on Figma vs the Paste site example and what is rendered by default on the front end.

Figma component

Paste site example

Front end

Which one should we be using? Can you please advise?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Discrepancies around attachments on chat composer component in Figma vs live version (updated: 06/18/2024, similarity score: 89%)
• Using Paste for customer-facing demo app (updated: 08/11/2023, similarity score: 87%)
• Adopt Paste component in MC product (updated: 05/30/2023, similarity score: 87%)

[dosubot[bot]]

The active state for the thumbs up/down feedback buttons should be based on the front end rendering as shown in the FullAIMessage component. This component uses the pressed attribute to indicate the active state of the buttons.

<Button
  variant="secondary_icon"
  aria-label="this is a helpful response"
  size="reset"
  pressed={liked}
  onClick={() => {
    setLiked(!liked);
    setDisliked(false);
  }}
>
  <ThumbsUpIcon decorative={false} title="like result" />
</Button>
<Button
  variant="secondary_icon"
  aria-label="this is not a helpful response"
  size="reset"
  pressed={disliked}
  onClick={() => {
    setDisliked(!disliked);
    setLiked(false);
  }}
>
  <ThumbsDownIcon decorative={disliked} title="dislike result" />
</Button>

Additionally, the ExampleAIChatLog and ExampleFullScreenAIChatLog components from the Paste design system also use a similar approach for the thumbs up/down feedback buttons, ensuring consistency across the UI ^[1][2].

To continue talking to Dosu, mention @dosu.