Missing header and footer in message when direction class is applied

[supersnager]

chatscope/chat-ui-kit-react#11

[supersnager]

It's not really a bug, it's a feature. Yeah, I always wanted to say that ;)

Sender and sent time in Message.Header and Message.Footer visibility can be changed by scss variables:
$show-message-incoming-sender-name, $show-message-outgoing-sender-name and so on:

chat-ui-kit-styles/themes/default/_variables.scss

Line 382 in d436eb1

// Boolean flags

This is because when messages are not grouped by using <MessageGroup />, you still can control how it looks like.
So one can make a fake message group by setting the "model.position" property in Messages component.
This property is changing the shape of the message, so it's possible to layout messages as if they were in a group.
See here for examples of various message positions:
https://chatscope.io/storybook/react/?path=/story/components-message--single-incoming
https://chatscope.io/storybook/react/?path=/story/components-message--first-incoming-with-avatar
https://chatscope.io/storybook/react/?path=/story/components-message--last-incoming

The default scss variables are set to show the sender and sent time in Message.Header in messages with position "single" and "first".

If you want to show Header and/or footer you have five(!) options:

1. Override theme variables and build your own theme.
   There is no tutorial about theming now (it will be Document the creation of themes chat-ui-kit-react#16 ), but it's basicaly the same approach like in Bootstrap theming https://getbootstrap.com/docs/4.0/getting-started/theming/.
2. Set position property in message model
3. Add custom content to <Message.Header/> / <Message.Footer/>:

  <Message model={ { message: "Hey there" , sentTime: "just now", sender: "Joe"} } >
    <Message.Header>
      Custom header content
    </Message.Header>
    <Message.Footer>
      Custom footer content
    </Message.Footer>
  </Message>

4. Use message group and add header and footer to group
   https://chatscope.io/storybook/react/?path=/docs/components-messagegroup--incoming-with-header
5. Override css manually:

.cs-message__sender-name,
.cs-message__sent-time {
  display:block !important;
}

The 3th and 4th approach is recommended.

After all, I know that it's quite complicated, hard to maintain both in the code of the application and in library itself.
The goal is to make it as simple and friendly as it can be :)
In chat application code it's easier to manage message groups than individual messages with positions.
Therefore position property and css flags will probably be removed in the next major release.

Hope this explanation helps a little :)