Merge pull request #268318 from jpeng-ms/patch-10

[ACS][Chat] Added docs for Image Upload

Author: Court72

articles/communication-services/tutorials/chat-interop/includes/media/meeting-interop-features-inline-5.png

@@ -9,22 +9,33 @@ 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.
 
+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.
+
+There are two parts in this tutorial, you learn what you need to do:
+
+- [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)
+
+
+> [!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. 
+
+
 ## 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).
 
-## Prerequisites 
+## Handle received inline images in new message event
+
+In this section, we learn how we can render inline images embedded in the message content of new message received event.
+
+### Prerequisites 
 
 * 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).
 
-## Goal
-
-1. Be able to render preview images in the message thread
-2. Be able to render full scale image upon click on preview images
-
-## Handle inline images for new messages
 
 
 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:
@@ -97,18 +108,15 @@ chatClient.on("chatMessageReceived", (e) => {
      return;
   }
 
-  if (e.sender.communicationUserId != userId) {
-    renderReceivedMessage(e);
-  } else {
-    renderSentMessage(e.message);
-  }
+  const isMyMessage = e.sender.communicationUserId === userId;
+  renderReceivedMessage(e, isMyMessage);
 });
 
-async function renderReceivedMessage(e) {
+function renderReceivedMessage(e, isMyMessage) {
   const messageContent = e.message;
 
   const card = document.createElement('div');
-  card.className = 'container lighter';
+  card.className = isMyMessage ? "container darker" : "container lighter";
   card.innerHTML = messageContent;
 
   messagesContainer.appendChild(card);
@@ -209,7 +217,7 @@ To show full scale image in an overlay, we need to add a new component as well:
 
 ```
 
-with some CSS:
+With some CSS:
 
 ```css
 
@@ -301,15 +309,15 @@ loadingImageOverlay.addEventListener('click', () => {
 Now we've concluded all the changes we need to render inline images for messages coming 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:
 
 ```console
 npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map
 ```
 
-## Demo
+### 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:
 
 :::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.":::
@@ -320,5 +328,146 @@ Then you should see the new message being rendered along with preview 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:
 
- :::image type="content" source="./media/meeting-interop-features-inline-2.png" alt-text="A screenshot of sample app shown an overlay of a full scale image being presented.":::
+:::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.":::
+
+
+ ## Handle sending inline images in 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).
+
+
+Let's take a look of 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:
+
+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!
+
+
+So let's begin to create a new file picker that accepts images like the following:
+
+```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:
+
+```js
+document.getElementById("upload").addEventListener("change", uploadImages);
+```
+
+Here we need to create a new function for when state changes:
+
+```js
+var uploadedImageModels = [];
+
+async function uploadImages(e) {
+  const files = e.target.files;
+  if (files.length === 0) {
+    return;
+  }
+  for (let key in files) {
+    if (files.hasOwnProperty(key)) {
+        await uploadImage(files[key]);
+    }
+}
+}
+
+async function uploadImage(file) {
+  const buffer = await file.arrayBuffer();
+  const blob = new Blob([new Uint8Array(buffer)], {type: file.type });
+  const url = window.URL.createObjectURL(blob);
+  document.getElementById("upload-result").innerHTML += `<img src="${url}" height="auto" width="100" />`;
+  let uploadedImageModel = await chatThreadClient.uploadImage(blob, file.name, {
+    imageBytesLength: file.size
+  });
+  uploadedImageModels.push(uploadedImageModel);
+}
+```
+
+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.
+
+Lastly we need to modify the sendMessageButton event listener we created previously to attach images we just uploaded.
+
+```js
+sendMessageButton.addEventListener("click", async () => {
+  let message = messagebox.value;
+  let attachments = uploadedImageModels;
+
+    // inject image tags for images we have selected
+  // so they can be treated as inline images
+  // alternatively, we can use some 3rd party libraries 
+  // to have a rich text editor with inline image support
+  message += attachments.map((attachment) => `<img id="${attachment.id}" />`).join("");
+
+  let sendMessageRequest = {
+    content: message,
+    attachments: attachments,
+  };
+
+  let sendMessageOptions = {
+    senderDisplayName: "Jack",
+    type: "html"
+  };
+
+  let sendChatMessageResult = await chatThreadClient.sendMessage(
+    sendMessageRequest,
+    sendMessageOptions
+  );
+  let messageId = sendChatMessageResult.id;
+  uploadedImageModels = [];
+
+  messagebox.value = "";
+  document.getElementById("upload").value = "";
+  console.log(`Message sent!, message id:${messageId}`);
+});
+
+```
+
+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:
+
+```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:
+
+:::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.":::
+
+Then we can select images we wanted 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-7.png" alt-text="A screenshot of the sample app showing 2 images attached.":::
+
+The Teams user should now receive the image we just sent out when they click on send button:
+
+:::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-9.png" alt-text="A screenshot of Teams client showing a received message with 2 image embedded.":::

articles/communication-services/tutorials/chat-interop/includes/media/meeting-interop-features-inline-6.png

@@ -14,21 +14,14 @@ zone_pivot_groups: acs-js-csharp
 
 # Tutorial: Enable inline image support in your Chat app
 
-The Chat SDK works seamlessly with Microsoft Teams in the context of a meeting. Specifically, Chat SDK provides a solution to receive inline images sent by users from Microsoft Teams. Currently this feature is only available in the Chat SDK for JavaScript and C#.
-
-## Add inline image support
-
-Inline images are images that are copied and pasted directly into the send box of the Teams client. For images that were uploaded using the **Upload from this device** menu or via drag-and-drop, such as images dragged directly to the send box in Teams, see [Tutorial: Enable file attachment support in your Chat app](./meeting-interop-features-file-attachment.md) to enable file attachment support as part of the file sharing feature. For images, see the [Handle image attachments](./meeting-interop-features-file-attachment.md#handle-image-attachments) section. 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.
-
-The Chat SDK for JavaScript provides `previewUrl` and `url` for each inline image. Some GIF images fetched from `previewUrl` might not be animated, and a static preview image may be returned instead. Developers need to use the `url` if the intention is to fetch animated images only.
-
+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-javascript.md)] 
+[!INCLUDE [Teams Inline Image Interop with JavaScript SDK](./includes/meeting-interop-features-inline-image-receiving-javascript.md)] 
 ::: zone-end
 
 ::: zone pivot="programming-language-csharp" 
-[!INCLUDE [Teams Inline Image Interop with C# SDK](./includes/meeting-interop-features-inline-image-csharp.md)] 
+[!INCLUDE [Teams Inline Image Interop with C# SDK](./includes/meeting-interop-features-inline-image-receiving-csharp.md)] 
 ::: zone-end