Add message bubble arrows CSS

[ljubomirsinadinovski]

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}
      />
  );
};

BTW: got the idea of using styleSet.bubble from here: https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/createStyleSet.js

[compulim]

We should have a few different samples or styleSet for arrows/nubs. Anyone have a chance to capture some message bubble screenshots here?

• Center-aligned to the first line of text (Skype)
• Extends on the top left (like WhatsApp desktop app)
• Extends on the bottom left (like iMessage)

Also need to consider how to let the developer easily add the nub to the bubble, and no matter how crazy the nub design is, i.e. including animated GIF @ 3x.

[stevkan]

Attempted to add arrows/nubs to the bubbles. Ran into several issues:

• When using pseudo-elements, "content" must be specified in the .css. Unlike elsewhere, in React, "content" cannot take an empty ("") value otherwise it will not display. It must either have an empty string (" "), at a minimum.
• Even though the pseudo-elements (:before and :after) are appended to the bubble, either thru the "bubble" class or thru the "from-user" / ":not('from-user')" class assignments, the pseudo-element renders as part of the chat window. The result is the rendered arrow/nub is always on the chat screen while the dialog moves around it.

@compulim, per our discussion, needs to consider how to implement given the underlying code.

[Ellbroach]

I also have had issues trying to get a bubble arrow. Within the bot framework 'test in web chat' section of the site, the arrow is present, and is achieved through an SVG image on message.
Thank you, it would be great to have this solved.

[mathurvarun84]

I am having a similar problem. Any idea how to resolve it.

[mathurvarun84]

I also have had issues trying to get a bubble arrow. Within the bot framework 'test in web chat' section of the site, the arrow is present, and is achieved through an SVG image on message.
Thank you, it would be great to have this solved.

Could you please share the link of the section you used to resolve your issue

[saurav2107]

@compulim I still have this issue, is it fixed?

[corinagum]

This feature was implemented in #2137 and will be available in our next release in November. If you need these changes immediately, please see our documentation on pointing to our MyGet feed for latest bits.