Flex Manager

O Flex Manager é o ponto de acesso para controlar sua instância do Flex e todos os produtos Twilio subjacentes usados para comunicações e tarefas de atribuição. Isso significa que, em seu projeto do Flex, você pode acessar o TaskRouter ou o cliente de chat diretamente pelo Flex Manager.

Além do próprio Flex, o Manager também dá acesso aos SDKs do Programmable Chat, Sync, Client e TaskRouter .

Manager Class

See the official Flex UI 1.x docs on the Manager class for a full list of attributes and methods.

How to obtain the Manager instance

You can access the manager as follows:

By calling the `getInstance` method

Flex.Manager.getInstance()

By calling the `create` method when initializing Flex

return Flex
  .provideLoginInfo(configuration, "#container")
  .then(() => Flex.Manager.create(configuration))
  .then(manager => {
    // use manager here
  })
  .catch(error => handleError(error));

You can check out the sample project on how to initialize Flex.

In the init method of your plugin

init(flex, manager) {
  // use manager here
}

Subscribing to Manager events

You can use Flex Manager to subscribe to events that occur from Flex. See Flex Events for more details.

import { Manager } from "@twilio/flex-ui";
const manager = Manager.getInstance();

manager.events.addListener('eventName', (payload) => {
  // implement logic here
});

For example, you can subscribe to the pluginsLoaded event to know when all Flex Plugins have loaded.

manager.events.addListener("pluginsLoaded", () => {
  console.log("Plugins have been loaded!");
});

Casos de uso comuns e exemplos

Este exemplo faz login do connect no console do navegador sempre que o agente se coneta a uma chamada:

Flex.Manager.getInstance().voiceClient.on('connect', () => {
  console.log('connect');
});

Ao misturar chamadas para o Gerenciador com Actions Framework (Estrutura de ações), você pode executar tarefas mais complexas, como este exemplo, que aceita automaticamente todos os chats de entrada para agentes:

Flex.Manager.getInstance().workerClient.on("reservationCreated", reservation => {
  if (reservation.task.taskChannelUniqueName === 'chat' && reservation.task.direction === 'inbound') {
    Flex.Actions.invokeAction("AcceptTask", {sid: reservation.sid});
    Flex.Actions.invokeAction("SelectTask", {sid: reservation.sid});
  }
});

insightsClient

O insightsClient fornece acesso ao SDK do Twilio Sync. Para contas do Flex, isso dá acesso aos dados de funcionários e tarefas por meio do uso de duas classes:

• Classe LiveQuery: para consultar dados do Flex e receber atualizações enviadas sempre que registros novos (ou atualizados) corresponderem à expressão fornecida
• Classe InstantQuery: para obter um instantâneo estático dos dados do Flex

Ambas as classes precisam de dois argumentos:

• Nome do índice: conjunto de dados para o qual a consulta é executada. Os nomes de índice atualmente suportados para o Flex são: tr-task, tr-worker, tr-reservation, tr-queue.
• Consulta: esta é a consulta usada para filtrar os dados do índice. A sintaxe da consulta está documentada aqui. A consulta pode ser uma string vazia: nesse caso, todo o conjunto de dados é retornado (por exemplo, todos os funcionários).

Exemplo de LiveQuery

Nesse exemplo, o insightsClient é usado para consultar os funcionários com activity_name definido como Available e assinar as alterações. Isso significa que cada vez que um funcionário altera seu status para Available, um evento itemUpdated é disparado. Se um funcionário alterar seu status de Available para qualquer outro status, itemRemoved o evento é disparado.

Flex.Manager.insightsClient
  .liveQuery('tr-worker', 'data.activity_name == "Available"')
  .then(function (args) {
    console.log(
      'Subscribed to live data updates for worker in "Available" activity'
    );
    args.on('itemRemoved', function (args) {
      console.log('Worker ' + args.key + ' is no longer "Available"');
    });
    args.on('itemUpdated', function (args) {
      console.log('Worker ' + args.key + ' is now "Available"');
    });
  })
  .catch(function (err) {
    console.log('Error when subscribing to live updates', err);
  });

Exemplo de InstantQuery

Nesse exemplo, o insightsClient é usado para consultar os funcionários com habilidades específicas dentro de seu attributes. Isso retorna uma matriz de funcionários que pode ser usada para fornecer dados estáticos.

manager.insightsClient.instantQuery('tr-worker').then((q) => {
  q.on('searchResult', (items) => {
    // Do something with the results
  });
  q.search('data.attributes.languages contains "english"');
});