Habilitar o compartilhamento de arquivos usando a Biblioteca de Interface do Usuário no Chat de Interoperabilidade do Teams - An Azure Communication Services tutorial

Artigo
07/18/2024

Em um chat de interoperabilidade do Teams ("Chat de Interoperabilidade"), podemos habilitar o compartilhamento de arquivos entre usuários finais dos Serviços de Comunicação do Azure e usuários do Teams. Observe que o chat de interoperabilidade é diferente dos Serviços de Comunicação do Azure de Chat. Se você quiser habilitar o compartilhamento de arquivos nos Serviços de Comunicação do Azure de Chat, consulte Adicionar compartilhamento de arquivos com a Biblioteca de Interface do Usuário nos Serviços de Comunicação do Azure de Chat. Atualmente, o usuário final dos Serviços de Comunicação do Azure só pode receber anexos de arquivo do usuário do Teams. Confira Casos de uso da biblioteca de interface do usuário para saber mais.

Importante

O recurso de compartilhamento de arquivos vem com a Composição CallWithChat sem configurações adicionais.

Código de download

Acesse o código deste tutorial no GitHub.

Pré-requisitos

Uma conta do Azure com uma assinatura ativa. Para obter detalhes, confira Criar uma conta gratuitamente.
Visual Studio Code em uma das plataformas compatíveis.
Versões do Node.js, do LTS Ativo e de LTS de Manutenção. Use o comando node --version para verificar sua versão.
Um recurso e uma cadeia de conexão ativos dos Serviços de Comunicação. Crie um recurso dos Serviços de Comunicação.
Usando a versão da biblioteca de interface do usuário 1.17.0 ou a mais recente.
Tenha uma reunião do Teams criada e o link da reunião pronto.
Familiarize-se com o funcionamento da Composição do ChatWithChat.

Tela de fundo

Em primeiro lugar, precisamos entender que o Chat de Interoperabilidade do Teams tem que fazer parte de uma reunião do Teams no momento. Quando o usuário do Teams cria uma reunião online, uma conversa de chat seria criada e associada à reunião. Para permitir que o usuário final dos Serviços de Comunicação do Azure ingresse no chat e comece a enviar/receber mensagens, um participante da reunião (um usuário do Teams) precisará admiti-lo na chamada primeiro. Caso contrário, ele não tem acesso ao chat.

Depois que o usuário final dos Serviços de Comunicação do Azure for admitido na chamada, ele poderá começar a conversar com outros participantes na chamada. Neste tutorial, estamos verificando como a imagem embutida funciona no chat de interoperabilidade.

Visão geral

Semelhante a como estamos Adicionando suporte de imagem embutida à biblioteca de interface do usuário, precisamos de uma Composição CallWithChat criada. Vamos seguir o exemplo básico da página do storybook para criar uma Composição do ChatWithChat.

No código de exemplo, ele precisa de CallWithChatExampleProps, que é definido como o seguinte snippet de código:

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

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

Para poder iniciar a Composição para chat de reunião, precisamos passar TeamsMeetingLinkLocator ou TeamsMeetingIdLocator, que tem esta aparência:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

{ "meetingId": "<TEAMS_MEETING_ID>", "passcode": "<TEAMS_MEETING_PASSCODE>"}

É tudo o que você precisa – não há necessidade de nenhuma outra configuração para permitir que o usuário final dos Serviços de Comunicação do Azure receba anexos de arquivo de um usuário do Teams!

Permissões

Quando o arquivo é compartilhado de um cliente do Teams, o usuário do Teams tem opções para definir as permissões de arquivo como:

"Qualquer pessoa"
"Pessoas na sua organização"
"Pessoas atualmente neste chat"
"Pessoas com acesso preexistente"
"Pessoas escolhidas por você"

Especificamente, atualmente, a biblioteca de interface do usuário dá suporte apenas a "Qualquer pessoa" e "Pessoas escolhidas por você" (com endereço de email) e não há suporte para todas as outras permissões. Se o usuário do Teams enviou um arquivo com permissões sem suporte, o usuário final dos Serviços de Comunicação do Azure poderá ser solicitado a fazer logon ou ter o acesso negado quando clicar no anexo de arquivo no thread do chat.

Captura de tela de um cliente do Teams listando as permissões de arquivo.

Além disso, o administrador de locatários do usuário do Teams pode impor restrições ao compartilhamento de arquivos, incluindo desabilitar algumas permissões de arquivo ou desabilitar a opção de compartilhamento de arquivos em conjunto.

Executar o código

Vamos executar npm run start e, após isso, você deve ser capaz de acessar nosso aplicativo de exemplo localhost:3000 por meio da seguinte captura de tela:

Captura de tela de uma biblioteca de interface do usuário dos Serviços de Comunicação do Azure.

Basta clicar no botão de chat localizado na parte inferior para revelar o painel de chat e, agora, se o usuário do Teams enviar alguns arquivos, você deverá ver algo semelhante à seguinte captura de tela:

Captura de tela de um cliente do Teams enviando um arquivo.