Web UI library quickstarts updates

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
 

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/).

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 <http://localhost:3000>. 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.

ui-library-quickstart-composites-with-dependency-isolation/README.md

@@ -14,21 +14,21 @@ 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).
 
 ## 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.
+   - 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.
 

ui-library-quickstart-composites/README.md

@@ -1,46 +1,45 @@
 ---
 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).
 
 ## 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.
-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)
 
 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)

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 <USER_ID> <ROOM_ID>` 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 <USER_ID> <ROOM_ID>` 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`