Enable inline image using UI Library in Teams Interoperability Chat

In a Teams Interoperability Chat ("Interop Chat"), we can enable Azure Communication Service end users to receive inline images sent by Teams users. Currently, the Azure Communication Service end user is able to only receive inline images from the Teams user. Refer to UI Library Use Cases to learn more.

Important

Inline image feature comes with the CallWithChat Composite without additional setups.

Download code

Access the code for this tutorial on GitHub.

Prerequisites

• An Azure account with an active subscription. For details, see Create an account for free.
• Visual Studio Code on one of the supported platforms.
• Node.js, Active LTS and Maintenance LTS versions. Use the node --version command to check your version.
• An active Communication Services resource and connection string. Create a Communication Services resource.
• Using the UI library version 1.15.0 or the latest.
• Have a Teams meeting created and the meeting link ready.
• Be familiar with how ChatWithChat Composite works.

Background

First of all, we need to understand that Teams Interop Chat has to part of a Teams meeting currently. When the Teams user creates an online meeting, a chat thread would be created and associated with the meeting. To enable the Azure Communication Service end user joining the chat and starting to send/receive messages, a meeting participant (a Teams user) would need to admit them to the call first. Otherwise, they don't have access to the chat.

Once the Azure Communication Service end user is admitted to the call, they would be able to start to chat with other participants on the call. In this tutorial, we're checking out how inline image works in Interop chat.

Overview

As mentioned previously, since we need to join a Teams meeting first, we need to use the ChatWithChat Composite from the UI library.

Let's follow the basic example from the storybook page to create a ChatWithChat Composite.

From the sample code, it needs CallWithChatExampleProps, which is defined as the following code snippet:

export type CallWithChatExampleProps = {
  // Props needed for the construction of the CallWithChatAdapter
  userId: CommunicationUserIdentifier;
  token: string;
  displayName: string;
  endpointUrl: string;
  locator: TeamsMeetingLinkLocator | CallAndChatLocator;

  // Props to customize the CallWithChatComposite experience
  fluentTheme?: PartialTheme | Theme;
  compositeOptions?: CallWithChatCompositeOptions;
  callInvitationURL?: string;
};

To be able to start the Composite for meeting chat, we need to pass TeamsMeetingLinkLocator, which looks like this:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

This is all you need - and there's no other setup needed to enable inline image specifically.

Run the code

Let's run npm run start then you should be able to access our sample app via localhost:3000 like the following screenshot:

Simply click on the chat button located in the bottom to reveal the chat panel and now if Teams user sends an image, you should see something like the following screenshot:

Note that in a Teams Interop Chat, we currently only support Azure Communication Service end user to receive inline images sent by the Teams user. To learn more about what features are supported, refer to the UI Library use cases

Known Issues

• The UI library might not support certain GIF images at this time. The user might receive a static image instead.
• the Web UI library doesn't support Clips (short videos) sent by the Teams users at this time.

Next steps

Check the rest of the UI Library

You may also want to:

• Check UI Library use cases
• Add chat to your app
• Creating user access tokens
• Learn about client and server architecture
• Learn about authentication
• Add file sharing with UI Library in Azure Communication Service Chat
• Add file sharing with UI Library in Teams Interoperability Chat