edit pass: two-chat-sdk-tutorials

paulth1 · paulth1 · commit 49a1b3b40bba · 2024-05-06T11:39:50.000-07:00
diff --git a/articles/communication-services/tutorials/chat-interop/includes/meeting-interop-features-inline-image-receiving-javascript.md b/articles/communication-services/tutorials/chat-interop/includes/meeting-interop-features-inline-image-receiving-javascript.md
@@ -7,38 +7,39 @@ ms.topic: include
 ms.service: azure-communication-services
 ---
 
-In this tutorial, you learn how to enable inline image support using the Azure Communication Services Chat SDK for JavaScript.
+In this tutorial, you learn how to enable inline image support by using the Azure Communication Services Chat SDK for JavaScript.
 
-Inline images are images that are copied and pasted directly into the send box of the Teams client. For images uploaded via the "Upload from this device" menu or via drag-and-drop, such as images dragged directly to the send box in Teams, you need to refer to [this tutorial](../meeting-interop-features-file-attachment.md) as the part of the file sharing feature. (See the section "Handling Image Attachment.") To copy an image, the Teams user can either use their operating system's context menu to copy the image file and then paste it into the send box of their Teams client or use keyboard shortcuts.
+Inline images are images that are copied and pasted directly into the send box of the Teams client. For images uploaded via the **Upload from this device** menu or via drag-and-drop, such as images dragged directly to the send box in Teams, you need to refer to [this tutorial](../meeting-interop-features-file-attachment.md) as the part of the file-sharing feature. (See the section "Handle Image Attachments.")
 
-There are two parts in this tutorial, you learn what you need to do:
+To copy an image, Teams users have two options:
 
