Customise Microsoft web chat

0
votes

I am trying to customize Microsoft web chat with React project:

  • npm install botframework-webchat@master

In the previous version I have customized web UI by forking the master, but at this time I don't want to lose updates in master, here is the reference I have followed Microsoft Bot Webchat.

I am trying to edit user/bot icons with respective images and I don't need upload button shown below

enter image description here

tried to create middleware, and a custom component which extends actual component but no luck, I am not sure it is possible with the latest master. Please guide me how we can do.

1
botframeworkbotsweb-chat

1 Answers

1
votes

Finally got with styling:

import { createStyleSet } from 'botframework-webchat;

const styleSet = createStyleSet({});

styleSet.uploadButton = { ...styleSet.uploadButton,
  display: 'none'
};

styleSet.avatar = {...styleSet.avatar,
  backgroundImage: `url(${imageUrl})`
};

while returning send properties to the component as

botAvatarInitials= ' '
userAvatarInitials= ' '
styleSet={styleSet}`