From a7e6350d4280dff919cf9e2a57e19a342e0c15d9 Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 10:41:55 -0700 Subject: [PATCH 1/9] UI library file sharing chat composite quickstart fixes --- ui-library-filesharing-chat-composite/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/ui-library-filesharing-chat-composite/README.md b/ui-library-filesharing-chat-composite/README.md index 97f41cb5..a6fb00d8 100644 --- a/ui-library-filesharing-chat-composite/README.md +++ b/ui-library-filesharing-chat-composite/README.md @@ -31,21 +31,23 @@ This sample includes: - [app/](./app) - This directory contains source code for the React frontend. - [app/src/App.tsx](./app/src/App.tsx) - Application entry-point. Built primarily using UI library's [ChatComposite](https://azure.github.io/communication-ui-library/?path=/story/composites-chatcomposite-basic-example--basic-example). - [api/](./api) - This directory contains the source code for the backend API. - - [api/UploadFileToAzureBlobStore](./api/UploadFileToAzureBlobStore/index.ts) - Azure Function to upload the file to Azure Blob Store. + - [api/functions/uploadFileToAzureBlobStore.ts](./api/functions/uploadFileToAzureBlobStore.ts) - Azure Function to upload the file to Azure Blob Store. ### Prerequisites - Azure Resources You need a few Azure resources before running this sample locally. - An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (20.x.x is recommended). +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (20.9.x is recommended). - An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource). - An identity with Chat scope. Generate an identity using the [Azure Portal](https://docs.microsoft.com/azure/communication-services/quickstarts/identity/quick-create-identity). - [Azure Storage Account](https://docs.microsoft.com/en-us/azure/storage/common/storage-account-overview) - [Azure Blob Storage](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-nodejs) - For using azure storage in production environments, please follow the [azure storage application architecture guide](https://docs.microsoft.com/en-us/azure/architecture/guide/multitenant/service/storage) -### Prerequisites -- Configuration +### Prerequisites + +#### Configuration Once you have these resources setup, you need to replace the placeholders in these two files: @@ -55,7 +57,7 @@ Once you have these resources setup, you need to replace the placeholders in the - A UserId and Token can be generated using [Azure Portal](https://docs.microsoft.com/azure/communication-services/quickstarts/identity/quick-create-identity). - ThreadId can be generated by following [Microsoft Docs](https://docs.microsoft.com/en-us/javascript/api/overview/azure/communication-chat-readme?view=azure-node-latest). -### Prerequisites - Developement Environment +#### Development Environment Install NPM dependencies From d6e13a25a23a2f8f470bdeb1f7bfd473caaedf84 Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 10:57:38 -0700 Subject: [PATCH 2/9] UI library filesharing components quickstart readme update --- ui-library-filesharing-ui-components/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-library-filesharing-ui-components/README.md b/ui-library-filesharing-ui-components/README.md index 28574f27..aa32bd5d 100644 --- a/ui-library-filesharing-ui-components/README.md +++ b/ui-library-filesharing-ui-components/README.md @@ -14,7 +14,7 @@ products: ## Prerequisites - An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (20.x.x is recommended). +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (20.9.x is recommended). - An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource). - An identity with Chat scope. Generate an identity using the [Azure Portal](https://docs.microsoft.com/azure/communication-services/quickstarts/identity/quick-create-identity). @@ -35,6 +35,6 @@ Currently, `azure-functions-core-tools` supports up to Node.js v20.9. If you're - [app/src/App.tsx](./app/src/App.tsx) - Application entry-point. Built primarily using UI library's [CallComposite](https://azure.github.io/communication-ui-library/?path=/story/composites-chatcomposite-basic-example--basic-example). You will need to populate variables like `userId`, `userAccessToken` etc., in this file. - [app/src/ChatComponents.tsx](./app/src/ChatComponents.tsx) - Chat UI built using UI Library components and logic for implementing file sharing. - [api/](./api) - This directory contains the source code for the backend API (Azure function). - - [api/UploadFileToAzureBlobStore/index.ts](./api/UploadFileToAzureBlobStore/index.ts) - Azure Function to handle file uploads. + - [/api/functions/uploadFileToAzureBlobStore.ts](./api/functions/uploadFileToAzureBlobStore.ts) - Azure Function to handle file uploads. Additionally, [package.json](./package.json) provides some helper scripts to aid local development, using the developer tooling for [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/). From 5d96f078449b7365b9bcb7781add83b173c197f9 Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 11:29:23 -0700 Subject: [PATCH 3/9] ui-library-pstn-1-n-calling readme update --- ui-library-pstn-1-n-calling/README.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/ui-library-pstn-1-n-calling/README.md b/ui-library-pstn-1-n-calling/README.md index ede80db1..560f7c6c 100644 --- a/ui-library-pstn-1-n-calling/README.md +++ b/ui-library-pstn-1-n-calling/README.md @@ -1,10 +1,10 @@ --- page_type: sample languages: -- javascript + - javascript products: -- azure -- azure-communication-services + - azure + - azure-communication-services --- # Get Started with Composites - PSTN Calling & 1:N Calling @@ -13,8 +13,8 @@ This sample showcases how Call Composites can be used for making outbound calls ## Prerequisites -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - 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 - An identity with VoIP. Generate an identity using the [Azure Portal](https://docs.microsoft.com/azure/communication-services/quickstarts/identity/quick-create-identity). - A phone number procured through Azure Communication Service portal using [Azure Portal](https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/telephony/get-phone-number). @@ -23,15 +23,15 @@ This sample showcases how Call Composites can be used for making outbound calls 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 `INPUTS.tsx` file. - - Replace the values for the the `userIdentity` and `userToken` for the identity you created in Azure Portal in the `Prerequisites` step. - - Replace the `participantIds` with the identity or phone number of the user(s) you want to call. - - If you are calling a phone number, replace the `callerId` value as well. - - Update the display name to a name of your choice. - - Save the file. + - Go to the `src` folder and find the `INPUTS.tsx` file. + - Replace the values for the the `userIdentity` and `userToken` for the identity you created in Azure Portal in the `Prerequisites` step. + - Replace the `participantIds` with the identity or phone number of the user(s) you want to call. + - If you are calling a phone number, replace the `callerId` value as well. + - Update the display name to a name of your choice. + - Save the file. 3. Run `npm run start` Open your browser to . You should see the following: -![Composite Loaded State](../media/pstn-1-to-n-loaded.png). +![Composite Loaded State](../media/pstn-1-to-n-loaded.png) Finally, click `Start Call` to start the call. From 8f90b75fc18648de2113c78057bb2c02646ddc4b Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 11:46:12 -0700 Subject: [PATCH 4/9] ui-library-quickstart-composites-with-dependency-isolation readme fixes --- .../README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-library-quickstart-composites-with-dependency-isolation/README.md b/ui-library-quickstart-composites-with-dependency-isolation/README.md index b0711426..74ceaf42 100644 --- a/ui-library-quickstart-composites-with-dependency-isolation/README.md +++ b/ui-library-quickstart-composites-with-dependency-isolation/README.md @@ -14,7 +14,7 @@ This sample demonstrates how the rich text editor and its dependencies can be ex ## Prerequisites - An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - 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 - 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). @@ -22,13 +22,13 @@ This sample demonstrates how the rich text editor and its dependencies can be ex 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. + - 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:8080`. You should see the following: +Open your browser to ` http://localhost:3000`. You should see the following: ![Composite End State](../media/CompositeEnd.png) Feel free to style the composites to your desired size and layout inside of your application. @@ -37,7 +37,7 @@ Feel free to style the composites to your desired size and layout inside of your 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. +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](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. From f50080230189fea04d46c259f25b28042f03dd9b Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 11:53:34 -0700 Subject: [PATCH 5/9] ui-library-quickstart-composites readme updates --- ui-library-quickstart-composites/README.md | 35 +++++++++++----------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/ui-library-quickstart-composites/README.md b/ui-library-quickstart-composites/README.md index 4dfd4eec..5d762aab 100644 --- a/ui-library-quickstart-composites/README.md +++ b/ui-library-quickstart-composites/README.md @@ -1,20 +1,20 @@ --- page_type: sample languages: -- javascript + - javascript products: -- azure -- azure-communication-services + - azure + - azure-communication-services --- # Get Started with Composites -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) +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) ## Prerequisites -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - 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 - 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). @@ -22,11 +22,11 @@ For full instructions on how to build this code sample from scratch, look at [Qu 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. -4. Run `npm run start` + - 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: ![Composite End State](../media/CompositeEnd.png) @@ -34,13 +34,12 @@ 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](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. + +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](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. Open your browser to ` http://localhost:3000`. You should see the following with the Rich Text Editor enabled: ![Composite with Rich Text Editor](../media/CompositeWithRichTextEditor.png) From 7fb91728d6328e815d6e4c1e71510935e1547d9b Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 13:30:48 -0700 Subject: [PATCH 6/9] ui-library-quickstart-rooms readme fixes --- ui-library-quickstart-rooms/README.md | 35 ++++++++++++++------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/ui-library-quickstart-rooms/README.md b/ui-library-quickstart-rooms/README.md index 7554e66f..7ba3d444 100644 --- a/ui-library-quickstart-rooms/README.md +++ b/ui-library-quickstart-rooms/README.md @@ -1,36 +1,37 @@ --- page_type: sample languages: -- javascript + - javascript products: -- azure -- azure-communication-services + - azure + - azure-communication-services --- # Get Started with Rooms -This code sample showcases the ability to join a Rooms call using the CallComposite of the ACS UI library. For an overview of how Rooms works, you can read this -(documentation)[https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#managing-rooms-and-joining-room-calls]. To join a rooms call, you need the room id of the an existing room and the local user's id needs to be added to that room. The Rooms Client is needed to do this but is out of scope for this ACS UI library quickstart sample. For more information on how to create/manage rooms and add users to rooms using the Rooms Client, follow this (quickstart)[https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/rooms/get-started-rooms?tabs=windows&pivots=programming-language-javascript]. +This code sample showcases the ability to join a Rooms call using the CallComposite of the ACS UI library. For an overview of how Rooms works, you can read this +[documentation](https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#managing-rooms-and-joining-room-calls). To join a rooms call, you need the room id of the an existing room and the local user's id needs to be added to that room. The Rooms Client is needed to do this but is out of scope for this ACS UI library quickstart sample. For more information on how to create/manage rooms and add users to rooms using the Rooms Client, follow this [quickstart](https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/rooms/get-started-rooms?tabs=windows&pivots=programming-language-javascript). ## Prerequisites -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - 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 - 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). - Create a room and add your user id to the room by using the provided sample scripts which are based on this Rooms client [quickstart](https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/rooms/get-started-rooms?pivots=programming-language-javascript). - - First, enter your connection string from your Communication Services resource in `.\src\scripts\settings.js` to run the Rooms client scripts. - - Create a room by running `node .\src\scripts\createRoom.js` and copy the room id from the output. - - Add your user as a Presenter to the generated room by running `node .\src\scripts\addParticipantToRoom.js ` with the corresponding ids - - You can also change the role of the user to Attendee or Consumer in `.\src\scripts\addParticipantToRoom.js` and rerun the script. + - First, enter your connection string from your Communication Services resource in `.\src\scripts\settings.js` to run the Rooms client scripts. + - Open terminal and navigate to `src\scripts`. + - Create a room by running `node createRoom.js` and copy the room id from the output. + - Add your user as a Presenter to the generated room by running `node addParticipantToRoom.js ` with the corresponding ids + - You can also change the role of the user to Attendee or Consumer in `addParticipantToRoom.js` and rerun the script. ## Run the code 1. Run `npm i` on the directory of the project to install dependencies 2. Swap placeholders with values in the code. - - Go to the `src` folder and find the `App.tsx` file. - - Enter the `USER_ID` and `TOKEN` for the identity you created. - - Enter the generated `ROOM_ID` to join the room and make sure the user is added to the room to be able to join the room. - - Optional: You can update the display name to match a string value of your choice. - - Save the file. -4. Run `npm run start` + - Go to the `src` folder and find the `App.tsx` file. + - Enter the `USER_ID` and `TOKEN` for the identity you created. + - Enter the generated `ROOM_ID` to join the room and make sure the user is added to the room to be able to join the room. + - Optional: You can update the display name to match a string value of your choice. + - Save the file. +3. Run `npm run start` From 3b7f3b2dd0b496b17e633dc9aec588ccd55dd2b3 Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 13:38:15 -0700 Subject: [PATCH 7/9] ui-library-quickstart-teams-interop-meeting-chat readme update --- .../README.md | 37 +++++++++---------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/ui-library-quickstart-teams-interop-meeting-chat/README.md b/ui-library-quickstart-teams-interop-meeting-chat/README.md index d8921ee4..231ab7d4 100644 --- a/ui-library-quickstart-teams-interop-meeting-chat/README.md +++ b/ui-library-quickstart-teams-interop-meeting-chat/README.md @@ -1,10 +1,10 @@ --- page_type: sample languages: -- javascript + - javascript products: -- azure -- azure-communication-services + - azure + - azure-communication-services --- # Overview @@ -14,11 +14,11 @@ This sample is part of tutorials for: - [Enable file sharing with UI Library in Teams Interoperability Chat](https://docs.microsoft.com/azure/communication-services/tutorials/file-sharing-tutorial-interop-chat) - [Enable Inline Image with UI Library in Teams Interoperability Chat](https://docs.microsoft.com/azure/communication-services/tutorials/inline-image-tutorial-interop-chat) -And this sample is built based on the [CallWithChat Compsite](https://azure.github.io/communication-ui-library/?path=/docs/composites-call-with-chat-basicexample--basic-example) from our storybook page. +And this sample is built based on the [CallWithChat Composite](https://azure.github.io/communication-ui-library/?path=/story/composites-call-with-chat-basicexample-basic-example--basic-example) from our storybook page. ## Prerequisites -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . - [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - 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 - 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). @@ -28,14 +28,14 @@ And this sample is built based on the [CallWithChat Compsite](https://azure.gith 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. - - Replace the following values: - - `ENDPOINT_URL` of your Communication Resource - - `USER_ID` of your Communication User - - `TEAMS_MEETING_LINK` you would be using for this sample - - `TOKEN` of your Communication Resource - - Save the file. -4. Run `npm run start` + - Go to the `src` folder and find the `App.tsx` file. + - Replace the following values: + - `ENDPOINT_URL` of your Communication Resource + - `USER_ID` of your Communication User + - `TEAMS_MEETING_LINK` you would be using for this sample + - `TOKEN` of your Communication Resource + - Save the file. +3. Run `npm run start` Open your browser to ` http://localhost:3000`. You should see the following: @@ -52,11 +52,10 @@ then click on the chat button to reveal the chat panel: Feel free to style the composites to your desired size and layout inside of your application. ## Enable Rich Text Editor - By default, this Quickstart 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. + +By default, this Quickstart 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. Open your browser to `http://localhost:3000`. You should see the following with the Rich Text Editor enabled: -![Meeting Chat with Rich Text Editor](../media/interop-meeting-chat-with-rich-text-editor.png) \ No newline at end of file +![Meeting Chat with Rich Text Editor](../media/interop-meeting-chat-with-rich-text-editor.png) From 255c8fdaa6ee6010a8a84a1065e998fb4c5613d7 Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 13:59:46 -0700 Subject: [PATCH 8/9] More readme updates --- ui-library-quickstart-ui-components/README.md | 21 +++++++++---------- .../README.md | 13 ++++++------ 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/ui-library-quickstart-ui-components/README.md b/ui-library-quickstart-ui-components/README.md index 56e6b59a..b7cf65d3 100644 --- a/ui-library-quickstart-ui-components/README.md +++ b/ui-library-quickstart-ui-components/README.md @@ -1,20 +1,20 @@ --- page_type: sample languages: -- javascript + - javascript products: -- azure -- azure-communication-services + - azure + - azure-communication-services --- # Get Started with UI Components -For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with UI Components](https://azure.github.io/communication-ui-library/?path=/docs/quickstarts-uicomponents--page) +For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with UI Components](https://azure.github.io/communication-ui-library/?path=/docs/components-get-started--docs) ## Prerequisites -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. ## Run the code @@ -27,11 +27,10 @@ Open your browser to ` http://localhost:3000`. You should see the following: Feel free to style the components to your desired size and layout inside of your application. Check out the stateful client quickstart to learn how to connect the components to the communications data plane. ## Enable Rich Text Editor - By default, this Quickstart 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 `ChatComponents.tsx` file. - - Change the value for `richTextEditorEnabled` to true. + +By default, this Quickstart 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 `ChatComponents.tsx` file. - Change the value for `richTextEditorEnabled` to true. Open your browser to `http://localhost:3000`. You should see the following with the Rich Text Editor enabled: ![Components with Rich Text Editor](../media/ComponentsWithRichTextEditor.png) diff --git a/ui-library-starting-with-calling-stateful/README.md b/ui-library-starting-with-calling-stateful/README.md index 7ce5703e..494d1244 100644 --- a/ui-library-starting-with-calling-stateful/README.md +++ b/ui-library-starting-with-calling-stateful/README.md @@ -1,21 +1,20 @@ --- page_type: sample languages: -- javascript + - javascript products: -- azure -- azure-communication-services + - azure + - azure-communication-services --- # Get Started with Stateful Call Client -For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Stateful Call Client](https://azure.github.io/communication-ui-library/?path=/story/quickstarts-statefulclient--page) - +For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Stateful Call Client](https://azure.github.io/communication-ui-library/?path=/docs/stateful-client-get-started-call--docs) ## Prerequisites -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource). - 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). From efabfea66f2bf3cf6561d48b2b4c9d4ba8c08b62 Mon Sep 17 00:00:00 2001 From: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com> Date: Fri, 11 Jul 2025 14:28:40 -0700 Subject: [PATCH 9/9] More Readme updates --- .../README.md | 17 +++++++------ ui-library-transfer/README.md | 24 +++++++++---------- 2 files changed, 20 insertions(+), 21 deletions(-) diff --git a/ui-library-starting-with-chat-stateful/README.md b/ui-library-starting-with-chat-stateful/README.md index 8327ed28..b3d01239 100644 --- a/ui-library-starting-with-chat-stateful/README.md +++ b/ui-library-starting-with-chat-stateful/README.md @@ -9,12 +9,12 @@ products: # Get Started with Stateful Chat Client -For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Stateful Chat Client](https://azure.github.io/communication-ui-library/?path=/story/quickstarts-statefulclient--page) +For full instructions on how to build this code sample from scratch, look at [Quickstart: Get Started with Stateful Chat Client](https://azure.github.io/communication-ui-library/?path=/docs/stateful-client-get-started-chat--docs) ## Prerequisites - An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (16.x.x is recommended). +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource). - 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). @@ -30,13 +30,12 @@ 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, this Quickstart 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 `ChatComponentsStateful.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](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. + +By default, this Quickstart 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 `ChatComponentsStateful.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](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. Open your browser to `http://localhost:3000`. You should see the following with the Rich Text Editor enabled: ![Chat Stateful with Rich Text Editor](../media/ChatStatefulWithRichTextEditor.png) diff --git a/ui-library-transfer/README.md b/ui-library-transfer/README.md index cb64c208..0cd8fcef 100644 --- a/ui-library-transfer/README.md +++ b/ui-library-transfer/README.md @@ -1,10 +1,10 @@ --- page_type: sample languages: -- javascript + - javascript products: -- azure -- azure-communication-services + - azure + - azure-communication-services --- # Get Started with Composites - Handle transfer request @@ -13,20 +13,20 @@ This sample showcases how Call Composites can be used to handle transfer request ## Prerequisites -- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . -- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions (8.11.1 and 10.14.1 recommended). +- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F) . +- [Node.js](https://nodejs.org/en/) Active LTS and Maintenance LTS versions. - 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 -- Two Teams users in the same tenant as the Azure account. The first Teams user should be called via ad hoc calling. During the call, the first Teams user should transfer you to the second Teams user. Note that you will need to obtain the first Teams user's id in order to call them via ad hoc calling. To learn more about ad hoc calling, go to [storybook documentation for ad hoc calling](https://azure.github.io/communication-ui-library/?path=/docs/adhoc-calling--page). +- Two Teams users in the same tenant as the Azure account. The first Teams user should be called via ad hoc calling. During the call, the first Teams user should transfer you to the second Teams user. Note that you will need to obtain the first Teams user's id in order to call them via ad hoc calling. To learn more about ad hoc calling, go to [storybook documentation for ad hoc calling](https://azure.github.io/communication-ui-library/?path=/docs/concepts-ad-hoc-calling--docs). ## 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 `INPUTS.tsx` file. - - Replace the values for the the `userIdentity` and `userToken` for the identity you created in Azure Portal in the `Prerequisites` step. - - Replace the `participantIds` with an array of one Teams user id. - - Update the display name to a name of your choice. - - Save the file. + - Go to the `src` folder and find the `INPUTS.tsx` file. + - Replace the values for the the `userIdentity` and `userToken` for the identity you created in Azure Portal in the `Prerequisites` step. + - Replace the `participantIds` with an array of one Teams user id. + - Update the display name to a name of your choice. + - Save the file. 3. Run `npm run start` Open your browser to . You should see the following: @@ -34,4 +34,4 @@ Open your browser to . You should see the following: Click `Start Call` button to start the call. The following link shows a video of what the transfer process should look like when a Teams user transfers you: -[Transfer process sample video](../media/transfer-call-accepted.mp4) \ No newline at end of file +[Transfer process sample video](../media/transfer-call-accepted.mp4)