Skip to content

Commit c42fc23

Browse files
jpeng-msjpeng-ms
authored
[Chat] Updated Docs for Inline Image and File Sharing (#3599)
1 parent 11fc5fe commit c42fc23

5 files changed

Lines changed: 72 additions & 64 deletions

File tree

‎change-beta/@azure-communication-react-38cebae9-f839-4963-977d-7c8375de3d91.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "none",
3+
"area": "improvement",
4+
"workstream": "Documentation Update",
5+
"comment": "Updated documentations for file sharing and inline image stories",
6+
"packageName": "@azure/communication-react",
7+
"email": "109105353+jpeng-ms@users.noreply.github.com",
8+
"dependentChangeType": "none"
9+
}

‎change/@azure-communication-react-38cebae9-f839-4963-977d-7c8375de3d91.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "none",
3+
"area": "improvement",
4+
"workstream": "Documentation Update",
5+
"comment": "Updated documentations for file sharing and inline image stories",
6+
"packageName": "@azure/communication-react",
7+
"email": "109105353+jpeng-ms@users.noreply.github.com",
8+
"dependentChangeType": "none"
9+
}

‎packages/storybook/stories/CallWithChatComposite/CallWithChatCompositeDocs.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright (c) Microsoft Corporation.
22
// Licensed under the MIT License.
33

