Help needed in button position

[abhinavverma-sf]

Hi, I want to customize deep chat send message form with two icons inside the send message container.. Is it possible? I tried but due to position "inside-left" | "inside-right" | "outside-left" | "outside-right"

only one is being allowed other has to be kept outside of container

[OvidijusParsiunas]

Hi @abhinavverma-sf.

This is indeed possible. Based on your example, all you need to do to get this to work on the default Deep Chat component is the following, please feel free to change the property values to suit your component styling:

Set the submitButtonStyles property to the following:

{ position: 'inside-right' }

Set the speechToText property to the following:

{
  button: {
    position: 'inside-right',
    default: {
      container: {
        default: {
          right: '30px'
        }
      }
    }
  }
}

To limit the text input size due to the new buttons, set the textInput property to the following (use any metric you prefer and you can also used width instead):

{
  styles: {
    text: {
      paddingRight: '3.7em'
    }
  }
}

Hopefully this helps you. Thanks!

[OvidijusParsiunas]

I will be closing this issue as there has been no further activity.