Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@vefacaglar/botframework-webchat

Microsoft19MIT4.5.3TypeScript support: included

A highly-customizable web-based chat client for Azure Bot Services.

readme

Bot Framework Web Chat

Click here to find out what's new for //build2019!

Bot Framework Web Chat

npm version Build Status Coverage Status

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 enable developers to model conversation and build sophisticated bot applications.

This repo is part of the Microsoft Bot Framework - a comprehensive framework for building enterprise-grade conversational AI experiences.

Migrating from Web Chat v3 to v4

There are three possible paths that migration might take when migrating from v3 to v4. First, please compare your beginning scenario:

My current website integrates Web Chat using an <iframe> element obtained from Azure Bot Services. I want to upgrade to v4.

Starting from May 2019, we are rolling out v4 to websites that integrate Web Chat using <iframe> element. Please refer to the embed documentation for information on integrating Web Chat using <iframe>.

My website is integrated with Web Chat v3 and uses customization options provided by Web Chat, no customization at all, or very little of my own customization that was not available with Web Chat.

Please follow the implementation of sample 01.c.getting-started-migration to convert your webpage from v3 to v4 of Web Chat.

My website is integrated with a fork of Web Chat v3. I have implemented a lot of customization in my version of Web Chat, and I am concerned v4 is not compatible with my needs.

One of our team's favorite things about v4 of Web Chat is the ability to add customization without the need to fork Web Chat. Although this creates additional overhead for v3 users who forked Web Chat previously, we will do our best to support customers making the bump. Please use the following suggestions:

  • Take a look at the implementation of sample 01.c.getting-started-migration. This is a great starting place to get Web Chat up and running.
  • Next, please go through the samples list to compare your customization requirements to what Web Chat has already provided support for. These samples are made up of commonly asked-for features for Web Chat.
  • If one or more of your features is not available in the samples, please look through our open and closed issues, Samples label, and the Migration Support label to search for sample requests and/or customization support for a feature you are looking for. Adding your comment to open issues will help the team prioritize requests that are in high demand, and we encourage participation in our community.
  • If you did not find your feature in the list of open requests, please feel free to file your own request. Just like the item above, other customers adding comments to your open issue will help us prioritize which features are most commonly needed across Web Chat users.
  • Finally, if you need your feature as soon as possible, we welcome pull requests to Web Chat. If you have the coding experience to implement the feature yourself, we would very much appreciate the additional support! Creating the feature yourself will mean that it is available for your use on Web Chat more quickly, and that other customers looking for the same or similar feature may utilize your contribution.
  • Make sure to check out the rest of this README to learn more about v4.

How to use

For previous versions of Web Chat (v3), visit the Web Chat v3 branch.

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.

Here is how how you can add Web Chat control to your website:

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               botAvatarInitials: 'WC',
               userAvatarInitials: 'WW'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

userID, username, locale, botAvatarInitials, and userAvatarInitials are all optional parameters to pass into the renderWebChat method. To learn more about Web Chat props, look at the Web Chat API Reference section of this README. Screenshot of Web Chat

Integrate with JavaScript

Web Chat is designed to integrate with your existing website using JavaScript or React. Integrating with JavaScript will give you moderate styling and customizability.

You can use the full, typical webchat package that contains the most typically used features.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

See the working sample of the full Web Chat bundle.

Integrate with React

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.

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

You can also run npm install botframework-webchat@master to install a development build that is synced with Web Chat's GitHub master branch.

See a working sample of Web Chat rendered via React.

Customize Web Chat 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.

Samples list

               Sample Name                     Description Link
