Suggestion button for users above the input text

[leluong141996]

Can I create suggestion buttons like in this sample image?

[OvidijusParsiunas]

Hi @leluong141996. This completely depends on your use-case. There is no straight-forward way of doing it, but you can configure the message properties to do this for you. As an example, you can use a custom role for the recommendation messages and give it a custom style via the messageStyles property. Let's use a role called recommendation as an example:

chatElementRef.messageStyles = {
  html: {
    recommendation: {
      outerContainer: {
        position: 'absolute',
        bottom: '60px',
      },
      bubble: {
        backgroundColor: 'unset',
        padding: '0px',
      },
    },
  },
};

Then have an example html message with that role, we'll set it in the initialMessages property:

chatElementRef.initialMessages = [
  {
    html: `
      <div class="deep-chat-temporary-message">
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 5px">What do shrimps eat?</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">Can a shrimp fry rice?</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">What is a pistol shrimp?</button>
      </div>`,
    role: 'recommendation',
  },
];

I am using the Suggestion Buttons example for this.

Once those properties have been applied you should see the chat as follows:

Let me know if you need any further assistance.

Thanks!

[OvidijusParsiunas]

Forgot to mention, if you cannot replicate the example above, you may need to use the deep-chat-dev or deep-chat-dev-react packages version 9.0.155. They work exactly the same as the main components, except they contain new changes which for messageStyles. You may also get a few warnings about incorrect usage of the API as this version contains quite a few new properties, but you can ignore them and use the component as in the example above.

[OvidijusParsiunas]

Hi, I will be closing this issue since there has been no activity on it. Thanks!