Aller au contenu principal

Interactions possibles

Des données / fonctionnalités sont exportées pour une utilisation dans une application Reactjs, ou bien liées à la variable window pour une utilisation en vanillajs.
N.B. : l'utilisation en intégration dans une application Reactjs étant préconisée, les interactions sont plus nombreuses dans ce cas.

Liste des exports de Retorik Framework
exports from package
export {
  RetorikAgent, // composant principal
  RetorikWidget, // composant principal (version widget)
  RetorikNews, // composant principal (version chaîne d'information uniquement)
  renderAgent,
  addDetailedAttachmentTrigger, // méthode pour ajouter un composant de rendu spécifique en réponse à une action
  addExternalActivityHandler, // (depuis v3.0.1) méthode remplaçant 'externalEventHandler'. Permet d'ajouter un handler de type (action: any) => boolean pour chaque activité transitant dans le directline.
  cancelCurrentUtterance, // (depuis v3.0.1) méthode permettant de forcer l'arrêt de la synthèse vocale en cours
  characters, // personnages disponibles format vidéo
  closeWidget, // (composant RetorikWidget) méthode d'appel de fermeture du widget
  fetchAvailableLanguages, // méthode de récupération des langues disponibles
  getRetorikConfigs, // méthode de récupération des données de configuration depuis Retorik Studio
  getThemeColors, // méthode de récupération des données de couleur de l'application
  hideAgent, // méthode pour cacher l'agent
  openWidget, // (composant RetorikWidget) méthode d'appel d'ouverture du widget
  pauseConversation, // (depuis v3.0.1) méthode permettant de mettre en pause l'activité du directline. Aucune activité entrante / sortante ne sera traitée
  playExternalSynthesis, // (depuis v3.0.1) méthode permettant de faire lire un texte avec le système de synthèse vocale intégré.
  presets, // données de positionnement d'un personnage 3D
  resumeConversation, // (depuis v3.0.1) méthode permettant de remettre en marche l'activité du directline après une pause
  resetStores, // méthode effaçant tout le contenu des stores (retour aux valeurs par défaut)
  sendActivity, // (déprécié depuis la v3.2.6) méthode permettant d'envoyer une activité via le canal directline
  sendEvent, // méthode permettant d'envoyer une activité de type event via le canal directline
  sendMessage, // méthode permettant d'envoyer une activité de type message via le canal directline
  sendMessageToChatbot, // (depuis v3.0.1) méthode permettant d'envoyer un message directement au front-end comme s'il provenait du back-end sans passer par le canal directline
  setCurrentCustomView, // méthode pour forcer le rendu d'une vue personnalisée
  setCurrentSubView, // méthode pour forcer le rendu d'une vue secondaire
  setDashboardOpened, // (depuis v3.2.6) méthode permettant d'ouvrir / fermer le menu principal
  setDisplaySubtitles, // méthode permettant d'afficher / cacher les sous-titres
  setLoaderClosed, // méthode pour forcer la fermeture de la page d'accueil de choix de mode
  setLocale, // méthode d'assignation de la langue à utiliser, au format <langue>-<CULTURE> (ex: 'en-US', 'fr-FR')
  setModalFullscreenContent, // (depuis v3.0.1) méthode permettant d'affecter un composant ReactJs ou null dans la fenêtre modale en surcouche de l'application
  setMode, // méthode pour changer le mode d'entrée des données utilisateur (vocale ou texte). Import enum { Mode } pour avoir les différentes possibilités
  setMuted, // (depuis v3.0.1) méthode permettant de couper / réactiver le son
  setPrintingCallback, // méthode appelée lors du clic sur le bouton 'imprimer' sur l'écran de prévisualisatin d'un fichier pdf, avec l'URL du document en paramètre d'entrée.
  setVisibility, // (depuis v3.0.1) méthode permettant de cacher / rendre visible l'application
  showAgent, // méthode pour afficher l'agent
  toggleDisplay, // (composant RetorikWidget) méthode d'appel de changement de la taille du composant (si possible)
  toggleMicrophone, // (depuis v3.0.1) méthode permettant de basculer le statut actuel du micro (ouvert / fermé)
  toggleSubtitles, // (depuis v3.0.1) méthode permettant de basculer le statut actuel des sous-titres (visibles / cachés)
  toggleVisibility, // (depuis v3.0.1) méthode permettant de basculer le statut actuel de la visibilité de l'application (visible / invisible)
  toggleWidget, // (composant RetorikWidget) méthode d'appel de passage d'un état à l'autre (ouvert -> fermé / fermé -> ouvert)
  useConfiguration, // (depuis v3.0.1) hook pour récupérer le paramètre 'configuration'
  useCurrentSubView, // (depuis v3.0.1) hook pour récupérer le paramètre 'currentSubView'
  useIsMobile, // (depuis v3.0.1) hook pour récupérer le paramètre 'isMobile' (booléen : true = appareil mobile ou widget)
  useIsRTL, // (depuis v3.0.1) hook pour récupérer le paramètre 'isRTL' (booléen : true = langue rtl (right-to-left), ex : arabe, hébreu)
  useIsUsedOnBorne, // (depuis v3.0.1) hook pour récupérer le paramètre 'isUsedOnBorne' (booléen : true = mode borne => pas d'ouverture de lien externe, urls transformés en QRcodes)
  useIsWidget, // (depuis v3.0.1) hook pour récupérer le paramètre 'isWidget' (booléen : true = mode widget)
  useKioskParameterOpening, // (depuis v3.0.1) hook pour récupérer le paramètre 'kioskParameterOpening'
  useLoaderClosed, // (depuis v3.0.1) hook pour récupérer le paramètre 'loaderClosed'
  useLocale, // (depuis v3.0.1) hook pour récupérer le paramètre 'locale' (string : langue actuellement sélectionnée)
  useMode, // (depuis v3.0.1) hook pour récupérer le paramètre 'mode' (vocal ou texte)
  useMuted, // (depuis v3.0.1) hook pour récupérer le paramètre 'muted' (booléen : true = son coupé)
  useRetorikEvent, // (depuis v3.0.1) hook pour récupérer le paramètre 'retorikevent'
  useTranslation, // (depuis v3.0.1) hook pour récupérer le paramètre 'translation' (traduction des textes internes dans la langue actuelle)
  useThemeColors, // (depuis v3.0.1) hook pour récupérer le paramètre 'themeColors' (couleurs de l'application)
};

