Skip to content

Commit e019be6

Browse files
committed
Fixed blocking issues
Reviewed and edited all content, ran Acrolinx
1 parent 9213ecf commit e019be6

File tree

4 files changed

+33
-37
lines changed

4 files changed

+33
-37
lines changed

articles/communication-services/tutorials/chat-interop/includes/meeting-interop-features-file-attachment-csharp.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ ms.service: azure-communication-services
1010
This tutorial describes how to enable file attachment support using the Azure Communication Services Chat SDK for C#.
1111

1212
## Sample code
13-
Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/ChatTeamsInteropQuickStart).
13+
Find the finalized code for this tutorial at [GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/ChatTeamsInteropQuickStart).
1414

1515
## Prerequisites
1616

17-
* You went through the quickstart - [Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md).
18-
* Created 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.
19-
* You set up a Teams meeting using your business account and have the meeting URL ready.
20-
* You have the Chat SDK for C# (@azure/communication-chat) 1.3.0 or the latest. See [here](https://www.nuget.org/packages/Azure.Communication.Chat).
17+
* Complete the quickstart [Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md).
18+
* Create an Azure Communication Services resource as described in [Create an Azure Communication Services resource](../../../quickstarts/create-communication-resource.md). You need to **record your connection string** for this tutorial.
19+
* Set up a Teams meeting using your business account and have the meeting URL ready.
20+
* Download the Chat SDK for C# (@azure/communication-chat) 1.3.0 or the latest. See [Azure Communication Chat client library](https://www.nuget.org/packages/Azure.Communication.Chat).
2121

2222
## Handle file attachments
2323

@@ -57,7 +57,7 @@ For example, the following JSON shows what `ChatAttachment` might look like for
5757
]
5858
```
5959

60-
Now let's go back to event handler we created in previous [quickstart](../../../quickstarts/chat/meeting-interop.md) to add some extra logic to handle attachments with `ChatAttachmentType` of `file`:
60+
Now let's go back to the event handler we created in previous [quickstart](../../../quickstarts/chat/meeting-interop.md) and add some extra logic to handle attachments with `ChatAttachmentType` of `file`:
6161

6262
```csharp
6363

@@ -89,7 +89,6 @@ await foreach (ChatMessage message in allMessages)
8989

9090
Specifically, for each file attachment, we get the `previewUrl` and construct a list of URLs in the `for loop`. Then we embed the string along with the chat message content.
9191

92-
9392
## Handle image attachments
9493

9594
You need to handle image attachments differently than standard `file` attachments. Image attachments have the `ChatAttachmentType` of `image`, which requires the communication token to retrieve either the preview or full-size images.
@@ -121,5 +120,4 @@ foreach (ChatAttachment imageAttachment in imageAttachments)
121120
}
122121
```
123122

124-
Now your support image attachments.
125-
123+
Now your app supports image attachments.

articles/communication-services/tutorials/chat-interop/includes/meeting-interop-features-file-attachment-javascript.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Sa
2121

2222
## Goals
2323

24-
1. Render file attachment in the message thread. Each file attachment card has an **Open** button.
25-
2. Render image attachments as inline images.
24+
- Render file attachment in the message thread. Each file attachment card has an **Open** button.
25+
- Render image attachments as inline images.
2626

2727
## Handle file attachments
2828

@@ -215,22 +215,22 @@ npm start
215215

216216
2. Now let's send some file attachments from Teams client like this:
217217

218-
:::image type="content" source="./media/meeting-interop-features-file-attachment-1.png" alt-text="A screenshot of Teams client shown a sent message with three file attachments.":::
218+
:::image type="content" source="./media/meeting-interop-features-file-attachment-1.png" alt-text="A screenshot of Teams client showing a sent message with three file attachments.":::
219219

220220
3. Then you should see the new message being rendered along with file attachments:
221221

222-
:::image type="content" source="./media/meeting-interop-features-file-attachment-2.png" alt-text="A screenshot of sample app shown a received incoming message with three file attachments.":::
222+
:::image type="content" source="./media/meeting-interop-features-file-attachment-2.png" alt-text="A screenshot of sample app showing a received incoming message with three file attachments.":::
223223

224224

225225
## Handle image attachments
226226

227227
Image attachments need to be treated differently than standard `file` attachments. Image attachments have the `attachmentType` of `image`, which requires the communication token to retrieve either the preview or full-size images.
228228

229-
Before continuing, complete the tutorial that demonstrates [how you can enable inline image support in your chat app](../meeting-interop-features-inline-image.md). This tutorial desribes how to fetch images that require a communication token in the request header. Upon receiving the image blob, we need to create an `ObjectUrl` that points to this blob. Then we inject this URL to `src` attribute of each inline image.
229+
Before continuing, complete the tutorial that demonstrates [how to enable inline image support in your chat app](../meeting-interop-features-inline-image.md). This tutorial describes how to fetch images that require a communication token in the request header. Upon receiving the image blob, we need to create an `ObjectUrl` that points to this blob. Then we inject this URL into the `src` attribute of each inline image.
230230

231231
Now you're familiar with how inline images work, and it's easy to render image attachments just like a regular inline image.
232232

233-
First, inject an `image` tag to message content whenever there's an image attachment:
233+
First, inject an `image` tag into message content whenever there's an image attachment:
234234

235235
```js
236236
async function renderReceivedMessage(event) {
@@ -295,7 +295,7 @@ function fetchPreviewImages(attachments) {
295295
});
296296
}
297297
```
298-
This function needs a `tokenString` so we need to have a global copy of it and initialize in `init()` as demonstrated in the following code snippet:
298+
This function needs a `tokenString` so we need a global copy initialized in `init()` as demonstrated in the following code snippet:
299299

300300
```js
301301
var tokenString = '';
@@ -319,12 +319,12 @@ Now you have image attachment support. Continue to run the code and see it in ac
319319

