Add Conversation Bot To Microsoft Teams Channel And Group Chat

Conversational Bot can do many thing within the MS Teams Client.

Personal Conversation or Personal Chat: It's one to one chat between users and a bot.
Group Conversation or Group Chat: It's between a bot and two or more users.
Teams Channel: It's available to all channel team members.

.Prerequisites and how to create a Microsoft Azure Bot can be followed from my previous article Build Personal 1:1 Conversation Bot with Microsoft Teams

In this article, your conversation bot can subscribe to events and activity related to Channels, Channel members, Group Chat and Message Reaction Events.

Below are conversation bot events and activities,

Channel Conversation Activity
Group Chat Activity
Message Reaction Event

reaction added
reaction removed

Team Member Events

team member added
team member removed

Channel Events

Channel created
Channel Renamed

Channel Deleted
Team Events

team renamed

Step 1 - Create Microsoft Teams App

In this section, we are going to create a Node.js project

Open the Command Prompt and navigate to desired directory to create a project.
Run the Yeomen Generator for Microsoft Teams

yo teams

Yeomen generator will ask the following question

Add Conversation Bot To Microsoft Teams Channel And Group Chat

Step 2 - Add Channel Support to Conversational Bot

Type code in the command prompt. Nodejs scaffolding project opens in Visual Studio Code.

Locate and open the bot file /src/teamsChannelandGroupChatBot/teamsChannelandGroupChat.ts

Add import statement:

import * as Util from "util";
const TextEncoder = Util.TextEncoder;

Add Message Factory object reference to existing botbuilder package:

import {
StatePropertyAccessor,
CardFactory,
TurnContext,
MemoryStorage,
ConversationState,
ActivityTypes,
TeamsActivityHandler,
MessageFactory,
} from 'botbuilder';

Locate the handler onMessage() within the constructor().

Locate and replace the line (text.startsWith("hello")) { in the onMessage() handler with the following code:

if (text.startsWith("mentionme")) {
if (context.activity.conversation.conversationType == "personal") {
await this.handleMessageMentionMeOneOnOne(context);
} else if(context.activity.conversation.conversationType == "groupChat")
{
await this.handleMessageMentionMeGroupChatConversation(context);
}
else {
await this.handleMessageMentionMeChannelConversation(context);
}
return;
} else if (text.startsWith("hello")) {

Finally add the following method.

One on One Conversation:

private async handleMessageMentionMeOneOnOne(context: TurnContext): Promise<void> {
const mention = {
mentioned: context.activity.from,
text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
type: "mention"
};
const replyActivity = MessageFactory.text(`Hi ${mention.text} from a one to one personal chat.`);
replyActivity.entities = [mention];
await context.sendActivity(replyActivity);
}

Teams Channel Conversation:

private async handleMessageMentionMeChannelConversation(context: TurnContext): Promise<void> {
const mention = {
mentioned: context.activity.from,
text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
type: "mention"
};
const replyActivity = MessageFactory.text(`Hi ${mention.text}!`);
replyActivity.entities = [mention];
const followupActivity = MessageFactory.text(`*We are in a channel conversation*`);
await context.sendActivities([replyActivity, followupActivity]);
}

Group Chat Conversation:

private async handleMessageMentionMeGroupChatConversation(context: TurnContext): Promise<void> {
const mention = {
mentioned: context.activity.from,
text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
type: "mention"
};
const replyActivity = MessageFactory.text(`Hi ${mention.text}!`);
replyActivity.entities = [mention];
const followupActivity = MessageFactory.text(`*We are in a Group Chat conversation*`);
await context.sendActivities([replyActivity, followupActivity]);
}

Step 3 - Update Manifest Changes

Browse manifest.json file ./src/maifest/manisfest.json
Update below properties:-
ID : Replace with azure bot id
Version: 1.0.0
PackageName : InteractiveBotBot
Bot Property

"bots": [
{
"botId": "b0edaf1f-0ded-4744-ba2c-113e50376be6",
"needsChannelSelector": true,
"isNotificationOnly": false,
"scopes": [
"team",
"personal",
"groupchat"
],
"commandLists": [
{
"scopes": [
"team",
"personal",
"groupchat"
],
"commands": [
{
"title": "Help",
"description": "Shows help information"
}
]
}
]
}
]

Step 4 - Update Project Environemnt Variable

Locate and open the file. /.env.

Locate the following section in the file, and set the values of the two properties that you obtained when registering the bot:

MICROSOFT_APP_ID=
MICROSOFT_APP_PASSWORD=

Step 5 - Test and Run the Bot

From VSCode select View -> Terminal and Hit the below command

gulp ngrok-serve

Ngrok-serve builds your project and starts runing at local web server. Ngrok starts with a random subdomain and creates a secure url for local web server.

Microsoft Teams require all content to be displayed with HTTPS request. Local debugging requires local HTTP webserver. Ngrok creates a secure routable url to HTTP webserver to debug the HTTPS application securely.

Browse https://Portal.Azure.com
Navigate to created Bot
Select Setting under Bot Management
Update Messaging End Point with Ngrok url
Click save to update.

Step 6 - Upload Manifest File

Navigate to manifest folder /src/manifest. Select both .png files and manifest.jon file and zip all three files. Give the name of zip file "manifest."

Navigate to App Studio
Select Import an existing app
Select the manifest.zip file and Bot name with icon will appear on screen.

Step 7 - Install Cusotm App to Teams Solution

Using the app bar navigation menu,

Select the Mode added apps button.
Select Browse all apps followed by Upload for me or my teams.

Select Add to Teams. It will prompt you to add to a specifc channel. Conversation bot will be added to the selected channel.

User needs to type "@Botname" followed by text which will cause the bot to respond.

As user type defined keyword with @BotName
Bot responds as its invoked into channel conversation context.
User reacts to reponse
Chanel conversation bot again reacts with selected reactions.

If user selects Add to Chat, it will prompt to add to Group Chat. Conversation bot will be added to selected Group Chat.

User needs to type "@Botname" followed by text which will invoke the bot to respond,

As user types defined keyword with @BotName
Bot respond as its invoked into Group conversation context.
User reacts to response
Group conversation bot again reacts with selected reactions.

Code base exists at this location.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.