How to differentiate bot id and user id in react web chat plain UI

Question

I'm trying to customize my Bot using Plain web chat UI by Microsoft Bot. Sample Link
I'm new to Reach and Web Chat. I would like to know how do we differentiate the conversation. Whether its from Bot or its from User. Because both are returning same activity.id.

I added this code for testing.
content={activity.text + ' Testing ' + activity.id}

Here is the full code snippet

{activities
          // Currently, this sample only displays an activity of type "message"
          .filter(({ type }) => type === 'message')
          // We need to hide "postBack" message sent by the user
          .filter(({ channelData: { postBack } = {}, from: { role } }) => !(role === 'user' && postBack))
          // Normalize the activity:
          // - Every activity should have an "attachments" array, consisting of zero or more attachments:
          // - If this is a "messageBack" message, we should use the "displayText",
          //   because "text" is being submitted to bot, and "displayText" is what we use to override what the bot displays to the user.
          .map(activity => ({
            ...activity,
            attachments: activity.attachments || [],
            text: getValueOrUndefined(activity, 'channelData', 'messageBack', 'displayText') || activity.text
          }))
          // Filter out all empty messages (no attachments or text)
          .filter(({ attachments, text }) => attachments.length || text)
          .map((activity, index) => (
            <React.Fragment key={activity.id || index}>
              <li className="Sender">
                {!!activity.text && (
                  // We are using the very same component for text message and attachments.
                  // This is because, attachments can also have "text/markdown" or "text/plain" content.
                  // In this case, we prefer to have a single component for both of them.
                  <Attachment
                    content={activity.text + ' Testing ' + activity.id}
                    contentType={activity.textFormat === 'markdown' ? 'text/markdown' : 'text/plain'}
                  />
                )}
                {!!activity.attachments.length && (
                  <ul>
                    {activity.attachments.map((attachment, index) => (
                      <li key={index} className="Send">
                        <Attachment {...attachment} />
                      </li>
                    ))}
                  </ul>
                )}
              </li>
            </React.Fragment>
          ))}

Kindly let me know how do I get this fixed.

Answer 1

Any activity that is sent from a user will have the from => role properties with a value of user. If not from the user, then role value is removed with the from => name value containing the name of your bot.

Keep in mind, either of these values could be overwritten depending on the channel you are using (i.e. FB, Slack, Web Chat, etc.). This isn't usually the case as most meta data is appended to the channelData property, but something to be aware to.

For reference, you can view all the possible properties of an activity here, as they pertain to BotFramework.

Hope of help