The integration of the BotFramework web-chat component in the popular micro-frontend framework single-spa can be tricky. This reference implementation is created with:
- The single-spa CLI by generating a React module (Note: pure JS)
- Adoption of the official sample "06.recomposing-ui/a.minimizable-web-chat"
Additionally, some useful styling is provided as template as well as the automatic start of a conversation (welcome message) as soon as the component is loaded and the enrichment of each user input with additional piggyback/backchannel data.
Notes / learnings:
- The current npm package (botframework-webchat v4.13.0) does not properly work in a TypeScript-based application
- It is compatible (without errors and warnings) with React version 16.8.6
- With Webpack 5+ polyfills for
crypto,streamandpathseemed to be required as well as a rather strange plugin registration forprocess(all included inwebpack.config.js)
Deploy your bot service to Azure (no special configurations or prerequists necessary) and enable the Directline channel.
- Adjust the directline secret in
minimizable-web-chat.js(or replace the method with a call to an according backend service) - Run
npm ci - Run
npm run start:standalonefor local testing
The module can be integrated to the single-spa shell as any other module. If Content Security Policy (CSP) is configured in the shell application (meta property in index.html or index.ejs), make sure it allows to access the directline API. The definition may look like:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' https: localhost:*; connect-src https: localhost:* ws://localhost:* ws://realtime-notifications.service.signalr.net ws://*.service.signalr.net wss://directline.botframework.com ; style-src 'unsafe-inline' https:; object-src 'none'; font-src 'self' data:; img-src 'self' data: blob:">