01.a.getting-started-full-bundle Introduces Web Chat embed from a CDN, and demonstrates a simple, full-featured Web Chat. This includes Adaptive Cards, Cognitive Services, and Markdown-It dependencies. Full Bundle Demo
01.b.getting-started-es5-bundle Introduces full-featured Web Chat embed with backwards compatibility for ES5 browsers using Web Chat's ES5 ponyfill. ES5 Bundle Demo
01.c.getting-started-migration Demonstrates how to migrate from your Web Chat v3 bot to v4. Migration Demo
02.a.getting-started-minimal-bundle Introduces the minimized CDN with only basic dependencies. This does NOT include Adaptive Cards, Cognitive Services dependencies, or Markdown-It dependencies. Minimal Bundle Demo
02.b.getting-started-minimal-markdown Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle. Minimal with Markdown Demo
03.a.host-with-react Demonstrates how to create a React component that hosts the full-featured Web Chat. Host with React Demo
03.b.host-with-Angular Demonstrates how to create an Angular component that hosts the full-featured Web Chat. Host with Angular Demo
04.a.display-user-bot-initials-styling Demonstrates how to display initials for both Web Chat participants. Bot initials Demo
04.b.display-user-bot-images-styling Demonstrates how to display images and initials for both Web Chat participants. User images Demo
05.a.branding-webchat-styling Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates. Branding Web Chat Demo
05.b.idiosyncratic-manual-styling Demonstrates how to make manual style changes, and is a more complicated and time-consuming way to customize styling of Web Chat. Manual styles may be broken upon Web Chat updates. Idiosyncratic Styling Demo
05.c.presentation-mode-styling Demonstrates how to set up Presentation Mode, which displays chat history but does not show the send box, and disables the interactivity of Adaptive Cards. Presentation Mode Demo
05.d.hide-upload-button-styling Demonstrates how to hide file upload button via styling. Hide Upload Button Demo
06.a.cognitive-services-bing-speech-js Introduces speech-to-text and text-to-speech ability using the (deprecated) Cognitive Services Bing Speech API and JavaScript. Bing Speech with JS Demo
06.b.cognitive-services-bing-speech-react Introduces speech-to-text and text-to-speech ability using the (deprecated) Cognitive Services Bing Speech API and React. Bing Speech with React Demo
06.c.cognitive-services-speech-services-js Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API. Speech Services with JS Demo
06.d.speech-web-browser Demonstrates how to implement text-to-speech using Web Chat's browser-based Web Speech API. (link to W3C standard in the sample) Web Speech API Demo
06.e.cognitive-services-speech-services-with-lexical-result Demonstrates how to use lexical result from Cognitive Services Speech Services API. Lexical Result Demo
06.f.hybrid-speech Demonstrates how to use both browser-based Web Speech API for speech-to-text, and Cognitive Services Speech Services API for text-to-speech. Hybrid Speech Demo
07.a.customization-timestamp-grouping Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time. Timestamp Grouping Demo
07.b.customization-send-typing-indicator Demonstrates how to send typing activity when the user start typing on the send box. User Typing Indicator Demo
08.customization-user-highlighting Demonstrates how to customize the styling of activities based whether the message is from the user or the bot. User Highlighting Demo
09.customization-reaction-buttons Introduces the ability to create custom components for Web Chat that are unique to your bot's needs. This tutorial demonstrates the ability to add reaction emoji such as :thumbsup: and :thumbsdown: to conversational activities. Reaction Buttons Demo
10.a.customization-card-components Demonstrates how to create custom activity card attachments, in this case GitHub repository cards. Card Components Demo
10.b.customization-password-input Demonstrates how to create custom activity for password input. Password Input Demo
11.customization-redux-actions Advanced tutorial: Demonstrates how to incorporate redux middleware into your Web Chat app by sending redux actions through the bot. This example demonstrates manual styling based on activities between bot and user. Redux Actions Demo
12.customization-minimizable-web-chat Advanced tutorial: Demonstrates how to add the Web Chat interface to your website as a minimizable show/hide chat box. Minimizable Web Chat Demo
13.customization-speech-ui Advanced tutorial: Demonstrates how to fully customize key components of your bot, in this case speech, which entirely replaces the text-based transcript UI and instead shows a simple speech button with the bot's response. Speech UI Demo
14.customization-piping-to-redux Advanced tutorial: Demonstrates how to pipe bot activities to your own Redux store and use your bot to control your page through bot activities and Redux. Piping to Redux Demo
15.a.backchannel-piggyback-on-outgoing-activities Advanced tutorial: Demonstrates how to add custom data to every outgoing activities. Backchannel Piggybacking Demo
15.b.incoming-activity-event Advanced tutorial: Demonstrates how to forward all incoming activities to a JavaScript event for further processing. Incoming Activity Demo
15.c.programmatic-post-activity Advanced tutorial: Demonstrates how to send a message programmatically. Programmatic Posting Demo
15.d.backchannel-send-welcome-event Advanced tutorial: Demonstrates how to send welcome event with client capabilities such as browser language. Welcome Event Demo
16.customization-selectable-activity Advanced tutorial: Demonstrates how to add custom click behavior to each activity. Selectable Activity Demo
17.chat-send-history Advanced tutorial: Demonstrates the ability to save user input and allow the user to step back through previous sent messages. Chat Send History Demo
18.customization-open-url Advanced tutorial: Demonstrates how to customize the open URL behavior. Customize Open URL Demo
19.a.single-sign-on-for-enterprise-apps Demonstrates how to use single sign-on for enterprise single-page applications using OAuth Single Sign-On for Enterprise Single-Page Applications Demo
19.b.single-sign-on-for-intranet-apps Demonstrates how to use single sign-on for Intranet apps using Azure Active Directory Single Sign-On for Intranet Apps Demo
20.a.upload-to-azure-storage Demonstrates how to use upload attachments directly to Azure Storage Upload to Azure Storage Demo
21.customization-plain-ui Advanced tutorial: Demonstrates how to customize the Web Chat UI by building from ground up instead of needing to rewrite entire Web Chat components. Plain UI Demo

Web Chat API Reference

There are several properties that you might pass into your Web Chat React Component (<ReactWebChat>) or the renderWebChat() method. Feel free to examine the source code starting with packages/component/src/Composer.js. Below is a short description of the available props.

