Merge pull request #268889 from vac0224/vc-chat-hero-sample

Update chat-hero-sample.md

Author: v-dirichards

articles/communication-services/samples/chat-hero-sample.md

@@ -7,7 +7,7 @@ manager: chpalm
 services: azure-communication-services
 
 ms.author: ektrishi
-ms.date: 06/30/2021
+ms.date: 6/30/2021
 ms.topic: overview
 ms.service: azure-communication-services
 ms.subservice: chat
@@ -21,7 +21,7 @@ ms.subservice: chat
 
 The Azure Communication Services **Group Chat Hero Sample** demonstrates how the Communication Services Chat Web SDK can be used to build a group chat experience.
 
-In this Sample quickstart, we'll learn how the sample works before we run the sample on your local machine. We'll then deploy the sample to Azure using your own Azure Communication Services resources.
+In this Sample quickstart, we learn how the sample works before we run the sample on your local machine. We then deploy the sample to Azure using your own Azure Communication Services resources.
 
 
 ## Overview
@@ -32,41 +32,49 @@ Here's what the sample looks like:
 
 :::image type="content" source="./media/chat/landing-page.png" alt-text="Screenshot showing the sample application's landing page.":::
 
-When you press the "Start a Chat" button, the web application fetches a user access token from the server-side application. This token is then used to connect the client app to Azure Communication Services. Once the token is retrieved, you'll be prompted to specify your name and emoji that will represent you in chat.
+When you press **Start a Chat**, the web application fetches a user access token from the server-side application. You then use this token to connect the client app to Azure Communication Services. Once the token is retrieved, the system prompts you to enter your name and choose an emoji to represent you in chat.
 
 :::image type="content" source="./media/chat/pre-chat.png" alt-text="Screenshot showing the application's pre-chat screen.":::
 
-Once you configure your display name and emoji, you can join the chat session. Now you will see the main chat canvas where the core chat experience lives.
+Once you configure your display name and emoji, you can join the chat session. Now you see the main chat canvas where the core chat experience lives.
 
 :::image type="content" source="./media/chat/main-app.png" alt-text="Screenshot showing the main screen of the sample application.":::
 
 Components of the main chat screen:
 
-- **Main Chat Area**: This is the core chat experience where users can send and receives messages. To send messages, you can use the input area and press enter (or use the send button). Chat messages received are categorized by the sender with the correct name and emoji. You will see two types of notifications in the chat area: 1) typing notifications when a user is typing and 2) sent and read notifications for messages.
-- **Header**: This is where the user will see the title of the chat thread and the controls for toggling participant and settings side bars, and a leave button to exit the chat session.
-- **Side Bar**: This is where participants and setting information are shown when toggled using the controls in the header. The participants side bar contains a list of participants in the chat and a link to invite participants to the chat session. The settings side bar allows you to configure the chat thread title.
+- **Main Chat Area**: The core chat experience where users can send and receive messages. To send messages, you can use the input area and press enter (or use the send button). Received chat messages are organized by sender with the correct name and emoji. You see two types of notifications in the chat area: 1) typing notifications when a user is typing and 2) sent and read notifications for messages.
+- **Header**: Where the user sees the title of the chat thread and the controls for toggling participant and settings side bars, and a leave button to exit the chat session.
+- **Side Bar**: Where participants and setting information display when toggled using the controls in the header. The participants side bar contains a list of participants in the chat and a link to invite participants to the chat session. The settings side bar enables you to configure the chat thread title.
 
-Below you'll find more information on prerequisites and steps to set up the sample.
+Complete the following prerequisites and steps to set up the sample.
 
 ## Prerequisites
 
-- [Visual Studio Code (Stable Build)](https://code.visualstudio.com/download)
-- [Node.js (16.14.2 and above)](https://nodejs.org/en/download/)
+- [Visual Studio Code (Stable Build)](https://code.visualstudio.com/download).
+- [Node.js (16.14.2 and above)](https://nodejs.org/en/download/).
 - Create an Azure account with an active subscription. For details, see [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
-- Create an Azure Communication Services resource. For details, see [Create an Azure Communication Resource](../quickstarts/create-communication-resource.md). You'll need to record your resource **connection string** for this quickstart.
+- Create an Azure Communication Services resource. For details, see [Create an Azure Communication Resource](../quickstarts/create-communication-resource.md). Record your resource **connection string** for this quickstart.
 
 ## Before running the sample for the first time
 
-1. Open an instance of PowerShell, Windows Terminal, Command Prompt or equivalent and navigate to the directory that you'd like to clone the sample to.
-2. `git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git`
-3. Get the `Connection String` and `Endpoint URL` from the Azure Portal or by using the Azure CLI. 
+1. Open an instance of PowerShell, Windows Terminal, Command Prompt, or equivalent and navigate to the directory where you'd like to clone the sample to.
+2. Clone the repo using the following CLI string: 
+
+   `git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git`
+
+   Or clone the repo using any method described in [Clone an existing Git repo](https://learn.microsoft.com/azure/devops/repos/git/clone).
+
+3. Get the `Connection String` and `Endpoint URL` from the Azure portal or by using the Azure CLI. 
 
     ```azurecli-interactive
     az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
     ```
 
    For more information on connection strings, see [Create an Azure Communication Services resources](../quickstarts/create-communication-resource.md)
-4. Once you get the `Connection String` and `Endpoint URL`, Add both values to the **Server/appsettings.json** file found under the Chat Hero Sample folder. Input your connection string in the variable: `ResourceConnectionString` and endpoint URL in the variable: `EndpointUrl`.
+4. Once you get the `Connection String`, Add the connection string to the **Server/appsettings.json** file found under the Chat folder. Input your connection string in the variable: `ResourceConnectionString`.
+5. Once you get the `Endpoint`, add the endpoint string to the **Server/appsetting.json** file. Input your endpoint in the variable: `EndpointUrl`.
+6. Get the `identity` from the Azure portal. Select **Identities & User Access Tokens** in the Azure portal. Generate a user with `Chat` scope.
+7. Once you get the `identity` string, add the identity string to the **Server/appsetting.json** file. Input your identity string in the variable: `AdminUserId`. This is the server user to add new users to the chat thread.
 
 ## Local run
 
@@ -103,7 +111,7 @@ For more information, see the following articles:
 - Familiarize yourself with our [Chat SDK](../concepts/chat/sdk-features.md)
 - Check out the chat components in the [UI Library](https://azure.github.io/communication-ui-library/)
 
-## Additional reading
+## Related topics
 
 - [Samples](./overview.md) - Find more samples and examples on our samples overview page.
 - [Redux](https://redux.js.org/) - Client-side state management