Merge pull request #302921 from vhuseinova-msft/vhuseinova/ui-library-quickstarts-updates

UI library quickstarts updates

Author: Stacyrch140

articles/communication-services/concepts/ui-library/includes/web-ui-library.md

@@ -55,7 +55,7 @@ UI Components support customization to give the components the right feel and lo
 | Chat    | [Message Thread](https://azure.github.io/communication-ui-library/?path=/docs/components-message-thread--docs)       | Container that renders chat messages, system messages, and custom messages                          |
 |         | [Send Box](https://azure.github.io/communication-ui-library/?path=/docs/components-sendbox-send-box--docs)                         | Text input component with a discrete send button                                                   |
 |         | [Rich Text Send Box](https://azure.github.io/communication-ui-library/?path=/docs/components-sendbox-rich-text-send-box--docs) | Rich text input component with formatting options and a discrete send button |
-|         | [Message Status Indicator](https://azure.github.io/communication-ui-library/?path=/story/components-message-status-indicator--message-status-indicator)        | Multi-state read receipt component to show state of sent message                                   |
+|         | [Message Status Indicator](https://azure.github.io/communication-ui-library/?path=/docs/components-message-status-indicator--docs)        | Multi-state read receipt component to show state of sent message                                   |
 |         | [Typing indicator](https://azure.github.io/communication-ui-library/?path=/docs/components-typing-indicator--docs) | Text component to render the participants who are actively typing on a thread                      |
 | Common  | [Participant Item](https://azure.github.io/communication-ui-library/?path=/docs/components-participant-item--docs) | Common component to render a call or chat participant including avatar and display name            |
 |         | [Participant List](https://azure.github.io/communication-ui-library/?path=/docs/components-participant-list--docs)                                 | Common component to render a call or chat participant list including avatar and display name       |

articles/communication-services/quickstarts/ui-library/get-started-chat-adaptive-card.md

@@ -23,7 +23,7 @@ This article shows you how to integrate Adaptive Cards into your chat applicatio
 
 ## Explore Adaptive Card examples in Storybook
 
-For more information about adding Adaptive Cards in chat, see [Messages with Adaptive Card](https://aka.ms/acsstorybook).
+For more information about adding Adaptive Cards in chat, see [Messages with Adaptive Card](https://azure.github.io/communication-ui-library/?path=/docs/components-message-thread-messagethread-with-adaptive-card-message--docs).
 
 
 ## Clean up resources

articles/communication-services/quickstarts/ui-library/includes/get-started-chat/android.md

@@ -28,13 +28,13 @@ In Android Studio, create a new project.
 
 1. On the **File** menu, select **New** > **New Project**.
 
-1. On **New Project**, select the **Empty Activity** project template.
+1. On **New Project**, select the **Empty Views Activity** project template.
 
-   :::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.":::
+   :::image type="content" source="../../media/chat-composite-android-new-project.png" alt-text="Screenshot that shows the New Project dialog in Android Studio with Empty Views Activity selected.":::
 
 1. Select **Next**.
 
-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.
+1. Name the project **UILibraryQuickStart**. For language, select **Java/Kotlin**. For the minimum SDK, select **API 23: Android 6.0 (Marshmallow)** or later.
 
 1. Select **Finish**.
 
@@ -64,7 +64,8 @@ To add the repository:
 
 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{}`.
 
-    ```groovy
+#### [Groovy](#tab/groovy)
+```groovy
     // dependencyResolutionManagement
     repositories {
         ...
@@ -73,7 +74,16 @@ To add the repository:
         }
         ...
     }
-    ```
+```
+#### [Kotlin](#tab/kotlin-maven)
+```kotlin
+    // dependencyResolutionManagement 
+    repositories {
+        maven {
+            url = uri("https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1")
+        }
+    }
+```
 
 1. Sync your project with the Gradle files. To sync the project, on the **File** menu, select **Sync Project With Gradle Files**.
 
@@ -336,7 +346,7 @@ public class MainActivity extends AppCompatActivity {
 
 In Android Studio, build and start the application.
 
-1. Select **Start Experience**.
+1. Select **Launch**.
 1. The chat client joins the chat thread, and you can start typing and sending messages.
 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.
 

articles/communication-services/quickstarts/ui-library/includes/get-started-chat/ios.md

@@ -49,19 +49,19 @@ In Xcode, create a new project.
 
     target 'UILibraryQuickStart' do
         use_frameworks!
-        pod 'AzureCommunicationUIChat', '1.0.0-beta.4'
+        pod 'AzureCommunicationUIChat', '1.0.0-beta.5'
     end
     ```
 
 1. Run `pod install --repo-update`.
 
 1. In Xcode, open the generated *xcworkspace* file.
 
-### Turn off Bitcode
+### Turn off User Script Sandboxing
 
-In the Xcode project, under **Build Settings**, set the **Enable Bitcode** option to **No**. To find the setting, change the filter from **Basic** to **All** or use the search bar.
+In the Xcode project, under **Build Settings**, set the **User Script Sandboxing** option to **No**. To find the setting, change the filter from **Basic** to **All** or use the search bar.
 
-:::image type="content" source="../../media/xcode-bitcode-option.png" alt-text="Screenshot that shows the Build Settings option to turn off Bitcode.":::
+:::image type="content" source="../../media/xcode-sandbox-option.png" alt-text="Screenshot that shows the Build Settings option to turn off User Script Sandboxing.":::
 
 ## Initialize the composite
 
@@ -83,9 +83,11 @@ To initialize the composite:
             super.viewDidLoad()
     
             let button = UIButton()
-            button.contentEdgeInsets = UIEdgeInsets(top: 10.0, left: 20.0, bottom: 10.0, right: 20.0)
+            var configuration = UIButton.Configuration.filled()
+            configuration.contentInsets = NSDirectionalEdgeInsets(top: 10.0, leading: 20.0, bottom: 10.0, trailing: 20.0)
+            configuration.baseBackgroundColor = .systemBlue
+            button.configuration = configuration
             button.layer.cornerRadius = 10
-            button.backgroundColor = .systemBlue
             button.setTitle("Start Experience", for: .normal)
             button.addTarget(self, action: #selector(startChatComposite), for: .touchUpInside)
     

articles/communication-services/quickstarts/ui-library/media/chat-composite-android-new-project.png

@@ -87,11 +87,11 @@ For this quickstart, we're modifying files inside of the `src` folder.
 
 ### Install the package
 
-Use the `npm install` command to install the beta Azure Communication Services UI Library for JavaScript.
+Use the `npm install` command to install the latest beta Azure Communication Services UI Library for JavaScript.
 
 ```bash
 
-npm install @azure/communication-react@1.16.0-beta.1
+npm install @azure/communication-react@1.28.0-beta.2
 
 ```
 
@@ -100,8 +100,8 @@ you can most consistently use the API from the core libraries in your applicatio
 
 ```bash
 
-npm install @azure/communication-calling@1.24.1-beta.2
-npm install @azure/[email protected].1
+npm install @azure/communication-calling@1.36.1-beta.1
+npm install @azure/[email protected].7
 
 ```
 
@@ -133,9 +133,9 @@ import {
 } from '@azure/communication-react';
 import React, { useMemo } from 'react';
 
-initializeFileTypeIcons();
-
 function App(): JSX.Element {
+  initializeFileTypeIcons();
+
   // Common variables
   const endpointUrl = 'INSERT_ENDPOINT_URL';
   const userId = ' INSERT_USER_ID';
@@ -167,7 +167,7 @@ function App(): JSX.Element {
   );
   const chatAdapter = useAzureCommunicationChatAdapter(chatAdapterArgs);
 
-  if (!!chatAdapter) {
+  if (chatAdapter) {
     return (
       <>
         <div style={containerStyle}>
@@ -219,6 +219,7 @@ const uploadFileToAzureBlob = async (uploadTask: AttachmentUploadTask) => {
   return {
     url: 'https://sample.com/sample.jpg', // Download URL of the file.
   };
+}
 
 ```
 
@@ -290,6 +291,7 @@ const attachmentSelectionHandler: AttachmentSelectionHandler = async (uploadTask
       // Allows you to provide a custom error message.
       task.notifyUploadFailed('File too big. Select a file under 99 MB.');
     }
+    ...
   }
 }
 
@@ -318,7 +320,8 @@ const handler = async (attachment: AttachmentMetadata, message?: ChatMessage) =>
 };
 
 const customHandler = = async (attachment: AttachmentMetadata, message?: ChatMessage) => {
-   if (attachment.extension === "pdf") {
+  const extension = attachment.name.split(".").pop() || "";
+   if (extension === "pdf") {
     return [
       {
         title: "Custom button",