I want to have message arrows on the sides of each message (the user ones are on the right border and the bot bubbles on the left border). I tried implementing something like this, but I cannot get my :after css to work. This is a non working sample, please help me.
const styleSet = createStyleSet({
backgroundColor: 'transparent',
bubbleBackground: 'blue',
bubbleFromUserBackground: 'red',
bubbleBorderRadius: 18,
bubbleFromUserBorderRadius: 18,
bubbleTextColor: 'white',
bubbleFromUserTextColor: 'white',
hideSendBox: false,
hideUploadButton: true,
sendBoxBackground: 'white',
});
//this is my attempt for the bubble arrow from a bot.. still didn't manage to implement it
styleSet.bubble = {
...styleSet.bubble,
'&:not(.from-user):after': {
content: "",
position: 'absolute',
borderStyle: 'solid',
display: 'block',
width: '0',
bottom: 'auto',
borderColor: 'transparent #F6F6F6',
borderWidth: '10px 0px 10px 15px',
right: '-14px',
top: '50%',
}
}
const ChatWrapper: React.SFC<ChatWrapperProps> = (props) => {
return (
<ReactWebChat
activityMiddleware={activityMiddleware}
className="react-web-chat"
directLine={props.directLine}
userID={props.id}
styleSet={styleSet}
sendTimeout={6000}
/>
);
};
I want to have message arrows on the sides of each message (the user ones are on the right border and the bot bubbles on the left border). I tried implementing something like this, but I cannot get my :after css to work. This is a non working sample, please help me.
BTW: got the idea of using styleSet.bubble from here: https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/createStyleSet.js