320320
1. Send some image attachments from Teams client like this:
321321

322-
:::image type="content" source="./media/meeting-interop-features-file-attachment-3.png" alt-text="A screenshot of Teams client shown a send box with an image attachment uploaded.":::
322+
:::image type="content" source="./media/meeting-interop-features-file-attachment-3.png" alt-text="A screenshot of Teams client showing a send box with an image attachment uploaded.":::
323323

324324
2. Upon sending the image attachment, notice that it becomes an inline image on the Teams client side:
325325

326-
:::image type="content" source="./media/meeting-interop-features-file-attachment-4.png" alt-text="A screenshot of Teams client shown a message with the image attachment sent to the other participant.":::
326+
:::image type="content" source="./media/meeting-interop-features-file-attachment-4.png" alt-text="A screenshot of Teams client showing a message with the image attachment sent to the other participant.":::
327327

328328
3. Return to the sample app and make sure the same image is rendered:
329329

330-
:::image type="content" source="./media/meeting-interop-features-file-attachment-5.png" alt-text="A screenshot of sample app shown an incoming message with one inline image rendered.":::
330+
:::image type="content" source="./media/meeting-interop-features-file-attachment-5.png" alt-text="A screenshot of sample app showing an incoming message with one inline image rendered.":::

articles/communication-services/tutorials/chat-interop/meeting-interop-features-file-attachment.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,27 @@ zone_pivot_groups: acs-interop-chat-tutorial-js-csharp
1414

1515
# Tutorial: Enable file attachment support in your Chat app
1616

17-
The Chat SDK works seamlessly with Microsoft Teams in the context of a meeting. File attachments can only be sent by a Teams user to an Azure Communication Services user. Note that sending file attachments from Azure Communication Services user to Teams user isn't currently supported, see the current capabilities of [Teams Interop Chat](../../concepts/interop/guest/capabilities.md) for details.
17+
The Chat SDK works seamlessly with Microsoft Teams in the context of a meeting. Only a Teams user can send file attachments to an Azure Communication Services user. An Azure Communication Services user can't send file attachments to a to Teams user. For the current capabilities, see [Teams Interop Chat](../../concepts/interop/guest/capabilities.md).
1818

1919
## Add file attachment support
2020

21-
The Chat SDK provides `previewUrl` for each file attachment. Specifically, the `previewUrl` provides a link to a webpage on the SharePoint where the user can see the content of the file, edit the file and download the file if permission allows.
21+
The Chat SDK provides `previewUrl` for each file attachment. Specifically, the `previewUrl` links to a webpage on SharePoint where the user can see the content of the file, edit the file, and download the file if permission allows.
2222

23-
You should be aware of couple constraints that come with this feature:
23+
Some constraints associated with this feature:
2424

