Flex Manager

Flex Manager es el punto de acceso para controlar la instancia de Flex y todos los productos de Twilio subyacentes utilizados para las comunicaciones y la asignación de tareas. Esto significa que dentro del proyecto de Flex, puedes acceder al cliente de TaskRouter o Chat directamente a través del administrador de Flex.

Además de Flex, el administrador también te da acceso a los SDK de Programmable Chat, Sync, Clienty 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!");
});

Ejemplos y casos de uso comunes

Este ejemplo registra connect en la consola del explorador siempre que el agente se conecta a una llamada:

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

Al combinar llamadas al administrador con el marco de acciones, puedes realizar tareas más complejas como este ejemplo, que acepta automáticamente todos los chats entrantes para los 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

insightsClient proporciona acceso al SDK de Twilio Sync. Para las cuentas de Flex, esto proporciona acceso a los datos de trabajadores y tareas mediante el uso de dos clases:

• Clase LiveQuery: para consultar datos de Flex y recibe actualizaciones emergentes siempre que los registros nuevos (o actualizados) coincidan con la expresión dada
• Clase InstantQuery: para obtener una instantánea estática de los datos de Flex

Ambas clases necesitan los siguientes dos argumentos:

• Nombre de índice: conjunto de datos en función del cual se ejecuta la consulta. Los nombres de índice admitidos actualmente para Flex son: tr-task, tr-worker, tr-reservation, tr-queue.
• Consulta: esta es la consulta utilizada para filtrar los datos del índice. La sintaxis de la consulta está documentada aquí. La consulta puede ser una cadena vacía: en este caso se devuelve el conjunto de datos completo (por ejemplo, todos los trabajadores).

Ejemplo de LiveQuery

En este ejemplo, se utiliza insightsClient para consultar a los trabajadores que tienen activity_name establecido en Available (Disponible) y se suscriben a los cambios. Esto significa que cada vez que un trabajador cambia su estado a Available (Disponible), se activa un evento itemUpdated. Si un trabajador cambia su estado de Available (Disponible) a cualquier otro estado, se activa el evento itemRemoved.

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);
  });

Ejemplo de InstantQuery

En este ejemplo, se utiliza insightsClient para consultar a los trabajadores con habilidades específicas dentro de sus attributes (atributos). Esto devuelve una matriz de trabajadores que se puede utilizar para proporcionar datos 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"');
});