A highly-customizable web-based client for Azure Bot Services.
<script
crossorigin="anonymous"
integrity="sha384-Va7pNFHjKGxgI1g9J4tvLCSGEhtfpZzf76PDRDDKkaI+ZZXMCz7FplIZdjUrjkxg"
src="https://cdn.botframework.com/botframework-webchat/4.15.3/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-G/4GhuAj4f+IvvVgyTT1u6m5DjjdPI7hcrfgXmnWKC6uWtZkrI+jDkVk2MmJoclR"
src="https://cdn.botframework.com/botframework-webchat/4.15.3/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-1CAMb60XukTImMnaUTHJvRYbYckPlkzXGVibWExFb5e8WbLsCrfkbQM+K1smVB5a"
src="https://cdn.botframework.com/botframework-webchat/4.15.3/webchat-minimal.js"
></script>
role="toolbar"
and adopted roving tab index
suggestedActionsVisualKeyboardIndicatorColor
, suggestedActionsVisualKeyboardIndicatorStyle
, suggestedActionsVisualKeyboardIndicatorWidth
/dist
, /lib
, and /src
folders
/dist
folder was previously missing from our NPM packagesactivity.channelData.state
property is being deprecated in favor of the updated activity.channelData['webchat:send-status']
property. Main differences include:
state
property to "send failed"
when the chat adapter failed to send the activity, or after passing a timeout as defined in styleOptions.sendTimeout
'webchat:send-status'
property will be set to "send failed"
when the chat adapter fails to send the activity or after passing a hardcoded timeout of 5 minutesDockerfile
to support secure container supply chain, by @compulim in PR #4303
package.json
to allowlist /dist
, /lib
, /src
, by @compulim in PR #4318
useSendStatusByActivityKey
hook to check the UI send status of an outgoing activity, by @compulim in PR #4362
styleOptions.sendTimeout
prop, the send status returned by this hook may transition from "send failed"
to "sending"
, and vice versaactivity.channelData['webchat:send-status']
role="toolbar"
and uses roving tab index for multiple suggested actionaria-keyshortcuts
should use modifier keys according to KeyboardEvent
key values spec, by @compulim, in PR #4323
TextBlock
with style="heading"
should have aria-level
set, by @compulim, in PR #4329
role="button"
instead of role="menubar"
/role="menuitem"
, by @compulim, in PR #4263
groupActivityMiddleware
returning invalid value should not throw exceptions, by @compulim, in PR #4378.<ActivityRow>
01.getting-started/l.sharepoint-web-part
for hosting Web Chat as a SharePoint web part, in PR #4385, by @compulim
<script
crossorigin="anonymous"
integrity="sha384-+K6Bkp3HdwB6IL/MooiD8DGF4zg7iLJbYBq+ReT+PGBXW2skSoRPvF/ArXmbFD+K"
src="https://cdn.botframework.com/botframework-webchat/4.15.2/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-lUORlicC7NzeZQx9OQ8/uCjmblHgyo9cOV4Q4UlnTct4AXwWzNiS5+4w3rCcO/h5"
src="https://cdn.botframework.com/botframework-webchat/4.15.2/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-M00P0dYPmEonRFUbU5QwM2ozxxgVLHHbyoeOwd/x4IDxUhTBSnzbASfa4tk2yYmc"
src="https://cdn.botframework.com/botframework-webchat/4.15.2/webchat-minimal.js"
></script>
type WebChatActivity
is introduced in the botframework-webchat-core
package
type DirectLineActivity
, you may need to move to this new typetype WebChatActivity
type WebChatActivity
is a well-defined type for handling activities inside Web Chattype DirectLineActivity
will be used solely for communicating with type DirectLineJSBotConnection
, a.k.a. botframework-directlinejs
packagecldr-data-downloader
package not working properly on Windows, by @compulim in PR #4223
blob:
to allowed protocol list for file attachment UI (<FileContent>
), by @compulim in PR #4233
activity.channelData['webchat:sequence-id']
and fallback to epoch time of activity.timestamp
, by @compulim, in PR #4203
aria-disabled="true"
), by @compulim in PR #4265
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@emotion/[email protected]
@fluentui/[email protected]
@types/[email protected]
@types/[email protected]
@types/[email protected]
@typescript-eslint/[email protected]
@typescript-eslint/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
<script
crossorigin="anonymous"
integrity="sha384-e2zspajCn8G7DzOMi/9M6fdAPERyN5S11E5QzrAK0HXxMwyw7a6/FHLie73RUzdD"
src="https://cdn.botframework.com/botframework-webchat/4.15.1/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-9o6xJEK8DboSm23+cyRi/6ROyiQFbCXgSN+GkpMXVtIC0QeYRPA9lD8MlXPikyub"
src="https://cdn.botframework.com/botframework-webchat/4.15.1/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-gy9DN+p1zEnZY24LW0HtuFhmhF17qhO8QM0vlrZupIXggEUih+uYAPZ+uGCTT1f7"
src="https://cdn.botframework.com/botframework-webchat/4.15.1/webchat-minimal.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-w3rSEnqXidJWdUi5rzyfT+ge4heH7DfPfZnzwfFPqRx5s/TxTRhFbizmbX6kQe2v"
src="https://cdn.botframework.com/botframework-webchat/4.15.0/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-TtowdQBmshxMHrPmS4fj8c7Y1++TrzO2Z7TvQ1lF9EskDY6cchxo8RO9/JT21JTL"
src="https://cdn.botframework.com/botframework-webchat/4.15.0/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-oQJ4itwTnOHHjD3Gkl9pUfcNMZDSG9LixGJ5H5ib50uBihBhAtWkkFzvOvUK9YPj"
src="https://cdn.botframework.com/botframework-webchat/4.15.0/webchat-minimal.js"
></script>
Map
object polyfill is required for IE11 when using NPM version of Web Chat:
Map
object polyfill is not required when using ES5 bundle of Web Chat from our CDN (webchat-es5.js
)core-js
package, it can be loaded by import 'core-js/features/map'
packages/bundle/src/polyfill.ts
suggestedActionBackground
and suggestedActionXXXBackground
are being deprecated in favor of suggestedActionBackgroundColor
and suggestedActionBackgroundColorOnXXX
respectively, for consistencies when porting to other platformssuggestedActionDisabledXXX
is being renamed to suggestedActionXXXOnDisabled
, for consistencies with other style optionssuggestedActionXXXOnActive
, suggestedActionXXXOnFocus
, suggestedActionXXXOnHover
are introduced for styling per user gesturessuggestedActionKeyboardFocusIndicatorXXX
are introduced for styling the "focus ring" when focused using a keyboard
eslint-plugin-security
, consolidate .eslintrc.yml
at project root, and treat warnings as errors, by @compulim, in PR #4079
suggestedActionXXXOnActive
, suggestedActionXXXOnFocus
, suggestedActionXXXOnHover
, suggestedActionKeyboardFocusIndicatorXXX
suggestedActionDisabledXXX
become suggestedActionXXXOnDisabled
sendBoxButtonXXXOnActive
, sendBoxButtonXXXOnFocus
, sendBoxButtonXXXOnHover
, sendBoxButtonKeyboardFocusIndicatorXXX
role="heading"
to titles of rich card, by @compulim, in PR #4074
StyleOptions.suggestedActionsStackedOverflow
, by @compulim, in PR #4083
box-sizing: border-box
to all descendants under Adaptive Cards, by @compulim, in PR #4084
core/package-lock.json
, removed playground/host
, and added script to rebase URLs in package-lock.json
, by @compulim, in PR #4106
role="feed"
/role="article"
for chat history and its messagesaria-activedescendant
for chat historyuseFocus
and useLocalizer
aria-label
for links in Markdown and skip unrecognized attributes or invalid curly brackets, by @compulim, in PR #4095
RegExp
, by @compulim, in PR #4191
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@types/[email protected]
@types/[email protected]
@typescript-eslint/[email protected]
@typescript-eslint/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
05.custom-components/b.send-typing-indicator
to reply with message
activity, instead of typing
activity, in PR #4063, by @compulim
<script
crossorigin="anonymous"
integrity="sha384-uJWBe8iPb6wN8/AaLQ0UKjgYEtWY9uIVgpkAID5kUNo2sV9hYmFbTDQXeRXyq7bl"
src="https://cdn.botframework.com/botframework-webchat/4.14.1/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-R4Eevwf75H8RQkTqCaFNpvO0V9nq+heLX30jLGKNrAICynjuHUbMo7D2usohGsRu"
src="https://cdn.botframework.com/botframework-webchat/4.14.1/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-Xyp6O3TOCrP+PVhd15I1Ehs8QTga7zqc/KYj6Idr9MbR10/SX5p6pSBhTAvAT/Sd"
src="https://cdn.botframework.com/botframework-webchat/4.14.1/webchat-minimal.js"
></script>
react-scripts
to devDependencies
, in PR #4023
cldr-data
and cldr-data-downloader
, in PR #3998
./src
folderfs.readFileSync()
from require()
when reading JSON filesnode:fs.mkdir()
and removed mkdirp
node:assert
to Jest/dist/
folder from project rooteslint
read-pkg-up
to determines parent package.json
lerna
to run the install
script, we need to relax how cldr-data
read from parent package.json
react
to >= 16.8.6
, in PR #3996
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@emotion/[email protected]
@fluentui/[email protected]
@types/[email protected]
@types/[email protected]
@types/[email protected]
@typescript-eslint/[email protected]
@typescript-eslint/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
<script
crossorigin="anonymous"
integrity="sha384-hXz10Qsp8m3FpR+4hxcQCYezS77mZKSB/k/G62JsQqdgIAn23zLkarnuK+5Qrjz2"
src="https://cdn.botframework.com/botframework-webchat/4.14.0/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-apZcViyYAeDhjrDJ0l1qVdlGkejY0+pIk8wsQBGc8xN1OqbWbDTjRbY2AlvgJMQW"
src="https://cdn.botframework.com/botframework-webchat/4.14.0/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-Zj/ZWIYzMSTk+hREAhqE9Jq2whlhUh3jtWC11HH8w6KMdmAuZtJKmdvzMDLfNqDa"
src="https://cdn.botframework.com/botframework-webchat/4.14.0/webchat-minimal.js"
></script>
scrollToEndButtonBehavior
is introduced to control when the scroll to end button should show (formerly "new messages" button):
styleOptions.hideScrollToEndButton
has been deprecated. To hide the scroll to end button, set styleOptions.scrollToEndButtonBehavior
to false
;styleOptions.newMessageButtonFontSize
has been renamed to styleOptions.scrollToEndButtonFontSize
to better reflect its purpose.localTimestamp
and localTimezone
(if available) to all outgoing activities, by @compulim, in PR #3896
scrollToEndButtonBehavior
to control when the scroll to end button should show, removed hideScrollToEndButton
, and renamed newMessagesButtonFontSize
to scrollToEndButtonFontSize
, by @compulim, in PR #3926.
scrollToEndButtonBehavior
:
"unread"
;"unread"
will show when there are any unread and offscreen messages (default);"any"
will show when there are any offscreen messages;false
will always hide the button.scrollToEndButtonMiddleware
to customize the appearance of the scroll to end button.*.d.ts
) for all public interfaces, by @compulim, in PR #3931 and #3946
AudioContext
when clicking on microphone button, by @compulim, in PR #3974
adaptiveCardHostConfig
to accessible text color-contrasts, by @corinagum in PR #3853
>= 10.14.2
from >= 12.0.0
, by @compulim in PR #3854
husky
, lint-staged
and corresponding precommit
scripts, by @compulim, in PR #3871
role="presentation"
to all decorative <svg>
, by @compulim, in PR #3903
channelData['webchat:fallback-text']
field for screen reader text, before stripping Markdown from activity.text
field, by @compulim, in PR #3917
role="menubar"
) must have at least 1 or more role="menuitem"
, by @compulim, in PR #3950
p-defer
, by @compulim, in PR #3978
@azure/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@fluentui/[email protected]
@types/[email protected]
@types/[email protected]
@typescript-eslint/[email protected]
@typescript-eslint/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
, by @compulim, in PR #3907
<script
crossorigin="anonymous"
integrity="sha384-Xm4uX5+AacO2cl3ffEKrytyC+iHBSsNvXrJTTzodBhgkiuxIS0YWHGq1KFcf0Rr+"
src="https://cdn.botframework.com/botframework-webchat/4.13.0/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-wwdw+KudAKGhnGV4ewfJL1KE1dqx8DgQ6TrY3z4hIHXc1GHjuI/HwoEx4p5VOGx1"
src="https://cdn.botframework.com/botframework-webchat/4.13.0/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-WoHYVO0be3nxbYXAhMO3COEoH9aBH2TGHj/LkphxECLKvlDDsobF2v8LOzeKvGSV"
src="https://cdn.botframework.com/botframework-webchat/4.13.0/webchat-minimal.js"
></script>
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@types/[email protected]
@types/[email protected]
@typescript-eslint/[email protected]
@typescript-eslint/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
<script
crossorigin="anonymous"
integrity="sha384-P85ESDfJwtC9CaJYhEZP2DXz7NfxR3wWdH6OyercA0qvUSUoAHJrU0776yEcnkxs"
src="https://cdn.botframework.com/botframework-webchat/4.12.1/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-YT//LqZJgkEXrmVxm6RZJKs4dSZJQo5kEX0tE9dP1XaOaVsC7NEvwnlP2gW2KWcl"
src="https://cdn.botframework.com/botframework-webchat/4.12.1/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-Bm5FqTqjOwx2JWpJGYW1urz8ypnAJh2BELjekWc1XkYsT1lX7837Tlqxsbmoy/O8"
src="https://cdn.botframework.com/botframework-webchat/4.12.1/webchat-minimal.js"
></script>
adaptiveCardsParserMaxVersion
Web 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')
);
adaptiveCardsParserMaxVersion
style options for selecting the maximum supported version when parsing an Adaptive Cards, by @compulim in PR #3778
<script
crossorigin="anonymous"
integrity="sha384-1hUtvbhn6rdRq7dYBczWVucaQGX53aXutn3sJ3Wj9JQHUTOeOi+ygEM0oS8/YUN1"
src="https://cdn.botframework.com/botframework-webchat/4.12.1/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-Lo8JE8FwwWIxjxRK4348SVwbkib4+HJQfOf6amhb1Lem5aODsMLJAp9WaDrDlGDK"
src="https://cdn.botframework.com/botframework-webchat/4.12.1/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-K1x93oxVf8C0LsVAdO6sISEnUvY3urTM/a5UZjCxoiklvidmkvMN2PGGIaUa341+"
src="https://cdn.botframework.com/botframework-webchat/4.12.1/webchat-minimal.js"
></script>
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.
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 on Web Chat.
flow
layout to suggested actions, by @compulim in PR #3641 and PR #3748
autoScrollSnapOnActivity
to true
to pause auto-scroll after more than one activity is shown, or a number to pause after X number of activitiesautoScrollSnapOnPage
to true
to pause auto-scroll when a page is filled, or a number between 0
and 1
to pause after % of page is filledautoScrollSnapOnActivityOffset
and autoScrollSnapOnPageOffset
to a number (in pixels) to overscroll/underscroll after the pausesendBoxButtonAlignment
for button alignment in multi-line text mode, by @compulim in PR #3668
DIRECT_LINE_SPEECH.md
for instructionscontainerRole
to default style options, by @nfreear in PR #3669
useObserveTranscriptFocus
hook, by @compulim in PR #3755
HOOKS.md
verbiage, by @corinagum in PR #3564
<s>
on sanitize markdown, by @corinagum in PR #3646
aria-labelledby
, by @compulim in PR #3697
ACCESSIBILITY.md
, by @corinagum in PR #3689
webpack.config.js
to use default settings of ['browser', 'module', 'main']
and resolved issues with uuid
package in IE11, by @compulim in PR #3726
aria-pressed
on Adaptive Cards selected buttons, by @amal-khalaf in PR #3710
aria-pressed
and aria-role
is not properly set on Adaptive Cards submit buttons, by @amal-khalaf in PR #3744
12.0.0
, by @compulim in PR #3753
<ErrorBoundary>
to wrap around attachment renderer, by @compulim in PR #3761
role="group"
to the focusable transcript to enable aria-activedescendant
, by @compulim in PR #3765
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@babel/[email protected]
@types/[email protected]
@types/[email protected]
@typescript-eslint/[email protected]
@typescript-eslint/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
window.opener.postMessage
, by @corinagum in PR #3696
CDN release will be published on 2020-11-05.
<script
crossorigin="anonymous"
integrity="sha384-VaCCB1kZvCsUv3mrVO7ND25gqCPmUGP9NMOJEveBa1vsLyQw3i4pdOq03UZtMLE8"
src="https://cdn.botframework.com/botframework-webchat/4.11.0/webchat.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-vkX1C8fopQ2J+lXKsoiEUWsLnvq9bfoS54SzU4P1iM+AafCMLUL9sbC2NY0ktBnL"
src="https://cdn.botframework.com/botframework-webchat/4.11.0/webchat-es5.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-PdctqL/ALsZSOXP2iRI8dVVKzmLMeS+dEnE8tfv/4K0TGnCM17yiMsa0wcC7xELV"
src="https://cdn.botframework.com/botframework-webchat/4.11.0/webchat-minimal.js"
></script>
api
package, to be reused on React Native component, in PR #3543 by @compulim
core
-> api
-> component
(HTML-only) -> bundle
api
package. Some hooks are only available on the existing component
package, due to their platform dependency or coupling with visual components. For example, Web Worker, 2D canvas, useMicrophoneButton*
are not available on the api
packagecomponent
package due to their coupling with visual components or platform features. Some implementations, (e.g. card action middleware and activity grouping middleware) are available on api
package. For example:
component
package due to their coupling with their respective visual componentsimBack
, messageBack
and postBack
actions are available on api
package, but call
, openUrl
and other platform-dependent actions are only available on component
packageactivityMiddleware
, attachmentMiddleware
, etc, now support arrays for multiple middlewarearia-roledescription
is only used on elements with implicit/explicit role based off of WAI ARIA role attributes, by @corinagum in PR #3551, #3583, and #3587
speak
property should be narrated by screen reader, by @compulim in PR #3573 and PR #3584
[email protected]
in PR #3467 by @dependabot