4-
import { Image, MessageBar, Stack, Text } from '@fluentui/react';
4+
import { Image, MessageBar, Stack } from '@fluentui/react';
55
import { Title, Description, Heading, Source, Subheading } from '@storybook/addon-docs';
66
import React, { useEffect, useRef } from 'react';
77
import { SingleLineBetaBanner } from '../BetaBanners/SingleLineBetaBanner';
@@ -33,6 +33,8 @@ options={{
3333
export const Docs: () => JSX.Element = () => {
3434
const refTeamsMeeting = useRef(null);
3535
const refFileSharing = useRef(null);
36+
const refImageSharing = useRef(null);
37+
const refImageSharingTeams = useRef(null);
3638
const refFileSharingACS = useRef(null);
3739
const refFileSharingTeams = useRef(null);
3840

@@ -45,9 +47,13 @@ export const Docs: () => JSX.Element = () => {
4547

4648
if (url.includes('adding-file-sharing') && refFileSharing.current) {
4749
scrollToRef(refFileSharing);
48-
} else if (url.includes('in-teams-interop-meeting-chat-thread') && refFileSharingTeams.current) {
50+
} else if (url.includes('adding-image-sharing') && refImageSharing.current) {
51+
scrollToRef(refImageSharing);
52+
} else if (url.includes('inline-image-in-teams-interop-meeting-chat-thread') && refImageSharingTeams.current) {
53+
scrollToRef(refImageSharingTeams);
54+
} else if (url.includes('file-sharing-in-teams-interop-meeting-chat-thread') && refFileSharingTeams.current) {
4955
scrollToRef(refFileSharingTeams);
50-
} else if (url.includes('in-azure-communication-services-chat-thread') && refFileSharingACS.current) {
56+
} else if (url.includes('file-sharing-in-azure-communication-services-chat-thread') && refFileSharingACS.current) {
5157
scrollToRef(refFileSharingACS);
5258
} else if (url.includes('teams-meeting') && refTeamsMeeting.current) {
5359
scrollToRef(refTeamsMeeting);
@@ -139,12 +145,27 @@ export const Docs: () => JSX.Element = () => {
139145
CallComposite. Check out [Customize Call
140146
Controls](./?path=/docs/composites-call-basicexample--basic-example#customize-call-controls) to learn more.
141147
</Description>
142-
148+
<div ref={refImageSharing}>
149+
<Heading>Adding image sharing</Heading>
150+
</div>
151+
<div ref={refImageSharingTeams}>
152+
<Subheading>Inline Image In Teams Interop Meeting Chat Thread</Subheading>
153+
<SingleLineBetaBanner />
154+
<Description>
155+
The Azure Communication Services end user can recieve images shared by the Teams user without any additional
156+
setup when using the `CallWithChat` Composite in a Teams interop scenario,. Azure Communication Services end
157+
user would need to join the Teams meeting first, as soon as the Teams user sends a file from the Teams client,
158+
the Azure Communication Services end user will be see the image in the chat thread. Please check out the
159+
tutorial for [Enable inline image using UI Library in Teams Interoperability
160+
Chat](https://learn.microsoft.com/en-us/azure/communication-services/tutorials/inline-image-tutorial-interop-chat)
161+
for details.
162+
</Description>
163+
</div>
143164
<div ref={refFileSharing}>
144165
<Heading>Adding file sharing</Heading>
145166
</div>
146167
<div ref={refFileSharingACS}>
147-
<Subheading>In Azure Communication Services Chat Thread</Subheading>
168+
<Subheading>File Sharing In Azure Communication Services Chat Thread</Subheading>
148169
<SingleLineBetaBanner />
149170
<Description>
150171
In a chat thread where all participants are Azure Communication Services end users, the `CallWithChat`
@@ -157,31 +178,16 @@ export const Docs: () => JSX.Element = () => {
157178
<Source code={addFileSharingSnippet} />
158179
</div>
159180
<div ref={refFileSharingTeams}>
160-
<Subheading>In Teams Interop Meeting Chat Thread</Subheading>
181+
<Subheading>File Sharing In Teams Interop Meeting Chat Thread</Subheading>
161182
<SingleLineBetaBanner />
162183
<Description>
163184
When using the `CallWithChat` Composite in a Teams interop scenario, the Azure Communication Services end user
164185
can recieve file attachments from Teams user without any additional setup. Simply join the Teams meeting as an
165186
Azure Communication Services end user, as soon as the Teams user sends a file from the Teams client, the Azure
166-
Communication Services end user will be able to see shared files in the chat thread.
167-
</Description>
168-
<Description>
169-
Please note there are few things to keep in mind when using file sharing in Teams interop scenario:
187+
Communication Services end user will be able to see shared files in the chat thread. Please check out the
188+
tutorial for [Enable file sharing using UI Library in Teams Interoperability
189+
Chat](https://learn.microsoft.com/en-us/azure/communication-services/tutorials/file-sharing-tutorial-interop-chat)
170190
</Description>
171-
<ul className="list-content">
172-
<li>
173-
<Text className="list-content">@azure/communication-react@1.7.0-beta.1 or higher</Text>
174-
</li>
175-
<li>
176-
<Text className="list-content">@azure/communication-chat@1.3.2-beta.2 or higher </Text>
177-
</li>
178-
<li>
179-
<Text className="list-content">
180-
When the file is sent from Teams, the Teams user must set the file permission to "Anyone" or "People you
181-
choose".
182-
</Text>
183-
</li>
184-
</ul>
185191
</div>
186192

187193
<Heading>PSTN and 1:N Calling</Heading>

‎packages/storybook/stories/ChatComposite/ChatCompositeDocs.tsx‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { ChatComposite } from '@azure/communication-react';
55
import { Stack } from '@fluentui/react';
6-
import { Title, Description, Heading, Source, Props } from '@storybook/addon-docs';
6+
import { Title, Description, Heading, Source, Props, Subheading } from '@storybook/addon-docs';
77
import React, { useEffect, useRef } from 'react';
88
import { SingleLineBetaBanner } from '../BetaBanners/SingleLineBetaBanner';
99
import { overviewPageImagesStackStyle } from '../constants';
@@ -21,22 +21,6 @@ const showParticipantStatement = `
2121
<ChatComposite options={{ participantPane: true}}>
2222
`;
2323

24-
const addFileSharingSnippet = `
25-
<ChatComposite
26-
adapter={chatAdapter}
27-
options={{
28-
fileSharing: {
29-
uploadHandler: fileUploadHandler,
30-
/* If fileDownloadHandler is not provided. The file URL is opened in a new tab.
31-
You can find examples of fileDownloadHandler and fileUploadHandler in this tutorial
32-
https://docs.microsoft.com/en-us/azure/communication-services/tutorials/file-sharing-tutorial */
33-
downloadHandler: fileDownloadHandler,
34-
accept: 'image/png, image/jpeg, text/plain, .docx',
35-
multiple: true
36-
}
37-
}} />
38-
`;
39-
4024
export const Docs: () => JSX.Element = () => {
4125
const refBasicUsage = useRef(null);
4226
const refCustomBehavior = useRef(null);
@@ -205,15 +189,13 @@ export const Docs: () => JSX.Element = () => {
205189
</div>
206190
<Heading>Adding file sharing</Heading>
207191
<SingleLineBetaBanner />
192+
<Subheading>In Azure Communication Service Chat Thread</Subheading>
208193
<Description>
209194
The Chat Composite supports file sharing capabilities in conjunction with your choice of a storage solution.
210-
Using the provided APIs, you can enable the composite to support uploading files and displaying them on the send
211-
box before sending, and the message thread once they have been sent or received. For an end to end tutorial on
212-
enabling file sharing with Azure Blob Storage as your choice of a storage solution, refer to our
213-
[tutorial](https://docs.microsoft.com/azure/communication-services/tutorials/file-sharing-tutorial). File
214-
sharing is supported for Teams interop scenarios by default.
195+
Please refer to our
196+
[tutorial](https://docs.microsoft.com/azure/communication-services/tutorials/file-sharing-tutorial) for more
197+
details. File sharing in Teams interop senarios is avaliable with the CallWithChat Composite.
215198
</Description>
216-
<Source code={addFileSharingSnippet} />
217199

218200
<Heading>Chat Composite Props</Heading>
219201
<Props of={ChatComposite} />

‎packages/storybook/stories/UseCases.stories.mdx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,23 @@ To take full advantage of these capabilities, we recommend using the UI Componen
3939

4040
## Chat Use Cases
4141

42-
| Area | Use Cases |
43-
| ------------ | ---------------------------------------------------- |
44-
| Chat Types | [Join a Teams Meeting Chat](#teams-interop-use-case) |
45-
| | Join an Azure Communication Services chat thread |
46-
| Chat Actions | Send chat message |
47-
| | Receive chat message |
48-
| | Edit chat message |
49-
| | Remove chat message |
50-
| Chat Events | Typing Indicators |
51-
| | Read Receipt |
52-
| | Participant added/removed |
53-
| | Chat title changed |
54-
| Participants | Participant roster |
55-
56-
## Teams Interop Use Case
42+
| Area | Azure Communication Services Chat | Teams Interoperability Chat |
43+
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
44+
| Chat types | Join an Azure Communication Services chat thread | Join a Microsoft Teams meeting chat |
45+
| Chat actions | Send and receive text messages | Send and receive text messages |
46+
| | Receive rich text messages | Receive rich text messages |
47+
| | - | [Receive inline images\*](https://learn.microsoft.com/en-us/azure/communication-services/tutorials/inline-image-tutorial-interop-chat) |
48+
| | [Send and receive file attachments](https://learn.microsoft.com/en-us/azure/communication-services/tutorials/file-sharing-tutorial-acs-chat) | [Receive file attachments\*](https://learn.microsoft.com/en-us/azure/communication-services/tutorials/file-sharing-tutorial-interop-chat) |
49+
| Chat events | Send and receive typing indicators | Send and receive typing indicators\*\* |
50+
| | Send and receive read receipts | Send and receive read receipts |
51+
| | Show when a participant is added or removed | Show when a participant is added or removed |
52+
| Participants | Show a participant roster | Show a participant roster |
53+
54+
\*Inline image and file attachment support are currently in public preview. Preview APIs and SDKs are provided without a service-level agreement. We recommend that you don't use them for production workloads. Some features might not be supported, or they might have constrained capabilities. For more information, review Supplemental Terms of Use for Microsoft Azure Previews.
55+
56+
\*\*The display name of typing event from the Teams user might not be shown properly.
57+
58+
## Teams Interoperability
5759

5860
For [Teams Interop](https://docs.microsoft.com/azure/communication-services/concepts/teams-interop) scenarios, developers can use UI Library Components to join Teams meetings through Azure Communication Services.
5961
To enable Teams Interop, developers can either use calling and chat composites directly or use UI Components to build a custom experience.
@@ -72,8 +74,8 @@ For example:
7274

7375
<SingleLineBetaBanner content="The following features are currently in public preview" />
7476

75-
- [File Sharing](./?path=/docs/ui-components-messagethread--message-thread#display-file-attachments-with-messages): Feature allows Teams users to share file attachments as part of chat messages.
76-
- [Inline Images](./?path=/docs/ui-components-messagethread--message-thread#display-inline-image-with-messages): Feature allows Teams users to attach images as part of chat messages.
77+
- [File Sharing](https://learn.microsoft.com/en-us/azure/communication-services/tutorials/file-sharing-tutorial-interop-chat): Feature allows Teams users to share file attachments as part of chat messages.
78+
- [Inline Images](https://learn.microsoft.com/en-us/azure/communication-services/tutorials/inline-image-tutorial-interop-chat): Feature allows Teams users to attach images as part of chat messages.
7779

7880
## Customization
7981

0 commit comments

Comments
 (0)
⚡