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:
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:
crypto, stream and path seemed to be required as well as a rather strange plugin registration for process (all included in webpack.config.js)Deploy your bot service to Azure (no special configurations or prerequists necessary) and enable the Directline channel.
minimizable-web-chat.js (or replace the method with a call to an according backend service)npm cinpm run start:standalone for local testingThe 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:">