Skip to content

Commit a6d0c4f

Browse files
committed
Minor edits
Fixed some links and my own typo
1 parent b6e242f commit a6d0c4f

File tree

4 files changed

+34
-37
lines changed

4 files changed

+34
-37
lines changed

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ ms.topic: include
77
ms.service: azure-communication-services
88
---
99

10-
In this tutorial, you learn how to enable file attachment support using the Azure Communication Services Chat SDK for C#.
10+
This tutorial describes how to enable file attachment support using the Azure Communication Services Chat SDK for C#.
1111

1212
## Sample code
1313
Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Samples/communication-services-dotnet-quickstarts/tree/main/ChatTeamsInteropQuickStart).
@@ -37,7 +37,7 @@ public readonly partial struct ChatAttachmentType : IEquatable<ChatAttachmentTyp
3737

3838
```
3939

40-
As an example, the following JSON is an example of what `ChatAttachment` might look like for an image attachment and a file attachment when receiving requests from the server side:
40+
For example, the following JSON shows what `ChatAttachment` might look like for an image attachment and a file attachment when receiving requests from the server side:
4141

4242
```json
4343
"attachments": [
@@ -89,14 +89,12 @@ 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-
Now you know how you can handle file attachments.
93-
9492

9593
## Handle image attachments
9694

97-
Image attachments need to be treated differently to standard `file` attachments. Image attachments have the `ChatAttachmentType` of `image`, which requires the communication token to retrieve either the preview or full-size images.
95+
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.
9896

99-
Make sure you went through this tutorial [Enabling inline image support](../meeting-interop-features-inline-image.md) first. To identity image attachments, we need to check if message content contains the same image ID from the attachments.
97+
Before continuing, complete the [Enabling inline image support](../meeting-interop-features-inline-image.md) tutorial. To identity image attachments, we need to find out if the message content contains the same image ID from the attachments.
10098

10199
```csharp
102100
bool isImageAttachment = message.Content.Message.Contains(x.Id);
@@ -123,6 +121,5 @@ foreach (ChatAttachment imageAttachment in imageAttachments)
123121
}
124122
```
125123

126-
127-
That's it! Now we have support for image attachments as well.
124+
Now your support image attachments.
128125

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ ms.topic: include
77
ms.service: azure-communication-services
88
---
99

10-
In this tutorial, you learn how to enable file attachment support using the Azure Communication Services Chat SDK for JavaScript.
10+
This tutorial describes how to enable file attachment support using the Azure Communication Services Chat SDK for JavaScript.
1111

1212
## Sample code
1313
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).
@@ -19,10 +19,10 @@ Find the finalized code of this tutorial on [GitHub](https://github.com/Azure-Sa
1919
* You've set up a Teams meeting using your business account and have the meeting URL ready.
2020
* You're using the Chat SDK for JavaScript (@azure/communication-chat) 1.5.0 or the latest. See [here](https://www.npmjs.com/package/@azure/communication-chat).
2121

22-
## Goal
22+
## Goals
2323

24-
1. Be able to render file attachment in the message thread. Each file attachment card has an "Open" button.
25-
2. Be able to render image attachments as inline images.
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.
2626

2727
## Handle file attachments
2828

@@ -60,7 +60,7 @@ export interface ChatAttachment {
6060
export type ChatAttachmentType = "image" | "file" | "unknown";
6161
```
6262

63-
As an example, the following JSON is an example of what `ChatAttachment` might look like for an image attachment and a file attachment:
63+
For example, the following JSON shows what `ChatAttachment` might look like for an image attachment and a file attachment:
6464

6565
```json
6666
"attachments": [
@@ -80,7 +80,7 @@ As an example, the following JSON is an example of what `ChatAttachment` might l
8080
]
8181
```
8282

83-
Now let's go back to event handler we have created in previous [quickstart](../../../quickstarts/chat/meeting-interop.md) to add some extra logic to handle attachments with `attachmentType` of `file`:
83+
Now let's go back to event handler we created in [Quickstart: Join your chat app to a Teams meeting](../../../quickstarts/chat/meeting-interop.md) and add some extra logic to handle attachments with `attachmentType` of `file`:
8484

8585
```js
8686
chatClient.on("chatMessageReceived", (e) => {
@@ -124,7 +124,7 @@ function renderFileAttachments(attachment) {
124124

125125
```
126126

127-
Let's make sure we add some CSS for the attachment card as well:
127+
Let's make sure we add some CSS for the attachment card:
128128

129129
```css
130130
/* let's make chat popup scrollable */
@@ -193,44 +193,44 @@ Let's make sure we add some CSS for the attachment card as well:
193193

194194
```
195195

196-
That's it all we need for handling file attachments. Next let's run the code.
196+
That's all we need for handling file attachments. Next let's run the code.
197197

198198
## Run the code
199199

200-
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:
200+
For Webpack, you 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:
201201

202202
```console
203203
npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map
204204
```
205205

206-
or
206+
Or:
207207

208208
```console
209209
npm start
210210
```
211211

212212
## File attachment demo
213213

214-
Open your browser and navigate to `http://localhost:8080/`. Enter the meeting URL and the thread ID.
214+
1. Open your browser and navigate to `http://localhost:8080/`. Enter the meeting URL and the thread ID.
215215

216-
Now let's send some file attachments from Teams client like this:
216+
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 shown a sent message with three file attachments.":::
219219

220-
Then you should see the new message being rendered along with file attachments:
220+
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 shown a received incoming message with three file attachments.":::
223223

224224

225225
## Handle image attachments
226226

227-
Image attachments need to be treated differently to standard `file` attachments. Image attachment have the `attachmentType` of `image`, which requires the communication token to retrieve either the preview or full-size images.
227+
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 we go any further, make sure you have gone through the tutorial that demonstrates [how you can enable inline image support in your chat app](../meeting-interop-features-inline-image.md). To summary, fetching images require a communication token in the request header. Upon getting 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 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.
230230

231-
Now you're familiar with how inline images work and it's easy to render image attachments just like a regular inline image.
231+
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-
Firstly, we inject an image tag to message content whenever there's an image attachment:
233+
First, inject an `image` tag to message content whenever there's an image attachment:
234234

235235
```js
236236
async function renderReceivedMessage(event) {
@@ -264,7 +264,7 @@ function renderImageAttachments(attachment) {
264264
}
265265
```
266266

267-
Now let's borrow `fetchPreviewImages()` from the [tutorial](../meeting-interop-features-inline-image.md) and we should be able to use it as is without any changes:
267+
Now let's borrow `fetchPreviewImages()` from the [Tutorial: Enable Inline Image Support](../meeting-interop-features-inline-image.md), and use it as is without any changes:
268268

269269
```js
270270
function fetchPreviewImages(attachments) {
@@ -312,19 +312,19 @@ async function init() {
312312
}
313313
```
314314

315-
That's it! Now we have added image attachment support as well. Now let's run the code and see it in action!
315+
Now you have image attachment support. Continue to run the code and see it in action.
316316

317317

318318
## Image attachment demo
319319

320-
Now let's send some image attachments from Teams client like this:
320+
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 shown a send box with an image attachment uploaded.":::
323323

324-
Upon sending the image attachment, you notice that it becomes an inline image on the Teams client side:
324+
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 shown a message with the image attachment sent to the other participant.":::
327327

328-
Let's go back to our sample app, the same image should be rendered as well:
328+
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 shown an incoming message with one inline image rendered.":::

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ You should be aware of couple constraints that come with this feature:
3030
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.
3131
3. 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 informtaion, 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`. 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).
3434

3535
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`.
3636

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The Chat SDK is designed to work with Microsoft Teams seamlessly. Specifically,
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, you need to refer to [this tutorial](./meeting-interop-features-file-attachment.md) to enable it 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.
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.
2222

2323
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.
2424

0 commit comments

Comments
 (0)