how to use Store in Angular application

[Bradrajkumar]

as per this sample URL :- https://github.com/microsoft/BotFramework-WebChat/tree/main/samples/01.getting-started/f.host-with-angular, i am able to put the webchat on angular application but i am unable use store for few customizations like sending event. please do suggest the code snippet to be used for achieving the same.

[stevkan]

The Microsoft Bot Framework team prefers that how to questions be submitted on Stack Overflow. The official Bot Framework-WebChat Github repo is the preferred platform for information on submitting bug fixes and feature requests.

That being said, I happen to have this code in front of me. I don't know if this aligns with your project, but you can use it as a reference if nothing else. Be aware that I don't know Angular, so there may be some questionable bits in it. For instance, when chatting the conversation grows downward rather than upward requiring you to scroll to keep up with it. I don't know how to fix that in Angular. I know it's CSS-related. But what worked elsewhere wasn't here.

Also, this is built using Angular 7.

I CAN say that the code works when I run it.

I'm closing this as resolved. If you have any additional questions, please post them on Stack Overflow.

bot.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'
import { Router } from '@angular/router'

declare global {
  interface Window {
    WebChat: any
  }
}

window.WebChat = window.WebChat || {}

@Component( {
  selector: 'app-bot',
  templateUrl: './bot.component.html',
  styleUrls: [ './bot.component.css' ]
} )
export class BotComponent implements OnInit {
  @ViewChild( 'botWindow' ) botWindowElement: ElementRef
  public BotChat: any
  public CognitiveServices: any
  async ngOnInit(): Promise<void> {
    this.init()
  }

  async init() {

    const res = await fetch( 'http://localhost:3500/directline/token', { method: 'POST' } )
    const { token } = await res.json()

    const directLine = window.WebChat.createDirectLine( {
      token
    } )

    const styleOptions = {
      bubbleNubOffset: 'center',
      bubbleNubSize: 10,
      bubbleFromUserNubOffset: 'top',
      bubbleFromUserNubSize: 10,
      bubbleFromUserBackground: 'rgba(241,98,54,1)',
      bubbleFromUserTextColor: 'white',
      bubbleMinWidth: 80,
      bubblefontSize: '30px',
      groupTimestamp: true
    }

    const store = window.WebChat.createStore( {}, ( { dispatch } ) => next => action => {
      if ( action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' ) {
        const { activity, activity: { from } } = action.payload

        if ( from.role === 'bot' ) {
          console.log( 'OUTGOING ACTIVITY ', activity )
        }
        if ( from.role === 'user' ) {
          console.log( 'INCOMING ACTIVITY ', activity )
        }

      }
      return next( action )
    } )

    window.WebChat.renderWebChat(
      {
        directLine,
        styleOptions,
        store
      },
      this.botWindowElement.nativeElement
    )
    // this.botWindowElement.nativeElement.querySelector( '.webchat-fluid > *' ).focus()
  }
}

[Bradrajkumar]

Thanks @stevkan,

I will Look into it with the latest build of Angular.