Botframework-webchat: Sample: Host Web Chat with Angular5

[corinagum]

@omarsourour, let's coordinate to make sure we are on the same page for how to implement this sample.

[corinagum]

Based off email discussion, it looks like this sample would be great as an addition to the currently available samples, hosted and with a live bot for testing. I made a placeholder for it called 03.b.host-with-Angular5

Notes from @compulim:
We want the samples to be as simple as possible. For example, in some of our React demos, we are inlining Babel + React via <script> tag, instead of building a full-blown [app] using create-react-app.

• We prefer more readability, "quick-into-code", than spending time finding the right file to look at
  
  
  
  • Measurement: under a sample project root, can the user find the right file to look at under 10 seconds?
  
  
• Even though the code may need heavy modifications in production environment, I think it is fine, because samples are of POC quality, not production quality
• Can the user copy-and-paste our code snippets into their production environment?
  
  
  
  • If the user cannot copy the portion without code reviewing them, we will tell them what things that need to consider
    
    
    
    
    
    • For example, in one of our work-in-progress sample called "Direct Line token server", we have a section in README.md talks about what are the top security concerns if they want to make this code production ready
    
    
    
  
  

@omarsourour Does having the sample hosted with the other samples work with you?

[omarsourour]

Hey Corina!

Yes it does. Please make sure that this being for Angular 5 (and probably down to Angular 2) is highlighted. Angular 6 uses RxJS 6, which breaks with this WebChat sample unless other considerations are taken into place.

If you require a sample for Angular 6, I can also work on providing that 😊

Thanks!
Omar Sourour

[edited by @corinagum to remove email headers]

[corinagum]

Thanks Omar! The goal is to have this sample available for 4.3.
@compulim What do you think about asking for an Angular 6 sample? :)

[Dongata]

Any updates?

[corinagum]

Hey @omarsourour, just wondering if you have updates on this sample. :)

[Edit] Hey @Dongata, I had an offline conversation with omarsourour and it looks like he is in the process of making this sample. :) Please keep an eye out!

[corinagum]

@omarsourour @compulim
After offline discussion today, we agreed that Web Chat will need a patch for npm mime because Angular CLI needs a JSON loader to resolve the package names. Patch should be innocuous. Tracking is available here: #1596

We need to discuss with @cwhitten if this patch would be included in a 4.2.1 release or 4.3. Depending on our decision, this may affect the availability of this sample.

[corinagum]

@Dongata, thanks for your patience on this issue. #1596 will be resolved in 4.3, and the sample will come hopefully fairly quickly after that. Sorry for the delay!

[Dongata]

@corinagum Thank you for your help. I can wait right now, we have sorted some things with the cdn version, and even if it's not a production ready thing, it's a good enough for a simple demo.

[omarsourour]

I updated the Angular WebChat Example repo here. However it is dependent on the next release of WebChat that would contain the fix in #1686.

@corinagum Please confirm if anything else is needed. If not, please go ahead and close this issue.

[corinagum]

@omarsourour we'd love it if you can do a PR of the Sample into the Web Chat repo! Could you file it under samples/03.hosting-with-angular ? It would be great if you are able to provide a README.md follows the format of our other samples.

[omarsourour]

Sure thing @corinagum, will do. Do you want that out when the mime code fix is merged?

[corinagum]

That would be great! :) Thanks so much for the help @omarsourour

[bhavya-dhingra]

Hey Corina! Yes it does. Please make sure that this being for Angular 5 (and probably down to Angular 2) is highlighted. Angular 6 uses RxJS 6, which breaks with this WebChat sample unless other considerations are taken into place. If you require a sample for Angular 6, I can also work on providing that 😊 Thanks! Omar Sourour [edited by @corinagum to remove email headers]

This is done? Can i refer a sample?

[corinagum]

Hey @bhavya-dhingra, sorry this is not available yet. We had complications a few weeks ago omarsourour and I need to re-sync.

@omarsourour, the mime code fix is merged in and available in /master/ bits. It won't be available in latest bits until the end of the month because of the push on 4.3 release. You can also use our latest master build via npm: 4.2.1-master.db34ce4. Do you think this good for you to work on the sample? If so, please feel free to make a PR to the samples directory at your convenience. If you have any questions please let me know on here or on Teams. :)

[bhavya-dhingra]

Hey @bhavya-dhingra, sorry this is not available yet. We had complications a few weeks ago omarsourour and I need to re-sync.

@omarsourour, the mime code fix is merged in and available in /master/ bits. It won't be available in latest bits until the end of the month because of the push on 4.3 release. You can also use our latest master build via npm: 4.2.1-master.db34ce4. Do you think this good for you to work on the sample? If so, please feel free to make a PR to the samples directory at your convenience. If you have any questions please let me know on here or on Teams. :)

Hey @corinagum , thanks for the update. Can we expect this anytime soon? Since I have a angular 6 application in which chatbot has to be integrated.

[corinagum]

@bhavya-dhingra unfortunately I can't give you any timelines since this is a sample omarsourour is working on, but this is the tracking issue so please keep on eye out here! :)

[omarsourour]

@bhavya-dhingra I will have this ready by tomorrow, and sync with @corinagum. If all goes well, it should be ready by this Wednesday.

@bhavya-dhingra In the meantime, please check this repository. It has a working sample of web chat ported onto an Angular 5 application.

[iammelvin]

I was waiting for this but I completed this is in angular(Ionic) with directlinejs API and custom UI.But would love to see a sample of web chat in angular.

[bhavya-dhingra]

@bhavya-dhingra I will have this ready by tomorrow, and sync with @corinagum. If all goes well, it should be ready by this Wednesday.

@bhavya-dhingra In the meantime, please check this repository. It has a working sample of web chat ported onto an Angular 5 application.

Thanks @omarsourour. Please let me know once angular-6 sample can be referred :)

[Dongata]

Will it work on ionic 4?

[iammelvin]

Will it work on ionic 4?

Yes but you will have to have your custom UI ready and use the directline API to send http request for posting/polling activities.