Property Description
activityMiddleware A chain of middleware, modeled after Redux middleware, that allows the developer to add new DOM components on the currently existing DOM of Activities. The middleware signature is the following: options => next => card => children => next(card)(children).
activityRenderer The "flattened" version of activityMiddleware, similar to the store enhancer concept in Redux.
adaptiveCardHostConfig Pass in a custom Adaptive Cards host config. Be sure to verify your Host Config with the version of Adaptive Cards that is being used. See Custom Host config for more information.
attachmentMiddleware A chain of middleware that allows the developer to add their own custom HTML Elements on attachments. The signature is the following: options => next => card => next(card).
attachmentRenderer The "flattened" version of attachmentMiddleware.
cardActionMiddleware A chain of middleware that allows the developer to modify card actions, like Adaptive Cards or suggested actions. The middleware signature is the following: cardActionMiddleware: () => next => ({ cardAction, getSignInUrl }) => next(cardAction)
createDirectLine A factory method for instantiating the Direct Line object. Azure Government users should use createDirectLine({ domain: 'https://directline.botframework.azure.us/v3/directline', token }); to change the endpoint. The full list of parameters are: conversationId, domain, fetch, pollingInterval, secret, streamUrl, token, watermark webSocket.
createStore A chain of middleware that allows the developer to modify the store actions. The middleware signature is the following: createStore: ({}, ({ dispatch }) => next => action => next(cardAction)
directLine Specify the DirectLine object with DirectLine token.
disabled Disable the UI (i.e. for presentation mode) of Web Chat.
grammars Specify a grammar list for Speech (Bing Speech or Cognitive Services Speech Services).
groupTimeStamp Change default settings for timestamp groupings.
locale Indicate the default language of Web Chat. Four letter codes (such as en-US) are strongly recommended.
renderMarkdown Change the default Markdown renderer object.
sendTypingIndicator Display a typing signal from the user to the bot to indicate that the user is not idling.
store Specify a custom store, e.g. for adding programmatic activity to the bot.
styleOptions Object that stores customization values for your styling of Web Chat. For the complete list of (frequently updated) default style options, please see the defaultStyleOptions.js file.
styleSet The non-recommended way of overriding styles.
userID Specify a userID. There are two ways to specify the userID: in props, or in the token when generating the token call (createDirectLine()). If both methods are used to specify the userID, the token userID property will be used, and a console.warn will appear during runtime. If the userID is provided via props but is prefixed with 'dl', e.g. 'dl_1234', the value will be thrown and a new ID generated. If userID is not specified, it will default to a random user ID. Multiple users sharing the same user ID is not recommended; their user state will be shared.
username Specify a username.
webSpeechPonyFillFactory Specify the Web Speech object for text-to-speech and speech-to-text.

Browser compatibility

Web Chat supports the latest 2 versions of modern browsers like Chrome, Edge, and FireFox. If you need Web Chat in Internet Explorer 11, please see the ES5 bundle demo.

Please note, however:

  • Web Chat does not support Internet Explorer older than version 11
  • Customization as shown in non-ES5 samples are not supported for Internet Explorer. Because IE11 is a non-modern browser, it does not support ES6, and many samples that use arrow functions and modern promises would need to be manually converted to ES5. If you are in need of heavy customization for your app, we strongly recommend developing your app for a modern browser like Google Chrome or Edge.
  • Web Chat has no plan to support samples for IE11 (ES5).
    • For customers who wish to manually rewrite our other samples to work in IE11, we recommend looking into converting code from ES6+ to ES5 using polyfills and transpilers like babel.

How to test with Web Chat's latest bits

Testing unreleased features is only available via MyGet packaging at this time.

If you want to test a feature or bug fix that has not yet been released, you will want to point your Web Chat package to Web Chat's daily feed, as opposed the official npmjs feed.

Currently, you may access Web Chat's dailies by subscribing to our MyGet feed. To do this, you will need to update the registry in your project. This change is reversible, and our directions include how to revert back to subscribing to the official release.

Subscribe to latest bits on myget.org

To do this you may add your packages and then change the registry of your project.

  1. Add your project dependencies other than Web Chat.
  2. In your project's root directory, create a .npmrc file
  3. Add the following line to your file: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Add Web Chat to your project dependencies npm i botframework-webchat --save
  5. Note that in your package-lock.json, the registries pointed to are now MyGet. The Web Chat project has upstream source proxy enabled, which will redirect non-MyGet packages to npmjs.com.

Re-subscribe to official release on npmjs.com

Re-subscribing requires that you reset your registry.

  1. Delete your .npmrc file
  2. Delete your root package-lock.json
  3. Remove your node_modules directory
  4. Reinstall your packages with npm i
  5. Note that in your package-lock.json, the registries are pointing to https://npmjs.com/ again.

Contributing

See our Contributing page for details on how to build the project and our repository guidelines for Pull Requests.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Reporting Security Issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at secure@microsoft.com. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

Copyright (c) Microsoft Corporation. All rights reserved.

changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

[Unreleased]

Fixed

  • Fixes #3814. Allow carousel's scrollable content to be tabbable, by @corinagum in PR #3841
  • Fixes #3834. Ensure carousel attachments are read by AT on tab focus, by @corinagum in PR #3841
  • Fixes #3812. Update adaptiveCardHostConfig to accessible text color-contrasts, by @corinagum in PR #3853
  • Fixes #3816. De-bumped Node.js engine requirement for Direct Line Speech SDK to >= 10.14.2 from >= 12.0.0, by @compulim in PR #3854

Changed

[4.13.0] - 2021-04-05

Added

  • Resolves #3087. External links in Markdown will now be appended with an "open in new window" icon and accessibility label, by @compulim in PR #3817
  • Resolves #2100. Add types declarations for Style Options in api bundle, by @corinagum, in PR #3818
  • Fixes #3810. Removes aria-hidden from elements that have a focusable child, by @corinagum in PR #3836
  • Fixes #3811. Removes erroneous aria-labelledby from carousel, by @corinagum in PR #3836

Changed

Samples

[4.12.1] - 2021-03-16

Added

  • Resolves #3777. Added a new adaptiveCardsParserMaxVersion style options for selecting the maximum supported version when parsing an Adaptive Cards, by @compulim in PR #3778

Fixed

  • Fixes #3773. Remove replyToId when using Direct Line Speech adapter, by @compulim in PR #3776

Samples

[4.12.0] - 2021-03-01

Added

  • Resolves #2745. Added new flow layout to suggested actions, by @compulim in PR #3641 and PR #3748
  • Added new style options to customize auto-scroll, by @compulim in PR #3653
    • Set autoScrollSnapOnActivity to true to pause auto-scroll after more than one activity is shown, or a number to pause after X number of activities
    • Set autoScrollSnapOnPage to true to pause auto-scroll when a page is filled, or a number between 0 and 1 to pause after % of page is filled
    • Set autoScrollSnapOnActivityOffset and autoScrollSnapOnPageOffset to a number (in pixels) to overscroll/underscroll after the pause
  • Supports multiple transcripts in a single composition, by @compulim in PR #3653
  • Resolves #3368. Added new sendBoxButtonAlignment for button alignment in multi-line text mode, by @compulim in PR #3668
  • Resolves #3666. Added support of sovereign clouds when using Direct Line Speech, by @compulim in PR #3694
  • Resolves #2996. Added transcript navigation by keyboard navigation keys, by @compulim in PR #3703
  • Resolves #3544. Send user ID from props to chat adapter, by @timenick in PR [#3544)(https://github.com/microsoft/BotFramework-WebChat/issues/3544).
  • Resolves #3562. Add button word wrap to suggested actions stacked layout, by @corinagum, in PR #3728 and #3745
  • Resolves #3658. Added new containerRole to default style options, by @nfreear in PR #3669
  • Resolves #3754. Added new useObserveTranscriptFocus hook, by @compulim in PR #3755
  • Translation for Yue, by @compulim in PR #3749

Fixed

  • Fixes #3278. Update HOOKS.md verbiage, by @corinagum in PR #3564
  • Fixes #3534. Remove 2020 deprecations, by @corinagum in PR #3564 and #3728
  • Fixes #3561. Remove MyGet mentions from samples, by @corinagum in PR #3564
  • Fixes #3537. Fix some carousels improperly using aria-roledescription, by @corinagum in PR #3599
  • Fixes #3483. IE11 anchors fixed to open securely without 'noreferrer' or 'noopener', by @corinagum in PR #3607
  • Fixes #3565. Allow strikethrough <s> on sanitize markdown, by @corinagum in PR #3646
  • Fixes #3672. Center the icon of send box buttons vertically and horizontally, by @compulim in PR #3673
  • Fixes #3683. Activities should be acknowledged when user scrolls to bottom, by @compulim in PR #3684
  • Fixes #3431. Race condition between the first bot activity and first user activity should not cause the first bot activity to be delayed, by @compulim in PR #3705
  • Fixes #3676. Activities without text should not generate bogus aria-labelledby, by @compulim in PR #3697
  • Fixes #3625. Update 'no screen reader for custom activity middleware' warning and add screen reader renderer documentation to ACCESSIBILITY.md, by @corinagum in PR #3689
  • Fixes #3453. Fixes plain text file attachments to show download link when uploaded, by @corinagum in PR #3711
  • Fixes #3612. Carousel flippers in suggested actions are given extra padding, by @compulim and @Quirinevwm in PR #3704
  • Fixes #3411. With Direct Line Speech, clicking on microphone button during speech recognition should no longer stop working, by @compulim in PR #3694
    • Although it no locker lock up microphone, clicking on the microphone button has no effect because Direct Line Speech does not support aborting speech recognition
  • Fixes #3421. With Direct Line Speech, after not able to recognize any speech, it should no longer stop working, by @compulim in PR #3694
  • Fixes #3616. [Accessibility documentation] Update activity timestamp grouping to match visual UI, by @amal-khalaf in PR #3708
  • Fixes #3718. Fixed webpack.config.js to use default settings of ['browser', 'module', 'main'] and resolved issues with uuid package in IE11, by @compulim in PR #3726
  • Fixes #3622. Apply pushed button style options and aria-pressed on Adaptive Cards selected buttons, by @amal-khalaf in PR #3710
  • Fixes #3618. Fix Adaptive Cards anchors being disabled when Adaptive Cards is obsolete, by @corinagum in PR #3687
  • Fixes #3747. aria-pressed and aria-role is not properly set on Adaptive Cards submit buttons, by @amal-khalaf in PR #3744
  • Fixes #3750. Debump Node.js engines requirements for some packages to 12.0.0, by @compulim in PR #3753
  • Fixes #3760. Use <ErrorBoundary> to wrap around attachment renderer, by @compulim in PR #3761
  • Fixes #3764. Added role="group" to the focusable transcript to enable aria-activedescendant, by @compulim in PR #3765

Changed

Samples

[4.11.0] - 2020-11-04

Added

  • Resolves #3281. Added documentation on speech permissions for Cordova apps on Android, by @corinagum, in PR #3508
  • Resolves #3316. Refactored platform-neutral APIs into the new api package, to be reused on React Native component, in PR #3543 by @compulim
    • The new layering is core -> api -> component (HTML-only) -> bundle
    • Includes composition mode, platform-neutral React hooks, and localization resources
    • Most hooks are available in the new 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 package
    • Most implementations of middleware are only available in component 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:
      • Carousel layout and stacked layout is only available on component package due to their coupling with their respective visual components
      • For card action middleware, imBack, messageBack and postBack actions are available on api package, but call, openUrl and other platform-dependent actions are only available on component package
    • activityMiddleware, attachmentMiddleware, etc, now support arrays for multiple middleware
  • Resolves #3535. Add Technical Support Guide for guidance on troubleshooting information and navigating the Web Chat repository, by @corinagum, in PR #3645

Fixed

Changed

Samples

[4.10.1] - 2020-09-09

Breaking changes

  • To support Content Security Policy, glamor is being replaced by create-emotion. The CSS hash and rule name is being prefixed with webchat--css with a random value.

Fixed

  • Fixes #3431. Removed delay of first activity with replyToId pointing to a missing activity, by @compulim in PR #3450
  • Fixes #3439. Use consistent return type in default CardActionContext.getSignInUrl(), by @stevengum in PR #3459
  • Fixes #3444. Make suggested actions container height styleOption flexible, by @corinagum in PR #3456

Changed

Samples

[4.10.0] - 2020-08-18

Breaking changes

  • Due to the complexity, we are no longer exposing <CarouselLayout> and <StackedLayout>. Please use <BasicTranscript> to render the transcript instead.
  • With the new activity grouping feature:
    • Customized avatar cannot be wider than styleOptions.avatarSize. If you want to show a wider avatar, please increase styleOptions.avatarSize.
    • If customized avatar is rendering false, bubble will still be padded to leave a gutter for the empty customized avatar. To hide gutter, please set styleOptions.botAvatarInitials and styleOptions.userAvatarInitials to falsy.
  • Default bubble nub offset is set to 0, previously "bottom" (or -0)
    • Previously, we put the bubble nub at the bottom while keeping the avatar on top. This is not consistent in the new layout.
  • By default, we will group avatar per status group.
    • If you want to switch back to previous behaviors, please set styleOptions.showAvatarInGroup to true.
  • Default botAvatarInitials and userAvatarInitials is changed to undefined, from "" (empty string)
    • When the initials is undefined, no gutter space will be reserved for the avatar.
    • When the initials is "" (empty string), gutter space will be reserved, but not avatar will be shown.
  • useRenderActivity hook is being deprecated, in favor of the new useCreateActivityRenderer hook.
  • useRenderActivityStatus hook is being deprecated, in favor of the new useCreateActivityStatusRenderer hook.
  • useRenderAvatar hook is being deprecated, in favor of the new useCreateAvatarRenderer hook.

Change in general middleware design

This change will impact middleware which use downstream result.

Previously, when a middleware is called, they are passed with a single argument.

Starting from 4.10.0, multiple arguments could be passed to the middleware. All middleware should pass all arguments to the downstream middleware. This change enables future extension to the middleware pattern.

For example, a passthrough middleware was:

() => next => card => next(card)

It should become:

() => next => (...args) => next(...args)

This also applies to the render function returned by activity middleware. The previous signature was:

() => next => card => children => next(card)(children)

It should become:

() => next => (...setupArgs) => (...renderArgs) => next(...setupArgs)(...renderArgs)

Note: Please read the following section for another change in the activity middleware signature for decorators.

Change in activity middleware

This change will impact activity middleware used for decoration.

Previously, when an activity middleware hid a specific activity from view, it returned a function, () => false.

Starting in 4.10.0, if an activity needs to be hidden from the view, the middleware should return false instead of () => false. This change allows transcript to correctly group activities and ignore activities that are not in view.

To avoid the TypeError: x is not a function error, all middleware should be aware that downstream middleware may return false instead of a function.

For example, when an event activity is hidden from the view, the terminator middleware will now return false. All decoration middleware should check if the downstream result is false (or falsy value), and return the value as-is to upstream middleware.

Previously, a simple decorator was:

() => next => (...setupArgs) => (...renderArgs) => {
  const render = next(...setupArgs);
  const element = render(...renderArgs);

  return element && <div>{element}</div>;
}

It should check the result from downstream middleware. If it is falsy, it should return as-is to the upstream middleware:

() => next => (...setupArgs) => {
  const render = next(...setupArgs);

  return render && (...renderArgs) => {
    const element = render(...renderArgs);

    return element && <div>{element}</div>;
  };
}

Changed

Added

Fixed

  • Fixes #2675. Added alt text to images in suggested actions, by @compulim in PR #3375
  • Fixes #3383. Fixed notification toast should not break when most fields are undefined, by @compulim in PR #3384

Samples

[4.9.2] - 2020-07-14

Added

Fixed

  • Fixes #3265. Fix styling specificity regression on microphone button, by @corinagum in PR #3276
  • Fixes #3279. Fix relative timestamp errored out when showing a time before yesterday, by @compulim in PR #3282
  • Fixes #3236, by @compulim in PR #3287
    • Isolated screen reader only live region for incoming activities and added a new <ScreenReaderActivity> component
    • Removed screen reader text for activities outside of live region, including <CarouselFilmstrip>, <StackedLayout>, <TextContent>, and <Timestamp>
    • Updated some accessibility texts
    • Rectified activities render order by delaying activities with replyToId that reference an activity which is not ACK-ed, for up to 5 seconds
    • Disabled widgets will have tabindex="-1" set, instead of disabled attribute
    • Remove tabindex="-1" from Adaptive Cards container
    • Hide activities of type invoke
  • Fixes #3294. Fix blank screen on missing middlewares, by @compulim in PR #3295
  • Fixes #3297. Fix className prop is not honored in <ReactWebChat>, by @compulim in PR #3300

Samples

[4.9.1] - 2020-06-09

Breaking changes

  • Affecting Adaptive Cards, legacy cards and suggested actions
    • For openUrl card action, we are now allow-listing the URL scheme using the same allow list from the default Markdown + sanitize engine, which includes data, http, https, ftp, mailto, sip, and tel
    • To allow-list a different set of URL schemes, please implement the card action middleware to override this behavior

Added

  • Resolves #3205. Added Direct Line App Service Extension protocol, by @compulim in PR #3206
  • Resolves #3225. Support allowed scheme with openUrl card action, by @compulim in PR #3226
  • Resolves #3252. Added useObserveScrollPosition and useScrollTo hooks, by @compulim in PR #3268
  • Resolves #3271. Added composition mode, which splits up <ReactWebChat> into <Composer> and <BasicWebChat>, by @compulim in PR #3268

Fixed

  • Fixes #1340. Card container should not be focusable if they do not have tapAction, by @compulim in PR #3193
  • Fixed #3196. Cards with tapAction should be executable by <kbd>ENTER</kbd> or <kbd>SPACEBAR</kbd> key, by @compulim in PR #3197
  • Fixed #3203. "New messages" button should be narrated by assistive technology, by @compulim in PR #3204
  • Fixed #3217. Make sure rel="noopener noreferrer is not sanitized, by @compulim in PR #3220
  • Fixed #3223. Tap an openUrl card action should open URL in a new tab with noopener noreferrer set, by @compulim in PR #3224

Changed

Samples

[4.9.0] - 2020-05-11

Added

  • Resolves #2897. Moved from JUnit to VSTest reporter with file attachments, by @compulim in PR #2990
  • Added aria-label attribute support for default Markdown engine, by @patniko in PR #3022
  • Resolves #2969. Support sovereign cloud for Cognitive Services Speech Services, by @compulim in PR #3040
  • Resolves #2481. Support selecting different audio input devices for Cognitive Services Speech Services, by @compulim in PR #3079
  • Resolves #2850. Added new useFocus hook and deprecating useFocusSendBox hook, by @compulim in PR #3123
    • Modify setFocus argument of useTextBoxSubmit to support main and sendBoxWithoutKeyboard
  • Fixes #1427. Support disabled prop and added actionPerformedClassName in Adaptive Card and other legacy cards, by @compulim in PR #3150

Fixed

  • Fixes #2989. Fix observeOnce to use ES Observable call pattern, by @compulim in PR #2993
  • Fixes #3024. Using bridge package markdown-it-attrs-es5 for consuming markdown-it-attrs for IE11, by @compulim in PR #3025
  • Fixes #2818. Fix user ID is not set when passing to embed as query parameter, by @p-nagpal in PR #3031
  • Fixes #3026. Fix link rel attribute in the renderMarkdown function, by @tdurnford in PR #3033
  • Fixes #2933. Fix text should not be ignored in messageBack action in hero card, by @geea-develop and @compulim in PR #3003
  • Fixes #2562. Fix timestamps should not stop updating, by @compulim in PR #3066
  • Fixes #2953. Direct Line Speech should not synthesize when the speak property is falsy, by @compulim in PR #3059
  • Fixes #2876. messageBack and postBack should send even if both text and value is falsy or undefined, by @compulim in PR #3120
  • Fixes #2668. Disable Web Audio on insecure connections, by @compulim in PR #3079
  • Fixes #2850. After click suggested action, should focus to send box without keyboard, by @compulim in PR #3123
  • Fixes #3133. Associate ARIA labels with buttons in hero card and Adaptive Cards, by @compulim in PR #3146.
    • Remove browser-based detection from <ScreenReaderText> because it is no longer needed.
    • After stripping Markdown syntax for accessibility labels, cache the result to improve rendering performance.
    • Skip stripping Markdown for non-Markdown text content.
  • Fixes #3155. Patch incoming activities with null fields, by @compulim in PR #3154
  • Fixes #2669 and #3136. The "New messages" button will be accessible through <kbd>TAB</kbd> key, inbetween the last read and first unread activity, by @compulim in PR #3150.
    • After the "New message" button is clicked, focus will be moved to the first interactive UI of unread activity or the send box.
  • Fixes #3135. If the current widget is disabled, it will keep focus until the next <kbd>TAB</kbd> key is pressed, by @compulim in PR #3150

Changed

Samples

[4.8.1] - 2020-04-15

Fixed

  • Fixes #3075. Fix usability issues around accessibility, by @compulim in PR #3076
    • Fix timestamp should not be narrated more than once.
    • Associate the activity text with its attachments, by adding a role="region" to the activity DOM element.
  • Fixes #3074. Keep props.locale when sending to the bot, by @compulim in PR #3095
  • Fixes #3096. Use <ScreenReaderText> instead of aria-label for message bubbles, by @compulim in PR #3097

[4.8.0] - 2020-03-05

Breaking changes

  • Localization
    • locale prop: zh-YUE has been renamed to yue to conform with Unicode standard. zh-YUE will continue to work with warnings
    • Most strings have been validated and retranslated by the Microsoft localization team, with the exception of English (US), Egyptian Arabic, Jordan Arabic, and Chinese Yue
      • If the new strings are undesirable, please use the overideLocalizedStrings prop for customization
      • String IDs have been refreshed and now use a standard format
    • useLocalize and useLocalizeDate is deprecated. Please use useLocalizer and useDateFormatter instead
  • Customizable typing indicator: data and hook related to typing indicator are being revamped in PR #2912
    • lastTypingAt reducer is deprecated, use typing instead. The newer reducer contains typing indicator from the user
    • useLastTypingAt() hook is deprecated, use useActiveTyping(duration?: number) instead. For all typing information, pass Infinity to duration argument
  • Customizable activity status: new nextVisibleActivity to control activity status visibility
    • Previously, we use timestampClassName to control if the activity should show or hide timestamp. The timestampClassName was added as a class attribute the DOM element which contains the timestamp
    • Today, activity and nextVisibleActivity are passed to the middleware, so the activityRendererMiddleware can decide whether the timestamp should be shown or not. For example, developers can group timestamp based on activity type

Added

Fixed

Changed

Samples

[4.7.1] - 2019-12-13

Changed

  • Moved core-js from dev dependencies to dependencies in botframework-directlinespeech-sdk package, by @tonyanziano, in PR #2727

[4.7.0] - 2019-12-12

Breaking changes

  • adaptiveCardHostConfig is being renamed to adaptiveCardsHostConfig
    • If you are using the deprecated adaptiveCardHostConfig, we will rename it automatically

Added

  • Resolves #2539, added React hooks for customization, by @compulim, in the following PRs:
    • PR #2540: useActivities, useReferenceGrammarID, useSendBoxShowInterims
    • PR #2541: useStyleOptions, useStyleSet
    • PR #2542: useLanguage, useLocalize, useLocalizeDate
    • PR #2543: useAdaptiveCardsHostConfig, useAdaptiveCardsPackage, useRenderMarkdownAsHTML
    • PR #2544: useAvatarForBot, useAvatarForUser
    • PR #2547: useEmitTypingIndicator, usePeformCardAction, usePostActivity, useSendEvent, useSendFiles, useSendMessage, useSendMessageBack, useSendPostBack
    • PR #2548: useDisabled
    • PR #2549: useSuggestedActions
    • PR #2550: useConnectivityStatus, useGroupTimestamp, useTimeoutForSend, useUserID, useUsername
    • PR #2551: useLastTypingAt, useSendTypingIndicator, useTypingIndicator
    • PR #2552: useFocusSendBox, useScrollToEnd, useSendBoxValue, useSubmitSendBox, useTextBoxSubmit, useTextBoxValue
    • PR #2553: useDictateInterims, useDictateState, useGrammars, useMarkActivityAsSpoken, useMicrophoneButton, useShouldSpeakIncomingActivity, useStartDictate, useStopDictate, useVoiceSelector, useWebSpeechPonyfill
    • PR #2554: useRenderActivity, useRenderAttachment
    • PR #2644: Added internal/useWebChatUIContext for cleaner code
    • PR #2652: Update samples to use hooks
  • Bring your own Adaptive Cards package by specifying adaptiveCardsPackage prop, by @compulim in PR #2543
  • Fixes #2597. Modify watch script to start and add tableflip script for throwing node_modules, by @corinagum in PR #2598
  • Adds Arabic Language Support, by @midineo, in PR #2593
  • Adds AdaptiveCardsComposer and AdaptiveCardsContext for composability for Adaptive Cards, by @compulim, in PR #2648
  • Adds Direct Line Speech support, by @compulim in PR #2621
  • Fixes #2692. Rename sample 17 to 17.a, by @corinagum in PR #2695

Fixed

  • Fixes #2565. Fixed Adaptive Card host config should generate from style options with default options merged, by @compulim in PR #2566
  • Resolves #2337. Remove Cognitive Services Preview warning, by @corinagum in PR #2578
  • Fixes #2559. De-bump remark and strip-markdown, by @corinagum in PR #2576
  • Fixes #2512. Adds check to ensure Adaptive Card's content is an Object, by @tdurnford in PR #2590
  • Fixes #1780, #2277, and #2285. Make Suggested Actions accessible, Fix Markdown card in carousel being read multiple times, and label widgets of Connectivity Status and Suggested Actions containers, by @corinagum in PR #2613
  • Fixes #2608. Focus will return to sendbox after clicking New Messages or a Suggested Actions button, by @corinagum in PR #2628
  • Resolves #2597. Modify watch script to start and add tableflip script for throwing node_modules, by @corinagum in PR #2598
  • Resolves #1835. Adds suggestedActionLayout to defaultStyleOptions, by @spyip, in PR #2596
  • Resolves #2331. Updated timer to use React Hooks, by @spyip in PR #2546
  • Resolves #2620. Adds Chinese localization files, by @spyip in PR #2631
  • Fixes #2639. Fix passed in prop time from string to boolean, by @corinagum in PR #2640
  • component: Updated timer to use functional component, by @spyip in PR #2546
  • Fixes #2651. Add ends-with string module to ES5 bundle, by @corinagum in PR #2654
  • Fixes #2658. Fix rendering of markdown images in IE11, by @corinagum in PR #2659
  • Fixes #2662 and #2666. Fix various issues related to Direct Line Speech, by @compulim in PR #2671
    • Added triple-buffering to reduce pops/cracks.
    • Enable Safari by upsampling to 48000 Hz.
    • Support detailed output format on Web Chat side.
  • Fixes #2700. Enable <SayComposer> and Adaptive Cards in recompose story, in PR #2649
    • Moved <SayComposer> from <BasicTranscript> to <Composer>
    • Moved WebSpeechPonyfill patching code from <BasicTranscript> to <Composer>
  • Fixes #2699. Disable speech recognition and synthesis when using Direct Line Speech under IE11, by @compulim, in PR #2649
  • Fixes #2709. Reduce wasted render of activities by memoizing partial result of <BasicTranscript>, by @compulim in PR #2710
  • Fixes #2710. Suggested actions container should persist for AT, by @corinagum in PR #2710
  • Fixes #2718. Add Object.is polyfill for IE11, by @compulim in PR #2719
  • Fixes #2723. Fix renderMarkdown should not be called if it is undefined in minimal bundle, by @compulim in PR #2724
  • Fixes #2655. "Taking longer than usual to connect" should not show up after reconnect succeeded, by @curiousite and @compulim in PR #2656
  • Fixes #2942. Fix typing indicator should not show up for the user, by @compulim in PR #2950

Changed

Samples

[4.6.0] - 2019-10-31

Breaking changes

  • We will no longer include react and react-dom in our NPM package, instead, we will requires peer dependencies of react@^16.8.6 and react-dom@^16.8.6

Changed

Fixed

  • Fixes #2328. Updating submitSendBoxSaga.js to send sendBoxValue.trim(), by @jimmyjames177414 in PR #2331
  • Fixes #2160. Clear suggested actions after clicking on a suggested actions of type openUrl, by @tdurnford in PR #2190
  • Fixes #1954. Estimate clock skew and adjust timestamp for outgoing activity, by @compulim in PR #2208
  • Fixes #2240. Fix microphone button should be re-enabled after error, by @compulim in PR #2241
  • Fixes #2250. Fix React warnings related prop types, by @compulim in PR #2253
  • Fixes #2245. Fix speech synthesis not working on Safari by priming the engine on the first microphone button click, by @compulim in PR #2246
  • Fixes #1514. Added reference grammar ID when using Cognitive Services Speech Services, by @compulim in PR #2246
  • Fixes #1515. Added dynamic phrases when using Cognitive Services Speech Services, by @compulim in PR #2246
  • Fixes #2273. Add ScreenReaderText component, by @corinagum in PR #2278
  • Fixes #2231. Fallback to English (US) if date time formatting failed, by @compulim in PR #2286
  • Fixes #2298. Speech synthesize errors to be ignored, by @compulim in PR #2300
  • Fixes #2243. Fixed sagas to correctly mark activities with speaking attachments, by @tdurnford in PR #2320
  • Fixes #2365. Fix Adaptive Card pushButton appearance on Chrome, by @corinagum in PR #2382
  • Fixes #2379. Speech synthesis can be configured off by passing null, by @compulim in PR #2408
  • Fixes #2418. Connectivity status should not waste-render every 400 ms, by @compulim in PR #2419
  • Fixes #2415 and #2416. Fix receipt card rendering, by @compulim in PR #2417
  • Fixes #2415 and #2416. Fix Adaptive Cards cannot be disabled on-the-fly, by @compulim in PR #2417
  • Fixes #2360. Timestamp should update on language change, by @compulim in PR #2414
  • Fixes #2428. Should interrupt speech synthesis after microphone button is clicked, by @compulim in PR #2429
  • Fixes #2435. Fix microphone button getting stuck on voice-triggered expecting input hint without a speech synthesis engine, by @compulim in PR #2445
  • Fixes #2472. Update samples to use repo's version of React, by @corinagum in PR #2478
  • Fixes #2473. Fix samples 13 using wrong region for Speech Services credentials, by @compulim in PR #2482
  • Fixes #2420. Fix saga error should not result in an unhandled exception, by @compulim in PR #2421
  • Fixes #2513. Fix core-js not loading properly, by @compulim in PR #2514
  • Fixes #2516. Disable microphone input for expecting input hint on Safari, by @compulim in PR #2517 and PR #2520
  • Fixes #2518. Synthesis of bot activities with input hint expecting, should be interruptible, by @compulim in PR #2520
  • Fixes #2519. On Safari, microphone should turn on after synthesis of bot activities with input hint expecting, by @compulim in PR #2520
  • Fixes #2521. webchat-es5.js should not contains non-ES5 code and must be loadable by IE11, by @compulim in PR #2522
  • Fixes #2524. Version was not burnt into source code correctly, by @compulim in PR #2525

Added

  • Resolves #2157, added emitTypingIndicator action and dispatcher, by @compulim, in PR #2413
  • Resolves #2307. Added options to hide ScrollToEnd button, by @nt-7 in PR #2332
  • Added bubble nub and style options, by @compulim, in PR #2137 and PR #2487
  • Resolves #1808. Added documentation on activity types, by @corinagum in PR #2228
  • Added timestampFormat option to the default style options and created AbsoluteTime component, by @tdurnford, in PR #2295
  • embed: Added ES5 polyfills and dev server, by @compulim, in PR #2315
  • Resolves #2380. Added botAvatarBackgroundColor and userAvatarBackgroundColor to the default style options, by @tdurnford in PR #2384
  • Added full screen capability to IFRAME in the YouTubeContent and VimeoContent components by @tdurnford in PR #2399
  • Resolves #2461, added isomorphic-react and isomorphic-react-dom packages, by @compulim and @corinagum, in PR #2478 and PR #2486
  • Added missing Norwegian (nb-NO) translations, by @taarskog
  • Added missing Italian (it-IT) translations, by @AntoT84
  • Resolve #2481. Support alternative audio input source by adding audioConfig prop to createCognitiveServicesSpeechServicesPonyfillFactory, by @corinagum, in PR #2491
  • Added missing Finnish (fi-FI) translations, by @sk91swd, in PR #2501

Samples

[4.5.3] - 2019-10-10

Changed

  • bundle: Bumped DirectLineJS to support metadata when uploading attachments, in PR #2433

Fixed

Added

[4.5.2] - 2019-08-07

[4.5.1] - 2019-08-01

Fixed

[4.5.0] - 2019-07-10

Added

Changed

Fixed

Samples

[4.4.1] - 2019-05-02

Added

Changed

Fixed

[4.3.0] - 2019-03-04

Added

  • Resolves #1383. Added options to hide upload button, by @compulim in PR #1491
  • Adds support of avatar image, thru styleOptions.botAvatarImage and styleOptions.userAvatarImage, in PR #1486
  • Adds ability to style sendbox background and text color, thru styleOptions.sendBoxBackground and styleOptions.sendBoxTextColor, in PR #1575
  • core: Adds sendEvent, in PR #1286
  • core: Adds CONNECT_FULFILLING action to workaround redux-saga design decision, in PR #1286
  • component: Added missing Spanish (es-ES) by @schgressive in PR #1615
  • Adds missing Spanish (es-ES) by @schgressive in PR #1615
  • Resolves #1602. Fix suggested actions regression of buttons, by @corinagum in PR #1616
  • component: Allow font family and adaptive cards text color to be set via styleOptions, by @a-b-r-o-w-n, in PR #1670
  • component: Add fallback logic to browser which do not support window.Intl, by @compulim, in PR #1696
  • *: Adds username back to activity, fixed #1321, by @compulim, in PR #1682
  • component: Allow root component height and width customization via styleOptions.rootHeight and styleOptions.rootWidth, by @tonyanziano, in PR #1702
  • component: Added cardActionMiddleware to customize the behavior of card action, by @compulim, in PR #1704
  • bundle: Add watermark and streamUrl parameters to createDirectLine, by @corinagum, in PR #1817
  • component: Added textarea option to SendBox per issues #17 and #124, by @tdurnford, in PR #1889
  • component: Added suggestedAction images per issue #1739, by @tdurnford, in PR #1909

Changed

Fixed

  • Fixes #1360. Added roles to components of Web Chat, by @corinagum in PR #1462
  • Fixes #1409. Added microphone status as screen reader only text, by @corinagum in PR #1490
  • Fixes #1605, #1316, #1341, #1411. Fix color contrast ratios & downloadIcon narrator accessibility by @corinagum in PR #1494
  • Fixes #1264, #1308, #1318, #1334,#1425. Update icons with accessibilty, Sent message accessibility, and fix sample README.md, @corinagum in PR #1506 and #1542
  • Fixes #1512. Fix #1512: fix sanitization of anchors (allow title attributes), by @corinagum in PR #1530
  • Fixes #1499.
    • Fix screen reader handling of name, activity, and timestamp,
    • connectCarouselFilmStrip: Fixed botAvatarInitials and userAvatarInitials functionality from recent name change,
    • BasicTranscript: Fixed user activity should not be recreated after receive ACK from Direct Line,
    • by @corinagum in PR #1528
  • component: Fix #1560, #1625 and #1635. Fixed carousel layout not showing date and alignment issues, by @compulim in PR #1561 and #1641
  • playground: Fixes #1562. Fixed timestamp grouping "Don't group" and added "Don't show timestamp", by @compulim in PR #1563
  • component: Fixes #1576. Rich card without tap should be rendered properly, by @compulim in PR #1577
  • core: Some sagas missed handling successive actions, in PR #1286
  • core: incomingActivitySaga may throw null-ref exception if the first activity is from user, in PR #1286
  • component: Fixes #1328. Should not start microphone if input hint is set to ignoringInput, in PR #1286
  • component: Fixes outgoing typing indicators are not sent and acknowledged properly, in PR #1286
  • Fixes #1402. Add messageBack support, by @corinagum in PR #1581
  • Fixes #1539. Fix outgoing typing indicators are not sent and acknowledged properly, in PR #1541
  • component: Fix #1547. Fixed unhandled activity type should be forwarded to custom middleware, by @compulim in PR #1569
  • playground: Fix #1610. Fixed bot and user avatar initials not working, by @compulim in PR #1611
  • bundle: Fix #1613. Pass conversationId to DirectLineJS constructor, by @neetu-das in PR #1614
  • component: Fix #1626. Fixed Number.isNaN is not available in IE11, by @compulim in PR #1628
  • bundle: Fix #1652. Pass pollingInterval to DirectLineJS constructor, by @neetu-das in PR #1655
  • core: Reworked logic on connect/disconnect for reliability on handling corner cases, by @compulim in PR #1649
  • core: Fix #1521. Add connectivity status component and update localization, by @corinagum in PR #1679
  • core: Fix #1057. Fixed suggested actions destined for other recipients should not show up, by @compulim in PR #1706
  • component: Fixed pt-br locale not being selected, added X minutes ago and missing translations, by @pedropacheco92 in PR #1745
  • component: Fix #1741 where scrollToEndButton does not have type="button"by @corinagum in PR #1743
  • component: Fix #1625 to update README.md by @corinagum in PR #1752

Removed

  • botAvatarImage and userAvatarImage props, as they are moved inside styleOptions, in PR #1486
  • sendTyping props is now renamed to sendTypingIndicator, by @compulim, in PR #1584

Samples

[4.2.0] - 2018-12-11

Added

  • Build: Development build now include instrumentation code, updated build scripts
    • npm run build will build for development with instrumentation code
    • npm run prepublishOnly will build for production
    • npm run watch will also run Webpack in watch loop
  • Build: Automated testing using visual regression testing technique in #1323
  • Added French localization, by @tao1 in PR #1327
  • Resolve #1344, by updating README.md and adding validation logic for userID props, in #1447
    • If userID props present and also embedded in Direct Line token, will use the one from Direct Line token
    • If userID props present, they must be string and not prefixed with dl_, to avoid confusion between userID props and Direct Line embedded user ID (which is forgery-proof)
    • If userID props does not pass the validation test or not specified, Web Chat will use default-user instead
  • Added support for Cognitive Services Speech to Text and Text to Speech in PR #1442

Changed

Fixed

  • Fixes #1397. Patched activities without from field, in PR #1405
  • Fixes #1237. Added new sample called migration, by @corinagum in PR #1398
  • Fixes #1332. Updated sample names and add table to README, by @corinagum in PR #1435
  • Fixes #1125. Added error handling for Adaptive Card JSON render, by @corinagum in PR #1395
  • Build: Webpack watch mode now emits non-minified code for shorter dev RTT, in #1331

Samples

[4.1.0] - 2018-10-31

Added

  • Initial release of Web Chat v4