You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/communication-services/concepts/ui-library/includes/web-ui-use-cases.md
+16-17Lines changed: 16 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ ms.topic: include
6
6
ms.service: azure-communication-services
7
7
---
8
8
9
-
Use components and composites in the Azure Communication Services UI Library to create call and chat experiences in your applications.
9
+
Use components and composites in Azure Communication Services UI Library to create call and chat experiences in your applications.
10
10
11
11
In a composite, call and chat capabilities are built in directly and exposed when you integrate the composite into an application. In a UI component, call and chat capabilities are exposed through a combination of UI functionality and underlying stateful libraries. To take full advantage of these capabilities, we recommend that you use UI components with stateful call and chat client libraries.
12
12
@@ -21,7 +21,7 @@ Get more conceptual documentation, quickstarts, and examples in the [UI Library
21
21
|| Join an Azure Communication Services [room](../../rooms/room-concept.md). |
22
22
|| Start an outbound call to another Azure Communication Services user. |
23
23
|| Start an outbound call to a [phone number](../../telephony/telephony-concept.md#voice-calling-pstn). |
24
-
|[Teams interoperability](../../teams-interop.md)| Join the call lobby |
24
+
|[Teams interoperability](../../teams-interop.md)| Join the call lobby.|
25
25
|| Display a transcription and recording alert banner. |
26
26
| Call controls | Mute and unmute a call. |
27
27
|| Turn video on and off during a call. |
@@ -40,30 +40,29 @@ Get more conceptual documentation, quickstarts, and examples in the [UI Library
40
40
## Chat use cases
41
41
42
42
43
-
| Area | Azure Communication Services Chat| Teams Interoperability Chat|
43
+
| Area | Azure Communication Services chat| Teams interoperability chat|
||[Send and receive file attachments](../../../tutorials/file-sharing-tutorial-acs-chat.md). |[Receive file attachments\*](../../../tutorials/file-sharing-tutorial-interop-chat.md). |
50
50
| Chat events | Send and receive typing indicators. | Send and receive typing indicators\*\*. |
51
51
|| Send and receive read receipts. | Send and receive read receipts. |
52
52
|| Show when a participant is added or removed. | Show when a participant is added or removed. |
53
53
| Participants | Show a participant roster. | Show a participant roster. |
54
54
55
-
56
55
\*Send rich text messages 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](https://azure.microsoft.com/support/legal/preview-supplemental-terms/).
57
56
58
-
\*\*The display name of typing event from the Teams user might not be shown properly.
57
+
\*\*The display name of the typing event from the Teams user might not show properly.
59
58
60
59
## Supported identities
61
60
62
-
To initialize a composite, and authenticate to the service, a user must have an Azure Communication Services identity. For more information, see [Authenticate to Azure Communication Services](../../authentication.md) and [Quickstart: Create and manage access tokens](../../../quickstarts/identity/access-tokens.md).
61
+
To initialize a composite and authenticate to the service, a user must have an Azure Communication Services identity. For more information, see [Authenticate to Azure Communication Services](../../authentication.md) and [Quickstart: Create and manage access tokens](../../../quickstarts/identity/access-tokens.md).
63
62
64
63
## Teams interoperability
65
64
66
-
For [Teams interoperability](../../teams-interop.md) scenarios, you can use UI Library composites to add a user to a Teams meeting via Communication Services. To enable Teams interoperability, use either the default features in the call composite or the chat composite. You can also use UI components to build a custom experience.
65
+
For [Teams interoperability](../../teams-interop.md) scenarios, you can use UI Library composites to add a user to a Teams meeting via Azure Communication Services. To enable Teams interoperability, use either the default features in the call composite or the chat composite. You can also use UI components to build a custom experience.
67
66
68
67
When you add both calling and chat to an application, remember that the chat client can't be initialized until the participant is admitted to the call. After the participant is admitted, you can initialize the chat client to join the meeting chat thread. The pattern is demonstrated in the following figure.
69
68
@@ -74,12 +73,12 @@ If you use UI components to deliver Teams interoperability experiences, begin by
74
73
-[Lobby example](https://azure.github.io/communication-ui-library/?path=/story/examples-teams-interop--lobby): A sample lobby where a participant can wait to be admitted to a call.
75
74
-[Compliance banner](https://azure.github.io/communication-ui-library/?path=/story/examples-teams-interop--compliance-banner): A sample banner that shows the user if the call is being recorded.
76
75
-[Teams theme](https://azure.github.io/communication-ui-library/?path=/story/examples-themes--teams): A sample theme that makes UI Library elements look like Microsoft Teams.
77
-
-[Image sharing\*](../../../tutorials/inline-image-tutorial-interop-chat.md): A sample that shows how a Communication Service user can receive images sent by the Teams user.
78
-
-[File sharing\*](../../../tutorials/file-sharing-tutorial-interop-chat.md): A sample that shows how a Communication Service user can receive file attachments sent by the Teams user.
76
+
-[Image sharing\*](../../../tutorials/inline-image-tutorial-interop-chat.md): A sample that shows how an Azure Communication Service user can receive images sent by the Teams user.
77
+
-[File sharing\*](../../../tutorials/file-sharing-tutorial-interop-chat.md): A sample that shows how an Azure Communication Service user can receive file attachments sent by the Teams user.
79
78
80
79
## Customization
81
80
82
-
Use UI Library patterns to modify components to match the look and feel of your application. Customization is a key difference between composites and UI components in Communication Services. Composites have fewer customization options for a simpler integration experience.
81
+
Use UI Library patterns to modify components to match the look and feel of your application. Customization is a key difference between composites and UI components in Azure Communication Services. Composites have fewer customization options for a simpler integration experience.
83
82
84
83
The following table compares composites and UI components for customization use cases.
85
84
@@ -95,7 +94,7 @@ The following table compares composites and UI components for customization use
95
94
96
95
## Observability
97
96
98
-
The state management architecture of UI Library is decoupled, so you can access stateful call and chat clients directly. You can hook into the stateful client to read the state, handle events, and override behavior to pass onto the UI components.
97
+
The state management architecture of UI Library is decoupled, so you can access stateful call and chat clients directly. Hook into the stateful client to read the state, handle events, and override behavior to pass onto the UI components.
99
98
100
99
The following table compares composites and UI components for observability use cases.
101
100
@@ -107,11 +106,11 @@ The following table compares composites and UI components for observability use
107
106
108
107
## Recommended architecture
109
108
110
-
Initialize a composite and base component by using a Communication Services access token. It's important to get access tokens from Communication Services through a trusted service that you manage. For more information, see [Quickstart: Create and manage access tokens](../../../quickstarts/identity/access-tokens.md) and the [Trusted service tutorial](../../../tutorials/trusted-service-tutorial.md).
109
+
Initialize a composite and base component by using an Azure Communication Services access token. It's important to get access tokens from Azure Communication Services through a trusted service that you manage. For more information, see [Quickstart: Create and manage access tokens](../../../quickstarts/identity/access-tokens.md) and the [trusted service tutorial](../../../tutorials/trusted-service-tutorial.md).
111
110
112
111
:::image type="content" source="../../media/mobile-ui/ui-library-architecture.png" border="false" alt-text="Diagram that shows the recommended UI Library architecture.":::
113
112
114
-
Call and chat client libraries must have the context for the call or chat they join. Like user access tokens, disseminate the context to clients by using your own trusted service.
113
+
Call and chat client libraries must have the context for the call or chat they join. Disseminate the context to clients by using your own trusted service. For example, use user access tokens.
115
114
116
115
The following table summarizes initialization and resource management functions that are required to add context to a client library.
117
116
@@ -142,7 +141,7 @@ Localization is key to making products for users around the world who speak diff
142
141
143
142
## Known issues
144
143
145
-
The UI library doesn't support updating message type when editing existing messages at this time. Adding rich text formatting to an existing message adds HTML styling to the text content. Because this doesn't change the message type, it might result in HTML content displayed as plain text in the message thread.
144
+
UI Library doesn't support updating the message type when editing existing messages at this time. Adding rich text formatting to an existing message adds HTML styling to the text content. Because the message type doesn't change, the result might be HTML content that appears as plain text in the message thread.
Copy file name to clipboardExpand all lines: articles/communication-services/quickstarts/ui-library/get-started-chat-ui-library.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
-
title: Quickstart - Integrate chat experiences in your app by using UI Library
2
+
title: 'Quickstart: Integrate chat experiences in your app by using UI Library'
3
3
titleSuffix: An Azure Communication Services quickstart
4
-
description: Get started with Azure Communication Services UI Library composites to add Chat communication experiences to your applications.
4
+
description: Get started with Azure Communication Services UI Library composites to add chat communication experiences to your applications.
5
5
author: dhiraj
6
6
ms.author: jorgegarc
7
7
ms.date: 11/29/2022
@@ -15,7 +15,7 @@ ms.custom: mode-other
15
15
16
16
Get started with Azure Communication Services UI Library to quickly integrate communication experiences into your applications. In this quickstart, learn how to integrate UI Library chat composites into an application and set up the experience for your app users.
17
17
18
-
Communication Services UI Library renders a full chat experience right in your application. It takes care of connecting to Azure Communication Services chat services, and updates participant's presence automatically. As a developer, you need to worry about where in your app's user experience you want the chat experience to launch and only create the Azure Communication Services resources as required.
18
+
Azure Communication Services UI Library renders a full chat experience right in your application. It takes care of connecting to Azure Communication Services chat services and updates a participant's presence automatically. As a developer, you need to decide about where in your app's user experience you want the chat experience to start and create only the Azure Communication Services resources as required.
19
19
20
20
::: zone pivot="platform-web"
21
21
@@ -37,7 +37,7 @@ Communication Services UI Library renders a full chat experience right in your a
37
37
38
38
## Clean up resources
39
39
40
-
If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group.
40
+
If you want to clean up and remove a Azure Communication Services subscription, you can delete the resource or resource group.
41
41
42
42
Deleting the resource group also deletes any other resources associated with it.
Get the sample Android application for this [quickstart](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-chat) in the opensource Azure Communication Services [UI Library for Android](https://github.com/Azure/communication-ui-library-android).
11
+
Get the sample Android application for this [quickstart](https://github.com/Azure-Samples/communication-services-android-quickstarts/tree/main/ui-chat) in the open-source Azure Communication Services [UI Library for Android](https://github.com/Azure/communication-ui-library-android).
12
12
13
13
## Prerequisites
14
14
15
15
- An Azure account and an active Azure subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
16
16
- An OS running [Android Studio](https://developer.android.com/studio).
17
-
- A deployed [Azure Communication Services resource](../../../create-communication-resource.md), note the endpoint URL.
17
+
- A deployed [Azure Communication Services resource](../../../create-communication-resource.md). Note the endpoint URL.
18
18
- An Azure Communication Services [access token](../../../identity/quick-create-identity.md) and user identifier.
19
-
- An Azure Communication Services [chat thread](../../../chat/get-started.md) with above user added to it.
20
-
19
+
- An Azure Communication Services [chat thread](../../../chat/get-started.md) with the user from the previous step added to it.
21
20
22
21
## Set up the project
23
22
24
23
Complete the following sections to set up the quickstart project.
25
24
26
25
### Create a new Android project
27
26
28
-
In Android Studio, create a new project:
27
+
In Android Studio, create a new project.
29
28
30
-
1.In the **File** menu, select **New** > **New Project**.
29
+
1.On the **File** menu, select **New** > **New Project**.
31
30
32
-
1.In**New Project**, select the **Empty Activity** project template.
31
+
1.On**New Project**, select the **Empty Activity** project template.
33
32
34
33
:::image type="content" source="../../media/composite-android-new-project.png" alt-text="Screenshot that shows the New Project dialog in Android Studio with Empty Activity selected.":::
35
34
36
35
1. Select **Next**.
37
36
38
-
1.In**Empty Activity**, name the project **UILibraryQuickStart**. For language, select **Java/Kotlin**. For the minimum SDK, select **API 23: Android 6.0 (Marshmallow)** or later.
37
+
1.On**Empty Activity**, name the project **UILibraryQuickStart**. For language, select **Java/Kotlin**. For the minimum SDK, select **API 23: Android 6.0 (Marshmallow)** or later.
39
38
40
39
1. Select **Finish**.
41
40
@@ -59,11 +58,11 @@ dependencies {
59
58
60
59
### Add Maven repositories
61
60
62
-
The Azure package repository is required to integrate the library:
61
+
The Azure package repository is required to integrate the library.
63
62
64
63
To add the repository:
65
64
66
-
1. In your project Gradle scripts, ensure that the following repositories are added. For Android Studio (2020.\*), `repositories` is in `settings.gradle`, under `dependencyResolutionManagement(Gradle version 6.8 or greater)`. For earlier versions of Android Studio (4.\*), `repositories` is in the project-level `build.gradle`, under `allprojects{}`.
65
+
1. In your project Gradle scripts, ensure that the following repositories are added. For Android Studio (2020.\*), `repositories` is in `settings.gradle`, under `dependencyResolutionManagement(Gradle version 6.8 or greater)`. For earlier versions of Android Studio (4.\*), `repositories` is in the project-level `build.gradle`, under `allprojects{}`.
67
66
68
67
```groovy
69
68
// dependencyResolutionManagement
@@ -110,7 +109,7 @@ To initialize the composite:
110
109
111
110
1. Go to `MainActivity`.
112
111
113
-
1. Add the following code to initialize your composite components for calling. Replace the string values for properties (kotlin) or functions (java) for `endpoint`, `acsIdentity`, `displayName`, `accessToken` and `ThreadId`. Replace `endpoint` with the URL for your resource as provided by Azure Communication Services. Replace `acsIdentity` and `accessToken` with the values provided by Azure Communication Services when you created the access token and use a relevant displayName. Replace `ThreadId` with the value returned when you created the thread. Remember to add the user to the thread via REST API call, or the az commandline interface client before you try to run the quick start sample or the client will be denied access to join the thread.
112
+
1. Add the following code to initialize your composite components for calling. Replace the string values for properties (`kotlin`) or functions (`java`) for `endpoint`, `acsIdentity`, `displayName`, `accessToken`, and `ThreadId`. Replace `endpoint` with the URL for your resource as provided by Azure Communication Services. Replace `acsIdentity` and `accessToken` with the values provided by Azure Communication Services when you created the access token, and use a relevant `displayName`. Replace `ThreadId` with the value returned when you created the thread. Add the user to the thread via REST API call or the az command-line interface client before you try to run the quickstart sample. Otherwise, the client is denied access to join the thread.
114
113
115
114
#### [Kotlin](#tab/kotlin)
116
115
@@ -335,10 +334,10 @@ public class MainActivity extends AppCompatActivity {
335
334
336
335
## Run the code
337
336
338
-
In Android Studio, build and start the application:
337
+
In Android Studio, build and start the application.
339
338
340
339
1. Select **Start Experience**.
341
-
1. The chat client will join the chat thread and you can start typing and sending messages
342
-
1. If the client is not able to join the thread, and you see chatJoin failed errors, verify that your user's access token is valid and that the user has been added to the chat thread by REST API call, or by using the `az` commandline interface.
340
+
1. The chat client joins the chat thread, and you can start typing and sending messages.
341
+
1. If the client can't join the thread and you see `chatJoin` failed errors, verify that your user's access token is valid and that the user was added to the chat thread by REST API call or by using the `az` command-line interface.
343
342
344
343
:::image type="content" source="../../media/quickstart-chat.gif" alt-text="GIF animation that shows an example of how the project runs on an Android device.":::
0 commit comments