25-
1. The Teams admin of the sender's tenant could impose policies that limits or disable this feature entirely. For example, the Teams admin could disable certain permissions (such as "Anyone") that could cause the file attachment URLs (`previewUrl`) to be inaccessible.
26-
2. We currently only support the following file permissions:
27-
- "Anyone," and
28-
- "People you choose" (with email address)
25+
- The Teams admin of the sender's tenant could impose policies that limit or disable this feature entirely. For example, the Teams admin could disable certain permissions (such as "Anyone") that could cause the file attachment URL (`previewUrl`) to be inaccessible.
26+
- We currently support only these two file permissions:
27+
- "Anyone," and
28+
- "People you choose" (with email address)
2929

30-
The Teams user should be made aware of that all other permissions (such as "People in your organization") aren't supported. The Teams user should double check if the default permission is supported after uploading the file on their Teams client.
31-
3. The direct download URL (`url`) isn't supported.
30+
Let your Teams users know that all other permissions (such as "People in your organization") aren't supported. Your Teams users should double check to make sure the default permission is supported after uploading the file on their Teams client.
31+
- The direct download URL (`url`) isn't supported.
3232

33-
In addition to regular files (with `AttachmentType` of `file`), the Chat SDK also provides the `AttachmentType` of `image`. Use it for image attachments that mirror the behavior of how Microsoft Teams client converts image attachment to inline images at the UI layer. For more information, see [Handle image attachments](#handle-image-attachments).
33+
In addition to regular files (with `AttachmentType` of `file`), the Chat SDK also provides the `AttachmentType` of `image`. Azure Communication Services users can attach images in a way that mirrors the behavior of how Microsoft Teams client converts image attachment to inline images at the UI layer. For more information, see [Handle image attachments](#handle-image-attachments).
3434

35-
Images added via "Upload from this device" renders on Teams side, and Chat SDK returns such attachments as `image`. For images uploaded via "Attach cloud files" however, images are treated as regular files on the Teams side, so Chat SDK returns such attachments as `file`.
35+
Azure Communication Services users can add images via **Upload from this device**, which renders on the Teams side and Chat SDK returns such attachments as `image`. For images uploaded via **Attach cloud files** however, images are treated as regular files on the Teams side, so Chat SDK returns such attachments as `file`.
3636

37-
Also note that only files uploaded via drag-and-drop or via attachment menu of "Upload from this device" and "Attach cloud files" are supported. Some messages with embedded media (such as video clips, audio messages, weather cards, and so on) are adaptive card, which currently isn't supported.
37+
Also note that Azure Communication Services users can only upload files using drag-and-drop or via the attachment menu commands **Upload from this device** and **Attach cloud files**. Some messages with embedded media (such as video clips, audio messages, weather cards, and so on) are *adaptive card*, which currently isn't supported. For more information, see [Overview of adaptive cards for Microsoft Teams](/power-automate/overview-adaptive-cards.md)
3838

3939

4040
::: zone pivot="programming-language-javascript"

articles/communication-services/tutorials/chat-interop/meeting-interop-features-inline-image.md

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Enable Inline Image Support in your Chat app
33
titleSuffix: An Azure Communication Services quickstart
4-
description: In this tutorial, you learn how to enable inline image interoperability with the Azure Communication Chat SDK.
4+
description: This tutorial describes how to enable inline image interoperability with the Azure Communication Chat SDK.
55
author: jpeng-ms
66
ms.author: jopeng
77
ms.date: 03/27/2023
@@ -14,13 +14,13 @@ zone_pivot_groups: acs-js-csharp
1414

1515
# Tutorial: Enable inline image support in your Chat app
1616

17-
The Chat SDK is designed to work with Microsoft Teams seamlessly. 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#.
17+
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#.
1818

1919
## Add inline image support
2020

21-
Inline images are images that are copied and pasted directly into the send box of the Teams client. For images that were uploaded via 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.
21+
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.
2222

23-
The Chat SDK for JavaScript provides `previewUrl` and `url` for each inline image. Note that some GIF images fetched from `previewUrl` might not be animated, and a static preview image may be returned instead. Developers are expected to use the `url` if the intention is to fetch animated images only.
23+
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.
2424

2525

2626
::: zone pivot="programming-language-javascript"
@@ -34,8 +34,6 @@ The Chat SDK for JavaScript provides `previewUrl` and `url` for each inline imag
3434

3535
## Next steps
3636

37-
For more information, see the following articles:
38-
3937
- Learn more about other [supported interoperability features](../../concepts/interop/guest/capabilities.md)
4038
- Check out our [chat hero sample](../../samples/chat-hero-sample.md)
4139
- Learn more about [how chat works](../../concepts/chat/concepts.md)

0 commit comments

Comments
 (0)