botframework-webchat
Advanced tools
A highly-customizable web-based chat client for Azure Bot Services.
This repository contains code for the Bot Framework Web Chat component. The Bot Framework Web Chat component is a highly-customizable web-based client for the Bot Framework v4 SDK. The Bot Framework SDK v4 enables developers to model conversation and build sophisticated bot applications.
This repository is part of the Microsoft Bot Framework - a comprehensive framework for building enterprise-grade conversational AI experiences.
Web Chat supports Content Security Policy (CSP). Web developers are recommended to enable CSP to improve security and protect conversations. You can read more about CSP in this article.
This section points out important version notes. For further information, please see the related links and check the
CHANGELOG.md
Notes: web developers are advised to use ~ (tilde range) to select minor versions, which contains new features and/or fixes. Use ^ (caret range) to select major versions, which may contains breaking changes.
In this release, we are focusing on performance improvements, including memory and load time optimizations.
Bots can now livestream their responses. Before Bot Framework SDK support this feature, bot authors can follow the details in this pull request to construct the livestream responses.
Web Chat now exports as ES Modules (named exports) along with CommonJS (named and unnamed exports).
End-user can now add a message and confirm before uploading their file to the bot. To opt-out of the new experience, pass sendAttachmentOn: 'send' in style options.
We are excited to add theme pack support. Developers can now pack all their customization in a single package and publish it to NPM.
We are excited to announce Fluent UI theme pack is in the work and is currently in experimental phase. This theme pack is designed for web developers who want to bring a native Copilot user experience to their customers.
We will continue to add new features and support both white-label experience and Fluent UI experience with the same level of parity.
You can wrap Web Chat with <FluentThemeProvider> to try out the new experience.
import ReactWebChat from 'botframework-webchat';
import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';
export default function MyComponent() {
return (
<FluentThemeProvider>
<ReactWebChat />
</FluentThemeProvider>
);
}
Web Chat will now render HTML-in-Markdown. We have ported our sanitizer and accessibility fixer to work on HTML level. Both Markdown and HTML-in-Markdown will receive the same treatment and meet our security and accessibility requirements.
You can turn off this option by setting styleOptions.markdownRenderHTML to false.
Web Chat now supports Adaptive Cards schema up to 1.6. Some features in Adaptive Cards are in preview or designed to use outside of Bot Framework. Web Chat does not support these features.
Starting from 4.16.0, Internet Explorer is no longer supported. After more than a year of the Internet Explorer 11 officially retirement, we decided to stop supporting Internet Explorer. This will help us to bring new features to Web Chat. 4.15.9 is the last version which supports Internet Explorer in limited fashion.
adaptiveCardsParserMaxVersionWeb Chat 4.12.1 patch includes a new style property allowing developers to choose the max Adaptive Cards schema version. See PR #3778 for code changes.
To specify a different max version, you can adjust the style options, shown below:
window.WebChat.renderWebChat(
{
directLine,
store,
styleOptions: {
adaptiveCardsParserMaxVersion: '1.2'
}
},
document.getElementById('webchat')
);
A new accessibility update has been added to Web Chat from PR #3703. This change creates visual focus for the transcript (bold black border) and aria-activedescendent focused activity (black dashed border) by default. Where applicable, transcriptVisualKeyboardIndicator... values will also be applied to carousel (CarouselFilmStrip.js) children. This is done in order to match current default focus styling for Adaptive Cards, which may be a child of a carousel.
To modify these styles, you can change the following props via styleOptions:
transcriptActivityVisualKeyboardIndicatorColor: DEFAULT_SUBTLE,
transcriptActivityVisualKeyboardIndicatorStyle: 'dashed',
transcriptActivityVisualKeyboardIndicatorWidth: 1,
transcriptVisualKeyboardIndicatorColor: 'Black',
transcriptVisualKeyboardIndicatorStyle: 'solid',
transcriptVisualKeyboardIndicatorWidth: 2,
The above code shows the default values you will see in Web Chat.
The Web Chat API has been refactored into a separate package. To learn more, check out the API refactor summary.
Starting from Web Chat 4.7.0, Direct Line Speech is supported, and it is the preferred way to provide an integrated speech functionality in Web Chat. We are working on closing feature gaps between Direct Line Speech and Web Speech API (includes Cognitive Services and browser-provided speech functionality).
Starting from Web Chat 4.6.0, Web Chat requires React 16.8.6 or up.
Although we recommend that you upgrade your host app at your earliest convenience, we understand that host app may need some time before its React dependencies are updated, especially in regards to huge applications.
If your app is not ready for React 16.8.6 yet, you can follow the hybrid React sample to dual-host React in your app.
There is a breaking change on behavior expectations regarding speech and input hint in Web Chat. Please refer to the section on input hint behavior before 4.5.0 for details.
View migration docs to learn about migrating from Web Chat v3.
First, create a bot using Azure Bot Service. Once the bot is created, you will need to obtain the bot's Web Chat secret in Azure Portal. Then use the secret to generate a token and pass it to your Web Chat.
Web Chat provides UI on top of the Direct Line and Direct Line Speech Channels. There are two ways to connect to your bot through HTTP calls from the client: by sending the Bot secret or generating a token via the secret.
We strongly recommend using the token API instead of providing the app with your secret. To learn more about why, see the authentication documentation on the token API and client security.
For further reading, please see the following links:
Using Web Chat with Azure Bot Services authentication
Web Chat is designed to integrate with your existing website using JavaScript or React. Integrating with JavaScript will give you moderate styling and customizability options.
You can use the full, typical Web Chat package (called full-feature bundle) that contains the most typically used features.
Here is how how you can add Web Chat control to your website:
<!DOCTYPE html>
<html>
<head>
<script
crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'YOUR_DIRECT_LINE_TOKEN'
}),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US'
},
document.getElementById('webchat')
);
</script>
</body>
</html>
userID,username, andlocaleare all optional parameters to pass into therenderWebChatmethod. To learn more about Web Chat props, look at the Web Chat API Reference documentation.
Assigning
userIDas a static value is not recommended since this will cause all users to share state. Please see theAPI userID entryfor more information.
More information on localization can be found in the Localization documentation.
See the working sample of the full Web Chat bundle.
For full customizability, you can use React to recompose components of Web Chat.
To install the production build from NPM, run npm install botframework-webchat. See our version notes on how to select a version.
import React, { useMemo } from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
export default () => {
const directLine = useMemo(() => createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }), []);
return <ReactWebChat directLine={directLine} userID="YOUR_USER_ID" />;
};
You can also run
npm install botframework-webchat@mainto install a development build that is synced with Web Chat's GitHubmainbranch.
See the working sample of Web Chat rendered via React.
Web Chat internally use Redux for state management. Redux DevTools is enabled in the NPM build as an opt-in feature.
This is for glancing into how Web Chat works. This is not an API explorer and is not an endorsement of using the Redux store to programmatically access the UI. The hooks API should be used instead.
To use Redux DevTools, use the createStoreWithDevTools function for creating a Redux DevTools-enabled store.
import React, { useMemo } from 'react';
- import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';
+ import ReactWebChat, { createDirectLine, createStoreWithDevTools } from 'botframework-webchat';
export default () => {
const directLine = useMemo(() => createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }), []);
- const store = useMemo(() => createStore(), []);
+ const store = useMemo(() => createStoreWithDevTools(), []);
return <ReactWebChat directLine={directLine} store={store} userID="YOUR_USER_ID" />;
};
There are some limitations when using the Redux DevTools:
redux-saga. Time-traveling may break the UI.Web Chat is designed to be customizable without forking the source code. The table below outlines what kind of customizations you can achieve when you are importing Web Chat in different ways. This list is not exhaustive.
| CDN bundle | React | |
|---|---|---|
| Change colors | ✔ | ✔ |
| Change sizes | ✔ | ✔ |
| Update/replace CSS styles | ✔ | ✔ |
| Listen to events | ✔ | ✔ |
| Interact with hosting webpage | ✔ | ✔ |
| Custom render activities | ✔ | |
| Custom render attachments | ✔ | |
| Add new UI components | ✔ | |
| Recompose the whole UI | ✔ |
See more about customizing Web Chat to learn more on customization.
Bot Framework has many activity types, but not all are supported in Web Chat. View activity types docs to learn more.
View the complete list of Web Chat samples for more ideas on customizing Web Chat.
View the API documentation for implementing Web Chat.
Web Chat supports the latest 2 versions of modern browsers like Chrome, Microsoft Edge, and FireFox. If you need Web Chat in Internet Explorer 11, please see the ES5 bundle demo.
Please note, however:
babel.View the accessibility documentation.
View the localization documentation for implementing in Web Chat.
View the notification documentation for implementing in Web Chat.
View the telemetry documentation for implementing in Web Chat.
View the Technical Support Guide to get guidance and help on troubleshooting in the Web Chat repo for more information before filing a new issue.
Web Chat supports a wide-range of speech engines for a natural chat experience with a bot. This section outlines the different engines that are supported:
Direct Line Speech is the preferred way to add speech functionality in Web Chat. Please refer to the Direct Line Speech documentation for details.
You can use Cognitive Services Speech Services to add speech functionality to Web Chat. Please refer to the Cognitive Services Speech Services documentation for details.
You can also use any speech engines which support W3C Web Speech API standard. Some browsers support the Speech Recognition API and the Speech Synthesis API. You can mix-and-match different engines - including Cognitive Services Speech Services - to provide best user experience.
Web Chat latest bits are available on the Web Chat daily releases page.
Dailies will be released after 3:00AM Pacific Standard Time when changes have been committed to the main branch.
See our Contributing page for details on how to build the project and our repository guidelines for Pull Requests.
See our CODE OF CONDUCT page for details about the Microsoft Code of Conduct.
View the security documentation to learn more about reporting security issues.
[4.18.0] - 2024-07-10
styleOptions.bubbleImageMaxHeight and styleOptions.bubbleImageMinHeight for variable image height, in PR #5236, by @compulimuseActivityWithRenderer, in PR #5172, by @OEvgenyuseActivityTreeWithRenderer, in PR #5163, by @compulimPrecompiledGlobalize.js is emitted instead of .cjs, by @compulim in PR #5181BasicTranscript, in PR #5183, by @OEvgenyuseActivitiesWithRenderer, in PR #5183, by @OEvgenyuseMemoized, in PR #5190, by @OEvgenyuse-propagate to individual WebChat instances to prevent interference between multiple instances, in PR #5248, by @OEvgeny@fluentui/react-components@9.49.2@types/node@20.12.11@typescript-eslint/eslint-plugin@7.8.0@typescript-eslint/parser@7.8.0adm-zip@0.5.12dotenv@16.4.5esbuild@0.21.1eslint-plugin-import@2.29.1eslint-plugin-prettier@5.1.3eslint-plugin-react-hooks@4.6.2eslint-plugin-react@7.34.1eslint-plugin-security@3.0.0eslint@8.57.0html-webpack-plugin@5.6.0husky@9.0.11jest-image-snapshot@6.4.0lint-staged@15.2.2nodemon@3.1.0nopt@7.2.1p-defer@4.0.1prettier@3.2.5selenium-webdriver@4.20.0serve@14.2.3source-map-loader@5.0.0terser-webpack-plugin@5.3.10tsd@0.31.0type-fest@4.18.2typescript@5.4.5webpack@5.91.0FAQs
A highly-customizable web-based chat client for Azure Bot Services.
The npm package botframework-webchat receives a total of 8,190 weekly downloads. As such, botframework-webchat popularity was classified as popular.
We found that botframework-webchat demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.