Sample for BotFramework-DirectLineJS with Angular

[MichaelHaydenAtMicrosoft]

Please view our Technical Support Guide before filing a new issue.

Screenshots

Version

To determine what version of Web Chat you are running, open your browser's development tools, and paste the following line of code into the console.

[].map.call(document.head.querySelectorAll('meta[name^="botframework-"]'), function (meta) { return meta.outerHTML; }).join('\n')

If you are using Web Chat outside of a browser, please specify your hosting environment. For example, React Native on iOS, Cordova on Android, SharePoint, PowerApps, etc.

Describe the bug

Customer statement
We have created a bot service with Direct line channel and trying to use BotFramework-DirectLineJS with Angular to create a custom chat client. We did not find any examples/sample for BotFramework-DirectLineJS with Angular and wanted to know if there are any samples that you could share with us.

We tried it but were unsuccessful, so need any samples that we could refer to.

Problem start date and time
Wed, Nov 4, 2020, 12:00 AM {ALPHANUMERICPII}

Steps to reproduce

You are integrating BotFramework DirectLineJs in your Angular Project and for that you need a sample for the DirectLineJs: https://github.com/microsoft/BotFramework-DirectLineJS

Expected behavior

Ensure docs/github have the sample that was located and uploaded to FTP(?) for this BotFramework-DirectLineJS with Angular sample

Additional context

For more information, please see:

Case 120110423001066
IcM - Sample for BotFramework DirectLineJs

Apologies, I am unable to remove the labels that you requested.

[corinagum]

This issue is showing as resolved in the IcM, with comments from @stevkan saying a sample was provided. :)

@stevkan would you be able to link that sample here for future customers? Thanks!

[stevkan]

There is no Angular + DirectLineJS sample, at this point, and it is unlikely one will be created going forward.

However, attached is a sample that demonstrates how to use Direct Line in a pure HTML environment. It should provide enough information on how Direct Line could be set up in an Angular project for building a custom chat interface.

This sample also demonstrates how to handle expiring/refreshing tokens, in case of long-running chat sessions. The current event trigger is a button click in order to manually force the token expiring (for demonstration). This should be adjusted to respond to some hidden event, such as a set amount of time passing since the last activity was received.

html-directline-token-reset.zip