feat: bot names and avatars

[gavinbarron]

Closes #2947
Closes #3060
Closes #3068

PR Type

• Bugfix
• Feature

Description of the changes

sets up a React Context + Provider model for getting Bot based data via a shared Stateful Client
refactor to create a base class for stateful clients
creates a new component for rendering chat avatars that can handle bots
stop creating two instances of the notification client
remove contenteditable attribute from emjoi html

PR checklist

• Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• Stories have been added and existing stories have been tested
• Added appropriate documentation. Docs PR:

• License header has been added to all new source files (yarn setLicense)
• Contains NO breaking changes

Other information

[plasne]

I have a few comments, but I will test this out this afternoon as well and see if I find anything.

[plasne]

Dunno if you want to do this or not, but in Teams, all bots seem to have a hexagon, not a circle...

[plasne]

None of my 1:1 chats with bots have an icon in the top...

From Teams...

[plasne]

I would like to see the ChatHeader have the bot name when it is a 1:1 chat with a bot like Teams.

[gavinbarron]

Dunno if you want to do this or not, but in Teams, all bots seem to have a hexagon, not a circle...

That's in the nice to have category, tracking this as #3084

[gavinbarron]

I would like to see the ChatHeader have the bot name when it is a 1:1 chat with a bot like Teams.

That makes sense to me, I suspect we'll have to do something here to infer the avatar like exposing a map keyed on the chatId returning a list of Bots on the state emitted by BotInfoClient as I'm not sure that we can rely on the installedApps collection to reflect the Bots that are active in the conversation.

[github-actions]

🚀 New react-contoso sample application deployed here

[gavinbarron]

@plasne and @musale could you please take another look at this.

[github-actions]

Package	Line Rate	Branch Rate	Complexity	Health
mgt-chat.src.statefulClient	100%	100%	0	✔
mgt-chat.src.utils	100%	90%	0	✔
mgt-components.dist.es6.components.mgt-agenda.src.components.mgt-agenda	14%	100%	0	❌
mgt-components.dist.es6.components.mgt-contact.src.components.mgt-contact	62%	100%	0	➖
mgt-components.dist.es6.components.mgt-file-list.mgt-file-upload.src.components.mgt-file-list.mgt-file-upload	43%	100%	0	❌
mgt-components.dist.es6.components.mgt-file-list.src.components.mgt-file-list	62%	100%	0	➖
mgt-components.dist.es6.components.mgt-file.src.components.mgt-file	61%	100%	0	➖
mgt-components.dist.es6.components.mgt-get.src.components.mgt-get	19%	100%	0	❌
mgt-components.dist.es6.components.mgt-login.src.components.mgt-login	64%	100%	0	➖
mgt-components.dist.es6.components.mgt-messages.src.components.mgt-messages	66%	100%	0	➖
mgt-components.dist.es6.components.mgt-organization.src.components.mgt-organization	46%	100%	0	❌
mgt-components.dist.es6.components.mgt-people-picker.src.components.mgt-people-picker	56%	100%	0	➖
mgt-components.dist.es6.components.mgt-people.src.components.mgt-people	72%	100%	0	➖
mgt-components.dist.es6.components.mgt-person-card.src.components.mgt-person-card	59%	33%	0	➖
mgt-components.dist.es6.components.mgt-person.src.components.mgt-person	53%	100%	0	➖
mgt-components.dist.es6.components.mgt-picker.src.components.mgt-picker	78%	100%	0	✔
mgt-components.dist.es6.components.mgt-planner.src.components.mgt-planner	55%	100%	0	➖
mgt-components.dist.es6.components.mgt-profile.src.components.mgt-profile	39%	100%	0	❌
mgt-components.dist.es6.components.mgt-search-box.src.components.mgt-search-box	83%	100%	0	✔
mgt-components.dist.es6.components.mgt-search-results.src.components.mgt-search-results	56%	100%	0	➖
mgt-components.dist.es6.components.mgt-tasks-base.src.components.mgt-tasks-base	86%	100%	0	✔
mgt-components.dist.es6.components.mgt-taxonomy-picker.src.components.mgt-taxonomy-picker	74%	100%	0	➖
mgt-components.dist.es6.components.mgt-teams-channel-picker.src.components.mgt-teams-channel-picker	62%	100%	0	➖
mgt-components.dist.es6.components.mgt-theme-toggle.src.components.mgt-theme-toggle	74%	100%	0	➖
mgt-components.dist.es6.components.mgt-todo.src.components.mgt-todo	78%	100%	0	✔
mgt-components.dist.es6.components.src.components	86%	100%	0	✔
mgt-components.dist.es6.components.sub-components.mgt-arrow-options.src.components.sub-components.mgt-arrow-options	76%	100%	0	✔
mgt-components.dist.es6.components.sub-components.mgt-dot-options.src.components.sub-components.mgt-dot-options	29%	100%	0	❌
mgt-components.dist.es6.components.sub-components.mgt-flyout.src.components.sub-components.mgt-flyout	40%	100%	0	❌
mgt-components.dist.es6.components.sub-components.mgt-spinner.src.components.sub-components.mgt-spinner	92%	100%	0	✔
mgt-components.dist.es6.graph.src.graph	36%	100%	0	❌
mgt-components.dist.es6.src	100%	100%	0	✔
mgt-components.dist.es6.styles.src.styles	73%	100%	0	➖
mgt-components.dist.es6.utils.src.utils	46%	100%	0	❌
mgt-components.src.components	84%	75%	0	✔
mgt-components.src.components.mgt-contact	68%	83%	0	➖
mgt-components.src.components.mgt-file	62%	100%	0	➖
mgt-components.src.components.mgt-file-list	46%	100%	0	❌
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	86%	0	❌
mgt-components.src.components.mgt-get	22%	100%	0	❌
mgt-components.src.components.mgt-messages	68%	100%	0	➖
mgt-components.src.components.mgt-organization	47%	100%	0	❌
mgt-components.src.components.mgt-person	84%	76%	0	✔
mgt-components.src.components.mgt-person-card	67%	48%	0	➖
mgt-components.src.components.mgt-picker	80%	100%	0	✔
mgt-components.src.components.mgt-profile	40%	100%	0	❌
mgt-components.src.components.mgt-tasks-base	87%	100%	0	✔
mgt-components.src.components.mgt-theme-toggle	100%	100%	0	✔
mgt-components.src.components.mgt-todo	79%	100%	0	✔
mgt-components.src.components.sub-components.mgt-flyout	72%	53%	0	➖
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	0	✔
mgt-components.src.graph	40%	73%	0	❌
mgt-components.src.styles	92%	80%	0	✔
mgt-components.src.utils	82%	46%	0	✔
mgt-element.dist.es6.components.src.components	72%	74%	0	➖
mgt-element.dist.es6.mock.src.mock	91%	77%	0	✔
mgt-element.dist.es6.providers.src.providers	87%	83%	0	✔
mgt-element.dist.es6.src	91%	80%	0	✔
mgt-element.dist.es6.utils.src.utils	67%	73%	0	➖
mgt-element.src	93%	40%	0	✔
mgt-element.src.components	78%	100%	0	✔
mgt-element.src.mock	81%	56%	0	✔
mgt-element.src.providers	83%	91%	0	✔
mgt-element.src.utils	71%	90%	0	➖
Summary	60% (27985 / 46508)	71% (556 / 788)	0	➖

[github-actions]

🚀 New react-contoso sample application deployed here

[plasne]

lgtm

[musale]

Looks good to me.