Overview

Browse code

This sample demonstrates how the rich text editor and its dependencies can be excluded from the bundle if they're not required, utilizing tree-shaking techniques such as the sideEffects option in webpack. Please see webpack.config.js as an example of how to use sideEffects.

Prerequisites

• An Azure account with an active subscription. Create an account for free .
• Node.js Active LTS and Maintenance LTS versions.
• An active Communication Services resource. Create a Communication Services resource. You will need the endpoint value for the resource
• An identity with both VoIP and Chat scopes. Generate an identity using the Azure Portal.

Run the code

1. Run npm i on the directory of the project to install dependencies
2. Swap placeholders for identifiers in the code.
   • Go to the src folder and find the App.tsx file.
   • There input values for the Endpoint_URL for your resource and the USER_ID and TOKEN for the identity you created.
   • Optional: You can update the display name to match a string value of your choice.
   • Save the file.
3. Run npm run start

Open your browser to http://localhost:3000. You should see the following:

Feel free to style the composites to your desired size and layout inside of your application.

Enable Rich Text Editor

By default, the chat composite is using the plain text editor for the SendBox component and the MessageThread component's edit function. We also provide a Rich Text Editor for rich text formatting, table inserting etc. To try it out: - Go to the src folder and find the App.tsx file. - Change the value for richTextEditorEnabled to true. Note that inserting inline images is not enabled for this Quickstart. Please use the ui-library-quickstart-teams-interop-meeting-chat Quickstart to try out the inline image inserting function.

Open your browser to http://localhost:3000. You should see the following with the Rich Text Editor enabled: