Angular 6 Chatbot Client

Azure Bot Service can be integrated across multiple channels to increase interactions and reach more customers using your website or app to email, GroupMe, Facebook Messenger, Kik, Skype, Slack, Microsoft Teams, Telegram, text/SMS, Twilio, Cortana, and Skype for Business. Another way for users to interact with your bot is through your own custom built client. In this post, we will see how to setup an Angular client and connect it to your Azure deployed Bot.

User Model and Service

The User Service is pretty basic. It exposes a currentUser stream which any part of our application can subscribe to and know who the current user is.rnu003cpreu003eu003ccodeu003eexport class UsersService {rn currentUser: Subjectu0026lt;Useru0026gt; = new BehaviorSubjectu0026lt;Useru0026gt;(null);rnrn public setCurrentUser(newUser: User): void {rn this.currentUser.next(newUser);rn }rn}rnu003c/codeu003eu003c/preu003ernThe user model that goes with this, is also pretty basic:rnu003cpreu003eu003ccodeu003eexport class User {rn id: string;rnrn constructor(public name: string, public avatarSrc: string) {rn this.id = uuid();rn }rn}u003c/codeu003eu003c/preu003e

Thread Model and Service

Threads play an important role in our app as they are responsible for “threading” the message streams. In this case we only have one bot and thus one thread, but if we extend the scenario we could support multiple bots/ threads.rnu003cpreu003eu003ccodeu003eexport class ThreadsService {rn threads: Observableu0026lt;{ [key: string]: Thread }u0026gt;;rn currentThread: Subjectu0026lt;Threadu0026gt; = new BehaviorSubjectu0026lt;Threadu0026gt;(new Thread());rn currentThreadMessages: Observableu0026lt;Message[]u0026gt;;rnrn constructor(public messagesService: MessagesService) {rn this.threads = messagesService.messages.pipe(rn map((messages: Message[]) =u0026gt; {rn const threads: { [key: string]: Thread } = {};rn // Store the message’s thread in our accumulator threadsrn messages.map((message: Message) =u0026gt; {rn // code omittedrn // see sample app on GitHubrn return threads;rn })rn );rnrn this.currentThreadMessages = combineLatest(rn this.currentThread,rn messagesService.messages,rn (currentThread: Thread, messages: Message[]) =u0026gt; {rn // code omittedrn // see sample app on GitHubrn }rn );rn }rnrn setCurrentThread(newThread: Thread): void {rn this.currentThread.next(newThread);rn }rn}rnu003c/codeu003eu003c/preu003ernThis is RxJS in full action and you can see we expose some important streams: currentThread: Subject stream (read/write) that holds the select stream. currentThreadMessages: an Observable stream that contains our future messages. The model is straight forward:rnu003cpreu003eu003ccodeu003eexport class Thread {rn id: string;rn lastMessage: Message;rn name: string;rn avatarSrc: string;rnrn constructor(id?: string, name?: string, avatarSrc?: string) {rn this.id = id || uuid();rn this.name = name;rn this.avatarSrc = avatarSrc;rn }rn}u003c/codeu003eu003c/preu003e