Affichage d'un composant externe / page externe​

Le Retorik Framework possède une fenêtre dans laquelle un composant ReactJs peut être injecté, pour être affiché en surcouche de l'application principale.
Elle est notamment utilisée pour la prévisualisation des fichiers pdf. Son utilisation passe par la méthode setModalFullscreenContent(component: JSX.Element | null): void qui prend en paramètre un composant React à afficher ou bien null pour fermer la fenêtre.
Elle peut aussi être utilisée en vanillaJs depuis la version 3.2.5 en utilisant cette méthode via window.Retorik.setModalFullscreenContent.

Exemple
import { setModalFullscreenContent } from '@davi-ai/retorik-framework';

const componentToRender: JSX.Element = (
  <div
    style={{
      width: '100%',
      height: '100%',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    }}
    onClick={() => setModalFullscreenContent(null)}
  >
    Composant à afficher, fermeture au clic
  </div>
);

setModalFullscreenContent(componentToRender);

Utilisation de script externe pour interagir avec l'application (customCSS / customScripts)​

Depuis la v3.2.5, il est préconisé d'utiliser les options customScripts et customCSS directement depuis Retorik Studio pour injecter des fichiers de style CSS ou des scripts d'interaction avec l'application. Ces scripts peuvent utiliser les méthodes exposées sur l'élément window pour modifier les états. Les scripts importés doivent être des fichiers .js, et ne sont pas importés en tant que modules.

Exemple d'ajout d'un externalEventHandler
// Ajout d'un externalEventHandler
const handler = (action) => {
  if (action.payload.activity.type === 'event') {
    console.log("Cette activité est de type 'event', je coupe la chaîne de traitement avec return = true");
    return true;
  }

  return false;
};

// Ajout du handler dans l'application via la méthode window.Retorik.addExternalActivityHandler
window.Retorik.addExternalActivityHandler(handler);

Les méthodes prenant en paramètre des composants ReactJs sont aussi utilisables, mais pour cela il faut :

  • que ReactJs soit importé dans le fichier (utiliser le chemin vers "node_modules/react/cjs/react.production.min.js" pour éviter une erreur dûe à l'absence d'une variable d'environnement)
  • que le fichier .js final contienne le code compilé
Exemple d'injection d'un composant ReactJs
  import React from '../node_modules/react/cjs/react.production.min.js';

  // Composant ReactJs qui sera injecté
  const CustomComponent = ({ source }) => {
    const handleClick = () => {
      window.Retorik.setModalFullscreenContent(null);
    };

    return (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          gap: '1rem',
        }}
      >
        <div
          style={{
            height: '2rem',
            width: '100%',
            padding: '0px 1rem',
            display: 'flex',
            flexFlow: 'wrap',
            background: 'white',
            cursor: 'pointer',
            placeContent: 'center',
          }}
          onClick={handleClick}
        >
          {' '}
          FERMER ✕{' '}
        </div>
        <iframe src={source} height="850" width="1100"></iframe>
      </div>
    );
  };

  const externalHandler = (action) => {
    if (action.payload?.activity?.name === 'hospitality.ShowContentItem' || action.payload?.activity?.name === 'hospitality.ShowPointOfInterest') {
      const url = action.payload.activity.value?.content?.Thing?.Url?.Url || 'https://davi.ai';
      // Utilisation de la méthode liée à window.Retorik pour injecter le composant dans la fenêtre modale de l'application
      url && window.Retorik.setModalFullscreenContent(<CustomComponent source={url} />);

      return true;
    }

    return false;
  };

  window.Retorik.addExternalActivityHandler(externalHandler);