-- [when receiving an inline image](#handle-received-inline-images-in-new-message-event)
-- [when sending out an inline image](#handle-sending-inline-images-in-new-message-request)
+- Use their operating system's context menu to copy the image file and then paste it into the send box of their Teams client.
+- Use keyboard shortcuts.
 
+In this tutorial, you learn what you need to do when you:
 
-> [!NOTE] 
-> The ability to send inline images is currently available in public preview and it's only available for JavaScript only. For receiving inline images, it's currently general available and available for both JavaScript and C# in a Teams interoperability chat. 
+- [Receive an inline image](#handle-received-inline-images-in-new-message-event)
+- [Send out an inline image](#handle-sending-inline-images-in-new-message-request)
 
+> [!NOTE]
+> The ability to send inline images is currently available in public preview. It's only available for JavaScript. For receiving inline images, it's currently generally available. It's available for both JavaScript and C# in a Teams interoperability chat.
 
-## Sample Code
+## Sample code
 
 Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/join-chat-to-teams-meeting).
 
-## Handle received inline images in new message event
+## Prerequisites
 
-In this section, we learn how we can render inline images embedded in the message content of new message received event.
+* Review the quickstart [Join your Chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md).
+* Create an Azure Communication Services resource. For more information, see [Create an Azure Communication Services resource](../../../quickstarts/create-communication-resource.md). You need to *record your connection string* for this tutorial.
+* Set up a Teams meeting by using your business account and have the meeting URL ready.
+* Use the Chat SDK for JavaScript (@azure/communication-chat) 1.4.0 or latest. For more information, see [Azure Communication Chat client library for JavaScript](https://www.npmjs.com/package/@azure/communication-chat).
 
-### Prerequisites 
+## Handle received inline images in a new message event
 
-* You've gone through the quickstart - [Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md). 
-* Create an Azure Communication Services resource. For details, see [Create an Azure Communication Services resource](../../../quickstarts/create-communication-resource.md). You need to **record your connection string** for this tutorial.
-* You've set up a Teams meeting using your business account and have the meeting URL ready.
-* You're using the Chat SDK for JavaScript (@azure/communication-chat) 1.4.0 or latest. See [here](https://www.npmjs.com/package/@azure/communication-chat).
+In this section, you learn how you can render inline images embedded in the message content of a new message received event.
 
-
-
-In the [quickstart](../../../quickstarts/chat/meeting-interop.md), we've created an event handler for `chatMessageReceived` event, which would be trigger when we receive a new message from the Teams user. We have also appended incoming message content to `messageContainer` directly upon receiving the `chatMessageReceived` event from the `chatClient` like this:
+In the [quickstart](../../../quickstarts/chat/meeting-interop.md), you created an event handler for the `chatMessageReceived` event, which is triggered when you receive a new message from the Teams user. You also append incoming message content to `messageContainer` directly upon receiving the `chatMessageReceived` event from the `chatClient`, like this:
 
 ```js
 chatClient.on("chatMessageReceived", (e) => {
@@ -62,7 +63,7 @@ async function renderReceivedMessage(message) {
    messagesContainer.innerHTML = messages;
 }
 ```
-From incoming event of type `ChatMessageReceivedEvent`, there's a property named `attachments`, which contains information about inline image, and it's all we need to render inline images in our UI:
+From the incoming event of type `ChatMessageReceivedEvent`, a property named `attachments` contains information about the inline image. It's all you need to render inline images in your UI:
 
 ```js
 export interface ChatMessageReceivedEvent extends BaseChatMessageEvent {
@@ -98,7 +99,7 @@ export interface ChatAttachment {
 export type ChatAttachmentType = "image" | "unknown";
 ```
 
-Now let's go back to the previous code to add some extra logic like the following code snippets: 
+Now let's go back to the previous code to add some extra logic like the following code snippets:
 
 ```js
 chatClient.on("chatMessageReceived", (e) => {
@@ -178,10 +179,9 @@ async function fetchPreviewImages(attachments) {
 }
 ```
 
-Noticing in this example, we've created two helper functions - `fetchPreviewImages` and `setImgHandler` - where the first one fetches preview image directly from the `previewURL` provided in each `ChatAttachment` object with an auth header. Similarly, we set up a `onclick` event for each image in the function `setImgHandler`, and in the event handler, we fetch a full scale image from property `url` from the `ChatAttachment` object with an auth header.
-
+In this example, you created two helper functions, `fetchPreviewImages` and `setImgHandler`. The first one fetches the preview image directly from the `previewURL` provided in each `ChatAttachment` object with an auth header. Similarly, you set up a `onclick` event for each image in the function `setImgHandler`. In the event handler, you fetch a full-scale image from property `url` from the `ChatAttachment` object with an auth header.
 
-Another thing we need to do is to expose token on to the global level since we need to construct an auth header with it. So we need to modify the following code: 
+Now you need to expose the token on to the global level because you need to construct an auth header with it. You need to modify the following code:
 
 ```js
 // new variable for token string
@@ -205,7 +205,7 @@ async function init() {
 
 ```
 
-To show full scale image in an overlay, we need to add a new component as well:
+To show the full-scale image in an overlay, you also need to add a new component:
 
 ```html
 
@@ -266,7 +266,7 @@ With some CSS:
 }
 ```
 
-Now we have an overlay set up, it's time to work on the logic to render full scale images. Recall that we've created an `onClick` event handler to call a function `fetchFullScaleImage`:
+Now that you have an overlay set up, it's time to work on the logic to render full-scale images. Recall that you created an `onClick` event handler to call a function `fetchFullScaleImage`:
 
 ```js
 
@@ -297,7 +297,7 @@ function fetchFullScaleImage(e, imageAttachments) {
 
 ```
 
-One last thing we want to add is the ability to dismiss the overlay when clicking on the image:
+One last thing you want to add is the ability to dismiss the overlay when the image is clicked:
 
 ```js
 loadingImageOverlay.addEventListener('click', () => {
@@ -306,77 +306,66 @@ loadingImageOverlay.addEventListener('click', () => {
 
 ```
 
-Now we've concluded all the changes we need to render inline images for messages coming from real time notifications.
+Now, you've made all the changes you need to render inline images for messages that come from real-time notifications.
 
+### Run the code
 
-### Run the code 
-
-Webpack users can use the `webpack-dev-server` to build and run your app. Run the following command to bundle your application host on a local webserver:
+Webpack users can use `webpack-dev-server` to build and run your app. Run the following command to bundle your application host on a local webserver:
 
 ```console
 npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map
 ```
 
 ### Demo
-Open your browser and navigate to `http://localhost:8080/`. Enter the meeting URL and the thread ID. Send some inline images from Teams client like this:
+Open your browser and go to `http://localhost:8080/`. Enter the meeting URL and the thread ID. Send some inline images from the Teams client.
 
-:::image type="content" source="./media/meeting-interop-features-inline-3.png" alt-text="A screenshot of Teams client shown a sent message reads: Here are some ideas, let me know what you think! The message also contains two inline images of room interior mockups.":::
+:::image type="content" source="./media/meeting-interop-features-inline-3.png" alt-text="Screenshot that shows a Teams client with a sent message that reads: Here are some ideas, let me know what you think! The message also contains two inline images of room interior mockups.":::
 
-Then you should see the new message being rendered along with preview images:
+Then you should see the new message rendered along with preview images.
 
-:::image type="content" source="./media/meeting-interop-features-inline-1.png" alt-text="A screenshot of sample app shown an incoming message with inline images being presented.":::
+:::image type="content" source="./media/meeting-interop-features-inline-1.png" alt-text="Screenshot that shows a sample app with an incoming message with inline images.":::
 
-Upon clicking the preview image by the Azure Communication Services user, an overlay would be shown with the full scale image sent by the Teams user:
+After the Azure Communication Services user selects the preview image, an overlay appears with the full-scale image sent by the Teams user.
 
-:::image type="content" source="./media/meeting-interop-features-inline-2.png" alt-text="A screenshot of sample app showing an overlay of a full scale image being presented.":::
+:::image type="content" source="./media/meeting-interop-features-inline-2.png" alt-text="Screenshot that shows a sample app with an overlay of a full-scale image.":::
 
-
- ## Handle sending inline images in new message request
+## Handle sending inline images in a new message request
 
 [!INCLUDE [Public Preview Notice](../../../includes/public-preview-include.md)]
 
-In addition to handle messages with inline images, Chat SDK for JavaScript also provides a solution to allow the Communication User to send inline images to the Microsoft Teams user in an interoperability chat.
- 
-
-### Prerequisites 
-
-* You've gone through the previous section for [handling-received-inline-images-in-new-message-event](#handle-received-inline-images-in-new-message-event)
-* You're using the Chat SDK for JavaScript (@azure/communication-chat) 1.6.0-beta.1 or latest. See [here](https://www.npmjs.com/package/@azure/communication-chat).
+In addition to handling messages with inline images, the Chat SDK for JavaScript also provides a solution to allow the communication user to send inline images to the Microsoft Teams user in an interoperability chat.
 
-
-Let's take a look of the new API from `ChatThreadClient`:
+Let's take a look at the new API from `ChatThreadClient`:
 
 ```js
 var imageAttachment = await chatThreadClient.uploadImage(blob, file.name, {
   "onUploadProgress": reportProgressCallback
 });
 ```
 
-Noticing the API takes in an image blob, file name string, and a function callback that reports upload progress.
-
-Therefore, to send an image to other chat participant, we need to:
+The API takes in an image blob, file name string, and a function callback that reports upload progress.
 
-1. Upload the image via `uploadImage` API from `ChatThreadClient`, save the returned object to somewhere
-2. Compose the message content and set attachment to the returned object we have saved in previous step
-3. Send the new message via `sendMessage` API from `ChatThreadClient`
-4. Done!
+To send an image to other chat participant, you need to:
 
+1. Upload the image via the `uploadImage` API from `ChatThreadClient`, and save the returned object.
+1. Compose the message content and set an attachment to the returned object you saved in the previous step.
+1. Send the new message via the `sendMessage` API from `ChatThreadClient`.
 
-So let's begin to create a new file picker that accepts images like the following:
+Let's create a new file picker that accepts images:
 
 ```html
 <label for="myfile">Attach images:</label>
 <input id="upload" type="file" id="myfile" name="myfile" accept="image/*" multiple>
 <input style="display: none;" id="upload-result"></input>
 ```
 
-Next we need to set up an event licenser for when there's a state change:
+Now set up an event licenser for when there's a state change:
 
 ```js
 document.getElementById("upload").addEventListener("change", uploadImages);
 ```
 
-Here we need to create a new function for when state changes:
+You need to create a new function for when state changes:
 
 ```js
 var uploadedImageModels = [];
@@ -405,9 +394,9 @@ async function uploadImage(file) {
 }
 ```
 
-Noticing in this example, we have created a `FileReader` to read each image as `base64` encoded images, then create a `Blob` before calling the ChatSDK API to upload them. Also notice how we created a global `uploadedImageModels` to save the data models of uploaded images from the ChatSDK.
+In this example, you created a `FileReader` to read each image as `base64`-encoded images, then create a `Blob` before calling the ChatSDK API to upload them. You created a global `uploadedImageModels` to save the data models of uploaded images from the Chat SDK.
 
-Lastly we need to modify the sendMessageButton event listener we created previously to attach images we just uploaded.
+Lastly, you need to modify the `sendMessageButton` event listener you created previously to attach the images you uploaded.
 
 ```js
 sendMessageButton.addEventListener("click", async () => {
@@ -444,30 +433,30 @@ sendMessageButton.addEventListener("click", async () => {
 
 ```
 
-That's it, now let's run the code and see it in action. 
+That's it. Now let's run the code and see it in action.
 
 ### Run the code 
 
-Webpack users can use the `webpack-dev-server` to build and run your app. Run the following command to bundle your application host on a local webserver:
+Webpack users can use `webpack-dev-server` to build and run your app. Run the following command to bundle your application host on a local webserver:
 
 ```console
 npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map
 ```
 
 ### Demo
 
-Open your browser and navigate to `http://localhost:8080/`. Noticing we have a new section in the send box to attach images:
+Open your browser and go to `http://localhost:8080/`. You have a new section in the send box to attach images.
 
-:::image type="content" source="./media/meeting-interop-features-inline-5.png" alt-text="A screenshot of sample app with a newly add section to attach images.":::
+:::image type="content" source="./media/meeting-interop-features-inline-5.png" alt-text="Screenshot that shows a sample app with a newly added section to attach images.":::
 
-Then we can select images we wanted to attach:
+Next, you can select the images you want to attach.
 
-:::image type="content" source="./media/meeting-interop-features-inline-6.png" alt-text="A screenshot of a file picker that shows a list of images user can attach to their message.":::
+:::image type="content" source="./media/meeting-interop-features-inline-6.png" alt-text="Screenshot that shows a file picker with a list of images users can attach to their messages.":::
 
-:::image type="content" source="./media/meeting-interop-features-inline-7.png" alt-text="A screenshot of the sample app showing 2 images attached.":::
+:::image type="content" source="./media/meeting-interop-features-inline-7.png" alt-text="Screenshot that shows the sample app with two images attached.":::
 
-The Teams user should now receive the image we just sent out when they click on send button:
+The Teams user should now receive the image you just sent out when they select **Send**.
 
-:::image type="content" source="./media/meeting-interop-features-inline-8.png" alt-text="A screenshot of the sample app showing a sent message with 2 images embedded.":::
+:::image type="content" source="./media/meeting-interop-features-inline-8.png" alt-text="Screenshot that shows the sample app with a sent message with two embedded images.":::
 
-:::image type="content" source="./media/meeting-interop-features-inline-9.png" alt-text="A screenshot of Teams client showing a received message with 2 image embedded.":::
+:::image type="content" source="./media/meeting-interop-features-inline-9.png" alt-text="Screenshot that shows the Teams client with a received message with two embedded images.":::
diff --git a/articles/communication-services/tutorials/chat-interop/meeting-interop-features-inline-image.md b/articles/communication-services/tutorials/chat-interop/meeting-interop-features-inline-image.md
@@ -1,5 +1,5 @@
 ---
-title: Enable Inline Image Support in your Chat app
+title: Enable inline image support in your Chat app
 titleSuffix: An Azure Communication Services quickstart
 description: This tutorial describes how to enable inline image interoperability with the Azure Communication Chat SDK.
 author: jpeng-ms
@@ -14,19 +14,18 @@ zone_pivot_groups: acs-js-csharp
 
 # Tutorial: Enable inline image support in your Chat app
 
-The Chat SDK is designed to work with Microsoft Teams seamlessly. Specifically, Chat SDK provides a solution to receive inline images and send inline images to users from Microsoft Teams. 
+The Chat SDK is designed to work with Microsoft Teams seamlessly. Specifically, Chat SDK provides a solution to receive inline images and send inline images to users from Microsoft Teams.
 
 ::: zone pivot="programming-language-javascript"
 [!INCLUDE [Teams Inline Image Interop with JavaScript SDK](./includes/meeting-interop-features-inline-image-receiving-javascript.md)] 
 ::: zone-end
 
-::: zone pivot="programming-language-csharp" 
+::: zone pivot="programming-language-csharp"
 [!INCLUDE [Teams Inline Image Interop with C# SDK](./includes/meeting-interop-features-inline-image-receiving-csharp.md)] 
 ::: zone-end
 
-
 ## Next steps
 
-- Learn more about other [supported interoperability features](../../concepts/interop/guest/capabilities.md) 
-- Check out our [chat hero sample](../../samples/chat-hero-sample.md)
-- Learn more about [how chat works](../../concepts/chat/concepts.md)
+- Learn more about other [supported interoperability features](../../concepts/interop/guest/capabilities.md).
+- Check out our [Chat hero sample](../../samples/chat-hero-sample.md).
+- Learn more about [how Chat works](../../concepts/chat/concepts.md).
