[RFC] `Chat.Item` `grouped` prop for describing groups of chat items

[bmdalex]

[RFC] Chat.Item grouped prop for describing groups of chat items

Legend:

• batch: group of consecutive messages from the same participant

Problem description

What?

We need a way to describe either:

• batches of chat messages;
• or chat messages that are not the first in a batch.

Why?

There are scenarios where there needs to be a clear visual indication that differentiates messages within a batch:

• redundant subcomponents;
• different styling (fitted consecutive messages).

Current:

Expected:

Proposed solutions

1. Introduce grouped prop on Chat.Item component to suggest they are part of a batch:

API:

<Chat>
  <Chat.Item
    grouped
    gutter={...}
    content={(
      <Chat.Message
        content="Hi"
        author="Jane Doe"
        timestamp="Yesterday, 10:15 PM"
      />
    )}
  />
  <Chat.Item
    gutter={...}
    content={<Chat.Message content="How are you todau?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />}
  />
  <Chat.Item
    gutter={...}
    content={<Chat.Message content="*today" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />}
  />
</Chat>

2. Introduce the notion of Chat.Message.Group for a group of consecutive messages from one participant:

API:

<Chat>
  <Chat.Item
    gutter={...}
    content={(
      // Their group
      <Chat.Message.Group>
        <Chat.Message content="Hi" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
        <Chat.Message content="How are you today?" author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
        <Chat.Message content="Good, and you?" mine author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
      </Chat.Message.Group>
    )}
  />
  <Chat.Item
    gutter={...}
    content={(
      // My group
      <Chat.Message.Group>
        <Chat.Message content="Good, and you?" mine author="Jane Doe" timestamp="Yesterday, 10:15 PM" />
      </Chat.Message.Group>
    )}
  />
</Chat>

3. Try to achieve the visual differences with current capabilities (might not cover all scenarios):

• we will just not add gutter, author and timestamp subcomponents
• we will remove extra margins between messages and replace them with invisible Divider components that we'd add manually between batches

[bmdalex]

we will go with solution 1 as discussed

[levithomason]

Our reasoning was:

• Not consecutive as it doesn't make sense to the first element in the list, which also needs to be styled.
• Not Chat.Group as this breaks the pattern we have of groups being top level containers that hold several children. In this case, it would hold several Chat.Messages, not Chats. It would also require parsing and styling children or removing children and using only shorthand for the chat messages. This is not a feasible option.
• Not secondary as this term is already defined in other components and has a different meaning.
• Not a top-level prop on Chat for defining the interval by which consecutive message timestamps should be grouped. This would also require parsing the timestamp prop for each child and it would require it to be a date object or some other parsable value.

This process left us with needing a prop with a general meaning that could apply to the first component as well as the components that followed. The term should not dictate the style but it should be an imprecise natural language term.

The answer is grouped.

[mnajdova]

I have a question around handling the grouped prop. There is difference whether the grouped prop is on consecutive message of the same author or not (we may argue that we may have also two consecutive grouped messages, and then again two consecutive grouped messages from the same author, but these four messages will represent two groups, as they were sent in different times). Having just the grouped prop on a message is not enough for defining where one group ends and the next one starts. Thus, maybe we should reconsider using this prop only on the messages following the first one.
One example that may be confusing:

[{
  grouped: true,
  message: {content: 'Hello!', author: 'John Doe' },
}, {
  grouped: true,
  message: {content: 'How are you?', author: 'John Doe' },
}, {
  grouped: true,
  message: {content: 'Fine, thanks!', author: 'Me' },
}, {
  grouped: true,
  message: {content: 'And you?', author: 'Me' },
}]

The intention of the user here, probably will be to have two groups of messages, one for the messages from John Doe, and one for mine messages. We may have similar confusion if all messages are from the same user, and we have two different groups because of the difference of the time of the messages.
Any thoughts on this?