azure/communication-ui-library

UI Library for Azure Communication Services helps developers build communication applications with ease. From turn-key composites to UI components that can be composited together.

Azure Communication Services UI Library

The Azure Communication Services UI Library is a collection of JavaScript libraries designed to help you easily build fast, responsive communication web applications.

Explore interactive storybook pages in our documentation 📖 to try out features and examples, and kickstart your development journey 🚀.

Getting Started

If you're wondering where to start, here are a few scenarios to guide you:

• What is Azure Communication Services?

  • Dive into our conceptual documentation on Azure Communication Services, Client-Server Architecture, Authentication, Calling, and Chat.

• I want to see what this library can do!

  • Explore our Storybook and Sample Apps.

• I want to write my own communication application

  • Start with our comprehensive documentation to make the best choices for your application.

• I want more information on the available npm packages

  • Check out our npm packages on offer.

• I want to contribute and submit a fix for a package in this repo

  • Refer to our contributing guide for the steps to get started.

NPM Packages

@azure/communication-react

This React library provides UI components, simplifying the development of modern communication apps using Azure Communication Services.

Samples

Explore Storybook to try out the UI Library today!

Contributing to the Packages or Samples

Join us in contributing to this open source library. Get started by checking out our contributing guide.

We look forward to building an amazing open source library with you!

Further Reading

• Repository Documentation
• Conceptual Documentation
• Quick-start Documentation

communication-ui-library's Issues

callInvitationURL Not working

Not sure if this is a bug. But the callInvitationURL isnt working in the callComposite. How is this supposed to work? I couldn't find any documentation.

Options button does not work with `react-full-screen` in CallComposite

Describe the bug; what happened?
When the page is at full screen (note this is with react-full-screen, not an F11 full screen), the options button does not work

What are the steps to reproduce the issue?
Wrap the composite with Full Screen following this link, start the call, enter full screen and click on the options button

In what environment did you see the issue?

Windows on PC
Google Chrome

Missing floating video styles in Video Gallery component

Describe the bug; what happened?

In the Storybook Video Gallery Component the canvas mode has a bug when choosing floatingLocalVideo. The styles disappear and you end up with a floating blank component. This also occurs when implementing the component

What are the steps to reproduce the issue?

1. go to https://azure.github.io/communication-ui-library/?path=/story/ui-components-videogallery--video-gallery&args=layout:floatingLocalVideo
2. Notice the floating blank component which is missing the styles for local video

What behavior did you expect?
The floating video layout should have the same styles as when the layout is switched to default

If applicable, provide screenshots:

In what environment did you see the issue?

Online in storybook

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC] MacOS
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox] Google Chrome
• Version [e.g. 1.8.0] Not sure

Is there any additional information?

[Question] Are the libraries from the StaticHTMLCompositeSample available on NPM?

If I have an existing web app that isn't a reat-app to begin with, and I want to implement calling, I already have to install the react components for this work.

If I understand the docs correctly, I also must now work with yet another package manager, Rush. Or is there an npm package that I can add to packages for the necessary components?

"html" messages do not render in chat in ChatComposite

All messages of type "html" are not rendered in chat!

With two chats open in parallel, sending a file through the first one, in the second chat in real time it is possible to see the message (tag a with link) that has just been sent, but when closing the chat and reopening all html messages are not rendered.

I'm sending a message like this:

const threadClient = new ChatThreadClient(endpointUrl, threadId, new AzureCommunicationTokenCredential(token));
threadClient.sendMessage({
  senderDisplayName: chatData.userName,
  content : `<a href='google.com' target='_blank'>Arquivo</a>`
}, { type : "html" });

Chat - Image:

HTML DevTool - Image:

Response API - Image:

• Windows on PC
• Browser [Google Chrome]
• Version lib beta.4 and beta.5 ❌

Version beta.3 working normally ✅

The Control Bar Buttons do not render in a SharePoint Framework project

Describe the bug; what happened?**
The Control Bar Buttons like MicrophoneButton, ScreenShareButton, and SendBox buttons do not render in a SharePoint Framework 1.13.1** project. The project is using Node 14.17.0 and TypeScript v3.9 (Reference).

What are the steps to reproduce the issue?

