Skip to content

Commit f500802

Browse files
ui-library-quickstart-composites readme updates
1 parent 8f90b75 commit f500802

File tree

1 file changed

+17
-18
lines changed

1 file changed

+17
-18
lines changed
Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
11
---
22
page_type: sample
33
languages:
4-
- javascript
4+
- javascript
55
products:
6-
- azure
7-
- azure-communication-services
6+
- azure
7+
- azure-communication-services
88
---
99

1010
# Get Started with Composites
1111

12-
For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Composites](https://azure.github.io/communication-ui-library/?path=/story/quickstarts-composites--page)
12+
For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Composites](https://azure.github.io/communication-ui-library/?path=/docs/composites-get-started--docs)
1313

1414
## Prerequisites
1515

16-
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) .
17-
- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended).
16+
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) .
17+
- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions.
1818
- An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource). You will need the endpoint value for the resource
1919
- An identity with both VoIP and Chat scopes. Generate an identity using the [Azure Portal](https://docs.microsoft.com/azure/communication-services/quickstarts/identity/quick-create-identity).
2020

2121
## Run the code
2222

2323
1. Run `npm i` on the directory of the project to install dependencies
2424
2. Swap placeholders for identifiers in the code.
25-
- Go to the `src` folder and find the `app.tsx` file.
26-
- There input values for the `Endpoint_URL` for your resource and the `USER_ID` and `TOKEN` for the identity you created.
27-
- Optional: You can update the display name to match a string value of your choice.
28-
- Save the file.
29-
4. Run `npm run start`
25+
- Go to the `src` folder and find the `App.tsx` file.
26+
- There input values for the `Endpoint_URL` for your resource and the `USER_ID` and `TOKEN` for the identity you created.
27+
- Optional: You can update the display name to match a string value of your choice.
28+
- Save the file.
29+
3. Run `npm run start`
3030

3131
Open your browser to ` http://localhost:3000`. You should see the following:
3232
![Composite End State](../media/CompositeEnd.png)
3333

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

3636
## Enable Rich Text Editor
37-
By default, the chat composite is using the plain text editor for the SendBox component and the MessageThread component's edit function.
38-
We also provide a Rich Text Editor for rich text formatting, table inserting etc.
39-
To try it out:
40-
- Go to the `src` folder and find the `app.tsx` file.
41-
- Change the value for `richTextEditorEnabled` to true.
42-
Note that inserting inline images is not enabled for this Quickstart.
43-
Please use the [ui-library-quickstart-teams-interop-meeting-chat](https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/ui-library-quickstart-teams-interop-meeting-chat) Quickstart to try out the inline image inserting function.
37+
38+
By default, the chat composite is using the plain text editor for the SendBox component and the MessageThread component's edit function.
39+
We also provide a Rich Text Editor for rich text formatting, table inserting etc.
40+
To try it out: - Go to the `src` folder and find the `App.tsx` file. - Change the value for `richTextEditorEnabled` to true.
41+
Note that inserting inline images is not enabled for this Quickstart.
42+
Please use the [ui-library-quickstart-teams-interop-meeting-chat](https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/ui-library-quickstart-teams-interop-meeting-chat) Quickstart to try out the inline image inserting function.
4443

4544
Open your browser to ` http://localhost:3000`. You should see the following with the Rich Text Editor enabled:
4645
![Composite with Rich Text Editor](../media/CompositeWithRichTextEditor.png)

0 commit comments

Comments
 (0)