1. Create a new SharePoint Framework project (Reference).
2. Add the 1.0.0 version of @azure/communication-react library.
3. Use the MicrophoneButton and ScreenShareButton controls in a React component.

<ControlBar layout={'horizontal'}>
    <MicrophoneButton checked={true} />
    <ScreenShareButton checked={true} />
</ControlBar>

4. Build and deploy the solution on a SharePoint site. The controls' icons do not render properly as shown in the below screenshots. There is no element inside the <i></i> tags.

What behavior did you expect?
The microphone and screen share icons should be visible.

If applicable, provide screenshots:

In what environment did you see the issue?

• OS & Device: Windows 11
• Browser: Microsoft Edge
• Version: 1.0.0

Height/Width should be 100% in Quickstart or Generated Boilerplate

Height/Width should be 100% in Quickstart or Generated Boilerplate

Describe the bug; what happened?
The Composite Quickstart experience does not automatically adjust the React app styling to expand too 100% height/width

What are the steps to reproduce the issue?
Follow the quickstart here
https://azure.github.io/communication-ui-library/?path=/story/quickstarts-composites--page

And achieved the result in the screensot

What behavior did you expect?
That the Composite should take up 100% of the available height/width within the context of the div it was given

If applicable, provide screenshots:

In what environment did you see the issue?

• OS & Device: macOS
• Browser Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox
• Version: "@azure/communication-react": "^1.0.0-beta.6",

Is there any additional information?

Control Bar Buttons with labels don't have cursur: pointer on hover

Describe the bug; what happened?
Very small bug, but when you hover over a button in the control bar, you won't always see the cursor: pointer ('hand'). This happens when you hover over the label text.

The <label> has a cursur: default, instead of cursor: pointer.

What are the steps to reproduce the issue?
See above.

https://azure.github.io/communication-ui-library/?path=/story/ui-components-controlbar-buttons-camera--camera

What behavior did you expect?
Button should have cursor pointer for the whole element.

If applicable, provide screenshots:
Couldn't manage to have this on my screenshot yet, but can make a video if you can't reproduce.

In what environment did you see the issue?

• OS & Device: macOS / Windows
• Browser: Edge Chromium
• Version: 91.0.864.64 (Official build) (64-bit)

Is there any additional information?

Dependency install issue

At first time after cloning repo and running command "rush update", an error occurred:
"ERROR: Internal Error: Cannot find installed dependency "@fluentui/react-icons" in "C:\Users{user}{user_path}\communication-ui-ibrary\common\temp\node_modules.pnpm\local\C%3A%2FUsers%2F{user}%2FDocuments%2F{user_path}2Fcommunication-ui-library%2Fcommon%2Ftemp%2Fprojects%2Fcommunication-react.tgz\node_modules"
You have encountered a software defect. Please consider reporting the issue to the maintainers of this application."

Environment:
Rush Multi-Project Build Tool 5.47.0 - https://rushjs.io
Node.js version is 14.17.1 (LTS)
pnpm: 6.14.3

Main CI Failed

Main CI Pipeline has failed. Please investigate.

Meeting Composite shows weird message when recording starts during Teams meeting

When you start recording on a Teams meeting, the meeting composite shows a weird message.

1. Start a teams call
2. Connect to the teams call with the meeting composite
3. start recording on teams call
4. open chat on meeting composite

What behavior did you expect?
Message should render correctly

In what environment did you see the issue?

Storybook

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]

Is there any additional information?

Getting error when trying to create call adapter on first attempt

When trying to create a call adapter using the call composite (https://github.com/Azure/communication-ui-library/releases/latest/download/callComposite.js) we are getting error on the first attempt (when using a previously unused groupId) On subsequent attempts we get no error and the composite works as excepted.

const adapter = await callComposite.loadCallComposite(      
      {
         groupId: this.contextId, 
         displayName: identity.displayName,
         userId: identity.meetingUserId, 
         token: identity.token
      },
      document.getElementById('chat-container')

Error:

shared-services.js:861 Error: Uncaught (in promise): CallError: CallClient.createCallAgent: Failed to create call agent, call agent for this ACS Id already exists
CallError: CallClient.createCallAgent: Failed to create call agent, call agent for this ACS Id already exists
    at Le (callComposite.js:2)
    at ke.<anonymous> (callComposite.js:2)
    at Generator.throw (<anonymous>)
    at s (callComposite.js:2)`

• OS & Device: Windows
• Browser: Google Chrome,

Upgrade ACS calling sdk to 1.2.2-beta.1

What feature are you requesting?
https://www.npmjs.com/package/@azure/communication-calling/v/1.2.2-beta.1

What would be the benefit of adding this feature?
Getting the latest and greatest that the calling sdk has to offer

The 1.0.0-beta.2 versioned package does not work with typescript < 4.1

Describe the bug; what happened?
The 1.0.0-beta.2 versioned package does not work in a SharePoint Framework project that uses TypeScript 3.9.7. The 1.0.0-beta.1 version works fine in the same project.

What are the steps to reproduce the issue?

1. Create a new SharePoint Framework project (Reference).
2. Add the 1.0.0-beta.2 version of azure/communication-react library.
3. Build the project and the errors mentioned in the screenshot below are received.

What behavior did you expect?
The project works fine with 1.0.0-beta.1 version so ideally, it should also work with 1.0.0-beta.2 unless there are any breaking changes.

If applicable, provide screenshots:

In what environment did you see the issue?

• OS & Device: Windows
• Browser [e.g. Microsoft Edge
• Version 1.0.0-beta.2

Resolve Duplicated Members in @azure/communication-react

Given that the library actually exists here, this issue is re-filed from where I originally filed it.

Visible Here

Swapping the CI configuration to:

    {
      "name": "@azure/communication-react",
      "folder": "./dist/dist-esm/communication-react/src/"
    }

Actually provides the proper output. However, according to the package owners, that's actually the wrong place to go.

The correct place should be...

    {
      "name": "@azure/communication-react",
      "folder": "./dist/"
    },

...according to the package owners. However, that is still generating the duplicates as seen here.

Need to adjust the structure of the package so that it can be properly documented. To determine an erroneous state, please run the following on the package.

How can you tell if there is a duplication with your configuration?

npm install -g [email protected] type2docfx@beta node2docfx
npm install @azure/communication-react --prefix .
<within node_modules folder/@azure/communication-react, cd to the `folder` argument that we would provide to docs ci>
<so for the folder target of `/dist/`....>
cd node_modules/@azure/communication-react/dist
typedoc --json api.json --module commonjs --includeDeclarations --ignoreCompilerErrors --excludeExternals --stripInternal

Check api.json, and if you see the same member name twice, that's your repro.

The api.json is pretty hard to parse though. I have a docker image that can run the docs CI on a target package with a single command. That's probably the easiest way to repro. Will share offline.

Anonymous user removal difficulties

• Chat thread has 250 user limit
• When using anonymous users, they leave the call, but they don't leave the chat
• We need a way to remove users who are one time users to ensure we don't reach the chat limit.
• meeting adapter has the chat adapter, but it is not properly exposed.

messages not always retrieved in Chat (Non-React)

Describe the bug; what happened?

Copy from IcM https://portal.microsofticm.com/imp/v3/incidents/details/273222048/home

Issue:

The customer has implemented the JavaScript Chat SDK with UI Composites (Non-React)
The issue they're facing is that historical messages are not always being displayed when switching between users in an existing chat.
Here below the link for reference the customer used to implement chat functionality.
https://azure.github.io/communication-ui-library/?path=/story/use-composite-in-non-react-environment--page

Troubleshooting:

During our call, we discovered that the historical chat messages always load on the initial click.
When you click again on the user's chat and toggle between participants, after the 2nd and consecutive clicks, the get messages API is not being called in the Network calls .
I asked cx to reproduce the issue and save the network calls to a HAR file so that we can further investigate (Please see attached Network Trace)
Attachments:

Screenshot of missing chat messages (see eorrchatmsg.png in IcM)
Teams Meeting recording of customer reproducing issue- https://microsoft-my.sharepoint.com/:v:/p/jameelaesa/EbZS-qVTKxhHuVa9xUr2LFIBVQDVz2HDRli-oXSFxgZJgw?e=3jKUSD
Network trace is attached (see chatapiCcontent20211119.har in IcM) - you will see towards the end in the network trace the messages API is not being called anymore so messages are not being retrieved.

What are the steps to reproduce the issue?

What behavior did you expect?

If applicable, provide screenshots:

In what environment did you see the issue?

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]

Is there any additional information?

Upgrade Calling SDK to 1.2.3-beta.1

[TEST IGNORE] Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

Adding Support for Angular

This is awesome but it seems like everything here is tailored around react. Can/Will this be provided in angular or somehow in pure html/css/javascript?

Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

Messages with type 'html' are ignored in chat thread

Trying to display messages sended from java client with 'html' type (valid values for java SDK of azure communication are 'text' and 'html' https://github.com/Azure/azure-sdk-for-java/blob/af17a1edd24e440b8ea83535a5ebcd3acce9f9b8/sdk/communication/azure-communication-chat/src/main/java/com/azure/communication/chat/models/ChatMessageType.java#L17; ), and chatThread component doesn't display it (beacause of filtering of messages with types 'text' and 'richtext/html').
But from Java side we can't pass 'richtext/html' value for type field, it fails validate message:

Request processing failed; nested exception is com.azure.communication.chat.models.ChatErrorResponseException: Status code 400, "{"communicationError":{"code":"BadRequest","message":"One or more validation errors occurred.","details":[{"message":"The input was not valid.","target":"type"}]}}"

Please add support 'html' type at this point:

communication-ui-library/packages/chat-component-bindings/src/chatThreadSelector.ts

Line 48 in 67d9577

message.type.toLowerCase() === 'text' ||

Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

Camera/audio toggles on mobile devices

These findings are based on the sample app that uses the CallComposite.

Describe the bug; what happened?

1. Trying to switch cameras freezes/crashes the page. This seems to happen when the camera is turned on in the app, when I switch my camera and then turn it on, it works fine. This occurs on both the config page as well as in the call itself.

2. The speaker dropdown says 'select an option', tapping it doesn't do anything. Presumably because the device only has one speaker, but it can't be selected. When starting the call, the speaker does work.

In what environment did you see the issue?
A deployed online app.

• OS & browser:
  • Device 1: Android 11 / Chrome 88.0
  • Device 2: Android 8.1.0 / Chrome 91.0

Is there any additional information?

Add block merge to/in PR where there are unresolved comments

What feature are you requesting?

We should block merging of PRs when there are unresolved comments.

What would be the benefit of adding this feature?

This should ensures comments are not forgotten or accidently missed.

What solution would be ideal for you?

PR is not able to be merged until all comments are marked as resolved.

What alternatives have you considered?

N/A

Is there any additional information for your request?

N/A

Attach screenshots or images add detail to your request:

N/A

Camera preview doesn't work in latest CallComposite

Describe the bug; what happened?

Updating @azure/communication-react from 1.0.0-alpha-20210623.9.0 to 1.0.0-alpha-20210624.13.0 broke the camera preview functionality for me, which is perhaps caused by #491.

What are the steps to reproduce the issue?

1. Use the calling composite sample on main (or use 1.0.0-alpha-20210624.13.0)
2. Start or join a call
3. Check if Camera field is persisted with your first choice
4. Try to press 'Turn on'
5. (won't work)
6. Select another camera in the list
7. Switch back to your original camera
8. Press turn on (works!)

What behavior did you expect?
Camera will load on first try, without having to reselect.

If applicable, provide screenshots:

UI.Library.Calling.Sample.and.3.more.pages.-.Work.-.Microsoft.Edge.2021-06-24.11-39-52.mp4

In what environment did you see the issue?

• OS & Device: Windows 10, Surface Laptop 3
• Browser: Edge Chromium
• Version: Version 91.0.864.54 (Official build) (64-bit)

Is there any additional information?
Happy to share my public repro site via Teams internally if that helps.

[Feature Request] When Call session is over don't return to start a call screen.

What feature are you requesting?
When a call has been completed, a user is forwarded back to the "Start a call" view. Es no bueno, a customer could make additional calls after the host has left incurring more charges than inticipated.

What would be the benefit of adding this feature?
proper business logic

What solution would be ideal for you?
Some kind of thanks for participating screen. Google meets looks like this (not saying it should exactly like theirs, but something like it...)

What alternatives have you considered?
I tried catching the click event with jquery on css class root-157 and forwarding to a different page with window.href, but the event isn't caught... darn the DOM!

Local video not working on iOS

Hi,

We are using callComposite without react. The integration was pretty straightforward but after testing on different devices, we realize that the local video is not working on iPhone or iPad. It works fine on Android. How could we fix this?

Thanks,
Rémi

[Feature request] Make CallComposite responsive / mobile friendly

What feature are you requesting?

It would be great if the CallComposite would have some (basic) responsive support. Currently it is mostly functional on iOS and Android, however the layout is distorted since it doesn't support small screen layouts.

Currently the CallComposite is hard to use in a mobile first / friendly scenario and thus requiring using the Stateful client with quite some modifications.

What would be the benefit of adding this feature?

Customers can more easily get started in a mobile scenario.

What solution would be ideal for you?

Basic support for small screen sizes in the CallComposite

What alternatives have you considered?

Use the Stateful client / UI library with custom styling

Is there any additional information for your request?

CallComposite is currently not used by my customer case, since we require other modifications. However, when the CallComposite would be responsive, I would imagine that some underlying components also benefit from this change.

Attach screenshots or images add detail to your request:

Add the option to set margin values for the chat message container

What feature are you requesting?
Add the option to set margin values for the chat message container.

What would be the benefit of adding this feature?
This will give more control to style the containers as per requirement.

What solution would be ideal for you?
The margin-left and margin-right options should apply to the chat message container.

What alternatives have you considered?
I tried setting margin-right to 0px using the below code but it does not work.

const messageThreadStyle: MessageThreadStylesProps = {
  chatMessageContainer: {
    marginRight: '0px'
  }
};

Attach screenshots or images add detail to your request:

Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

createAzureCommunicationCallAdapter not acting async in @azure/communication-react

Describe the bug; what happened?

What are the steps to reproduce the issue?
You can just use the same code in https://azure.github.io/communication-ui-library/?path=/docs/composites-call--join-existing-call. You will see that the page only renders after the createAzureCommunicationCallAdapter call is finished. Therefore I felt like that inside the function there is something that is NOT async.

What behavior did you expect?
Page render first, and the adapter loads on the side.

• OS & Device: Windows on PC
• Browser: Google Chrome
• Version 92.0.4515.131

Is there any additional information?
Please reach out to me -- [email protected]

Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

[Feature request] CallComposite features should be disabled if they are not available

What feature are you requesting?

It would be great if the CallComposite (of full UI SDK) could implement graceful degradation or progressive enhancement principles. It can be confusing for the end-user when features are not working, due to device or browser limitations.

Think of;

1. Disable screen sharing button when user is using mobile (iOS / Android)
2. Disable speaker picker in pre-join screen when not available (iOS / Android (?))
   and perhaps more that I couldn't think of yet.

What would be the benefit of adding this feature?

Currently the button is visible and enabled which confuses users and developers. They think this is a feature that is supported, where it is not supported (which is already documented).

What solution would be ideal for you?

Best would be if the SDK / CallComposite could detect if screen sharing is possible in the users browser, and enable/disable accordingly. However, I am not sure if it is possible to detect this programmatically.

What alternatives have you considered?

n/a

Is there any additional information for your request?

CallComposite is currently not used by my customer case, since we require other modifications. And in the end, screen sharing should not be possible by the guest, thus this will be disabled entirely. However we faced this and I can imagine that this is problematic for other customers eventually.

Attach screenshots or images add detail to your request:

[Bug] Full text of system message is not displayed in `Message Thread` component

Describe the bug; what happened?
The Message Thread component does not display the full text of any system message if it is overflowing the parent container.

What are the steps to reproduce the issue?
Add the Message Thread component to a React component and add any system message. Reduce the screen width and notice that the overflowing text of the system message is not displayed.
OR
Reduce the screen width of the Message Thread story page and notice that the overflowing text of the system message is not displayed.

What behavior did you expect?
The overflowed text should be displayed in the next line similar to user messages.

If applicable, provide screenshots:

In what environment did you see the issue?

• OS & Device: Windows
• Browser Microsoft Edge
• Version 1.0.0-beta.1

Is there any additional information?

Cannot run samples

Describe the bug; what happened?
When I try to get one of the examples working, by running npm install in the respective folders, I get the following errors:

npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated @types/[email protected]: This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'Calling'
npm ERR! notarget

What are the steps to reproduce the issue?
Clone repo, navigate to the right folder in command-line, run npm install

• OS & Device: Windows 10, PC
• Windows CMD
• Version: 1.0.0.-beta.1

Unexpected type of message in a meeting

Context: We have a notification on the button chat of the meeting control. And this notification is triggered when a new message comes from someone else. So, we figured out that when a recording begin, new special messages comes. These messages are not rendered in the chat by the library but we are tracking all the messages to know if we have to show a notification on the button chat. The problem is that when a recording begin, a message of type text arrives and we don't have a proper way of filtering this in order to not show a notification on the chat button. We want to show the notification only when a message is rendered on the chat.

What happened? When the organizer record the meeting, the guest receive two messages corresponding to recording and transcription. These messages have different types (URIObject and Object), but the type property of the message is text in both cases.

What are the steps to reproduce the issue?
Precondition: use the library "@azure/communication-react": "1.0.1-beta.1" and console.log the message that receive the guest

1. Create the meeting between the organizer (Teams client) and the guest (ACS client).
2. When the provider and the guest are in the meeting, the provider click on record.
3. The guest will receive a message of type text but it will not be rendered on the chat.
4. It could be confusing because this is not a message that is rendered on the chat.

What behavior did you expect? I expect the correct type of message (URIObject and Object) or not send these messages if it is not rendered on the chat.

Screenshots:

In what environment did you see the issue?

• OS & Device: MacOS on PC
• Browser: Google Chrome
• Version: 96.0.4664.110

Is there any additional information?
If we want we can filter by looking the content of the message and see if begins with some pattern (currently we are doing this) but is not the best way to filter these messages.

Demo
On this demo, I show how the bug affects to the notifications of the chat button (in this demo the fix of looking the pattern is not applied that's why the notification is showed).

Grabacion.de.pantalla.2022-01-21.a.la.s.15.16.49.mov

Add rushx update to/in all samples

What feature are you requesting?

Could we add the ability to do rushx update (and also rushx update -p) for a given sample? I haven't looked into if this is possible or not.

What would be the benefit of adding this feature?

Faster iteration when updating SDK and then testing out the changes in single sample versus having to install for all projects (especially if you have a problem and have to do purge).

What solution would be ideal for you?

Ability to do:
rushx update
rushx update -p

What alternatives have you considered?

N/A

Is there any additional information for your request?

N/A

Attach screenshots or images add detail to your request:

[Question] Implementing into MVC

I have an existing MVC app; the only bundling it uses is the Bundler & Minifier extension in VS2019.... so the whole rush thing is new to me anyway. I thought it was like gulp... but apparently there also commands to run a iis express instance.. ok.

I was able to successfully run the StaticHtmlComposite page in Node.js (which btw I'm not the biggest fan of since I work almost exclusively out of visual studio)

I installed the communication-react package from NPM.

I copied the packages that from the Node project for Calling only:

I have the callComposite.js file from the StaticHtmlComposites sample linked to my view also and I get

and the view looks like

`
< div id="video-call" style="height: 750px"></ div>

<script src="/js/staticComposites/callComposite.js"></script>

@section Scripts
{
<script type="text/javascript">
var token = '';
var user = '';

    function getToken() {
        var request = new XMLHttpRequest();
        request.open("GET", "api/calling");
        request.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                var responseObj = JSON.parse(this.response);
                token = responseObj.token;
                user = responseObj.user.communicationUserId;
            }
        };
        request.send();
    }
</script>
<script type="module">
document.addEventListener("DOMContentLoaded", function (event) {
    getToken();
});
const callAdapter = await callComposite.loadCallComposite({
    containerId: 'video-call',
    groupId: '@Model.Content.GroupId', // Provide any GUID to join a group
    displayName: "VegetaIsBetterThanGoku",
    userId: userId,
    token: token
});
window.onbeforeunload = () => {
    callAdapter.dispose();
};

</script> }`

and it looks like the callComposite is breaking here

Probably I've got to build react at some point in my build process? I have no experience with that... I have nothing against React (unlike some in the community) I just have no experience with it. I'm not looking to add any skills to my portfolio haha, I'm passed that stage.

Man I'm frustrated. I get this is a client to client package, and I'm okay with JS SDKs but... it's not turn-key enough for the likes of me. I just want to put the components on the view and theme them with my own css styles... lazy I know, but you guys made me that way :P with your awesome SDKs.

A little help please. I don't want to give up... but I'm close.

Make Meetings composite available without requiring React

What feature are you requesting?
^topic. Today we expose Chat composite and Calling composite. Perhaps in the future we should explore Meetings composite as well.

What would be the benefit of adding this feature?
Customers want to be able to use the Meetings composite but they are not necessarily using React.

What solution would be ideal for you?
A similar API to what we offer from a script tag for Calling/Chat composite.

CallComposite not working properly in Composites Quickstart

Describe the bug; what happened?
While performing the Quickstart of Composites, after clicking on the start call button, an "Initializing call client" loader is loading continuously, thus not able to see the call interface/video tile.

What are the steps to reproduce the issue?
Follow the quickstart here
https://azure.github.io/communication-ui-library/?path=/story/quickstarts-composites--page

What behavior did you expect?
Expected to see the call interface on starting the call.

If applicable, provide screenshots:

In what environment did you see the issue?

• OS & Device: Windows
• Browser - Microsoft Edge/Google Chrome
• Version "@azure/communication-react": "^1.0.0-beta.6"

Is there any additional information?

Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

Local video not working on iOS

Hi,

We are using callComposite without react. The integration was pretty straightforward but after testing on different devices, we realize that the local video is not working on iPhone or iPad. It works fine on Android. How could we fix this?

Thanks,
Rémi

Update to latest Calling SDK (v1.2.1-beta.1)

What feature are you requesting?

Is there an ETA when the @azure/communication-calling dependency will be updated to the latest version, especially for the composite? This is a relatively small change (hopefully), but it will make it a lot easier to test if the new calling SDK fixes.

https://github.com/Azure/Communication/blob/master/releasenotes/acs-javascript-calling-library-release-notes.md#v121-beta1-2021-08-26

Especially issues with Android phones should be fixed now, thus it is good to have this tested with the UI library.

What would be the benefit of adding this feature?

What solution would be ideal for you?

What alternatives have you considered?
Run it from source, which is cumbersome.

Is there a way to be informed that the call is started?

Hi,

I am using callComposite without react. I can easily be informed when the call is ended with this event.

callAdapter.on('callEnded, (event) => {
  console.log(event.callId);
})

Is there something similar but when the call is started, after the user clicks on the button "start call"?

Thanks,
Rémi

Main branch CI Failed

Main CI Pipeline has failed. Please investigate.

The C# backend should be using 1.0.0 dependencies from ACS

^

Teams meetings integration

Hi,

I have a question regarding usage of the Teams-meeting connection part of this library. In our project we specificaly need to connect with Teams meetings, and we used https://github.com/Azure-Samples/communication-services-web-calling-hero as a starting point. I'm trying to use the 'connect to Teams' functionality from communication-ui-library but it seems it relies on several dependencies that don't exist on npm, and are somehow included locally in this repo.

Because of the changes we incorporated into our project alreayd, and due to Rush being extremely slow (> 5mins to startup the frontend), switching to a project based on this library directly isn't an option.

I have also checked the storybook but can't make much sense of the examples there, or how it relates to what this library uses.

Is there any way to use those locally used packages (without using Rush)?

Missing some translation in French

I use callComposite in a non react environment. In order to translate the component in French, I followed the documentation Build your own composite js bundle files and added the locale property.

The code looks like the following:

import { AzureCommunicationTokenCredential } from '@azure/communication-common';
import { CallComposite, COMPOSITE_LOCALE_FR_FR, createAzureCommunicationCallAdapter } from '@azure/communication-react';
import React from 'react';
import ReactDOM from 'react-dom';

export const loadCallComposite = async function (args, htmlElement, props) {
  const { userId, token, groupId, displayName } = args;
  const adapter = await createAzureCommunicationCallAdapter({
    userId,
    displayName: displayName ?? 'anonymous',
    credential: new AzureCommunicationTokenCredential(token),
    locator: { groupId }
  });

  props = {
    ...props,
    locale: COMPOSITE_LOCALE_FR_FR
  };

  ReactDOM.render(React.createElement(CallComposite, { ...props, adapter }, null), htmlElement);
  return adapter;
};

I was able to create the bundle successfully.

However, I noticed that some translations were missing. Is there a way to add those missing translations? See the pictures below.

Thanks,