chatux Télécharger - chatux Téléchargement du code source

Aperçu

' chatux ' est une bibliothèque qui vous permet de créer facilement des fenêtres de discussion sur votre PC ou mobile

Il est sous licence MIT.

Comment c'est ' chatux ' ?

Il s'agit d'une bibliothèque d'interface utilisateur de chat (chat UI) indépendante et légère pour javascript.

Vous pouvez créer des pages pour les agents de chat et les chatbots prenant en charge à la fois les smartphones et les PC.
Pour PC, affichez le chat dans une fenêtre qui ne perturbe pas le contenu existant
Pour les appareils mobiles comme les téléphones intelligents et les tablettes, l'interface utilisateur de chat sera superposée aux pages existantes pour éviter de perturber le contenu existant.

DÉMO

https://riversun.github.io/chatux/

Comment jouer à la démo.

Cette démo est un simple chat d'écho. Mais quelques commandes sont disponibles. Si vous écrivez « afficher les boutons », vous pouvez voir les boutons d'action dans le chat. Ou vous écrivez "afficher l'image", vous pouvez voir l'image dans le chat.

Un exemple de projet est disponible sur ce dépôt.
https://github.com/riversun/chatux-example

Démarrage rapide

Vérifiez cet exemple.

chatux example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> </head> <body style="padding:0px;margin:0px;"> <div style="padding:40px"> <h1> chatux example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <script src="https://cdn.jsdelivr.net/npm/chatux/dist/ chatux .min.js"></script> <script> const chatux = new chatux (); const opt = { api: { // URL of chat server endpoint: 'https://script.google.com/macros/s/AKfycbwpf8iZfGXkJD6K__oCVQYF35HLBQjYxmKP0Ifrpe_piK4By4rh/exec', // HTTP METHOD method: 'GET', // DATA TYPE dataType: 'jsonp', // escapeUserInput true:Escaping HTML tags in user input text when submitting to the server. default is false. escapeUserInput: true, }, window: { title: 'My chat', infoUrl: 'https://github.com/riversun/chatux' } }; //initialize chatux .init(opt); chatux .start(true); </script> </body> </html> ">

 <!DOCTYPE html >
< html lang =" en " >
< head >
    < title > chatux example </ title >
    < meta charset =" utf-8 " >
    < meta name =" viewport " content =" width=device-width, initial-scale=1, maximum-scale=1 " >
</ head >
< body style =" padding:0px;margin:0px; " >
< div style =" padding:40px " >
    < h1 > chatux example </ h1 >
    < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. </ p >
</ div >
< script src =" https://cdn.jsdelivr.net/npm/chatux/dist/ chatux .min.js " > </ script >
< script >

    const chatux = new chatux ( ) ;

    const opt = {
        api : {
            // URL of chat server
            endpoint : 'https://script.google.com/macros/s/AKfycbwpf8iZfGXkJD6K__oCVQYF35HLBQjYxmKP0Ifrpe_piK4By4rh/exec' ,
            // HTTP METHOD
            method : 'GET' ,
            // DATA TYPE
            dataType : 'jsonp' ,
            // escapeUserInput true:Escaping HTML tags in user input text when submitting to the server. default is false.
            escapeUserInput : true ,
        } ,
        window : {
            title : 'My chat' ,
            infoUrl : 'https://github.com/riversun/chatux'
        }
    } ;

    //initialize
    chatux . init ( opt ) ;
    chatux . start ( true ) ;

</ script >
</ body >
</ html >

installation et code minimal

en utilisant npm

installer

 npm install chatux --save

code

chatux '; const chatux = new chatux (); chatux .init({ api: { endpoint: 'http://localhost:8080/chat',//chat server method: 'GET',//HTTP METHOD when requesting chat server dataType: 'json',//json or jsonp is available escapeUserInput: true,//true:Escaping HTML tags in user input text when submitting to the server. default is false. } }); chatux .start();">

 import { chatux } from ' chatux ' ;

const chatux = new chatux ( ) ;

chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' , //chat server
    method : 'GET' , //HTTP METHOD when requesting chat server
    dataType : 'json' , //json or jsonp is available
    escapeUserInput : true , //true:Escaping HTML tags in user input text when submitting to the server. default is false.
  }
} ) ;

chatux . start ( ) ;

utilisation avec la balise de script

 <script src="https://cdn.jsdelivr.net/npm/chatux/dist/ chatux .min.js"></script>

code

chatux (); chatux .init({ api: { endpoint: 'http://localhost:8080/chat',//chat server method: 'GET',//HTTP METHOD when requesting chat server dataType: 'json',//json or jsonp is available escapeUserInput: true,// true:Escaping HTML tags in user input text when submitting to the server. default is false. } }); chatux .start(); ">

 const chatux = new chatux ( ) ;

chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' , //chat server
    method : 'GET' , //HTTP METHOD when requesting chat server
    dataType : 'json' , //json or jsonp is available
    escapeUserInput : true , // true:Escaping HTML tags in user input text when submitting to the server. default is false.
  }
} ) ;

chatux . start ( ) ;

Comment ça marche

Le système de chatux est très simple.

Regardons la séquence d'exécution de chatux .

Supposons que vous disposiez d'un serveur de discussion pour chatux à l'adresse http://localhost:8080/chat Spécifiez le point de terminaison du serveur comme celui-ci.

chatux.init({ api: { endpoint: 'http://localhost:8080/chat', method: 'GET', dataType: 'json', escapeUserInput: true,// true:Escaping HTML tags in user input text when submitting to the server. default is false. } }); ">

 chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' ,
    method : 'GET' ,
    dataType : 'json' ,
    escapeUserInput : true , // true:Escaping HTML tags in user input text when submitting to the server. default is false.
  }
} ) ;

Voici la séquence.

1. chatux envoie le texte saisi par l'utilisateur au serveur de discussion.
  OBTENIR http://localhost:8080/chat?text=hello
1. Le serveur traite le texte saisi par l'utilisateur et renvoie une réponse au format JSON.

{
  "output" : [
    {
      "type" : " text " ,
      "value" : " You say 'hello' "
    }
  ]
}

1. Selon la réponse, chatux affiche le résultat sur l'écran de discussion.

Ainsi, si vous créez un serveur de chat capable d’effectuer ce type d’interaction, vous pouvez facilement créer des chatbots, etc.

Voyons ensuite comment effectuer le rendu.

Serveur de discussion

Créons un simple serveur de discussion.

initialiser le projet npm et installer express

npm init
npm install express

Écrivez un serveur simple qui renvoie json.

 const express = require ( 'express' ) ;
const app = express ( ) ;
const port = 8080 ;

// enabling CORS
app . use ( function ( req , res , next ) {
  res . header ( 'Access-Control-Allow-Origin' , '*' ) ;
  res . header ( 'Access-Control-Allow-Headers' , '*' ) ;
  next ( ) ;
} ) ;
app . get ( '/chat' , function ( req , res ) {
  const userInputText = req . query . text ;

  const response = {
    output : [ ]
  } ;

  const msg = response . output ;
  msg . push ( {
    type : 'text' ,
    value : `You say ${ userInputText } `
  } ) ;
  res . json ( response ) ;
} ) ;

app . listen ( port , ( ) => {
  console . log ( 'chat server started on port:' + port ) ;
} ) ;

démarrer le serveur

npm start

Accéder au répertoire

http://localhost:8081/chat?text=bonjour

Vous obtiendrez JSON pour chatux comme suit.

{
  "output" : [
    {
      "type" : " text " ,
      "value" : " You say hello "
    }
  ]
}

Accès depuis chatux sur navigateur

chatux.init({ api: { endpoint: 'http://localhost:8080/chat', method: 'GET', dataType: 'json', escapeUserInput: true, } }); chatux .start(true);//true:automatically open chat ">

 chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' ,
    method : 'GET' ,
    dataType : 'json' ,
    escapeUserInput : true ,
  }
} ) ;
chatux . start ( true ) ; //true:automatically open chat

Paramètres de requête personnalisés

Il existe deux approches pour spécifier les paramètres de requête.

1.Les paramètres de requête personnalisés peuvent être définis lors de l’initialisation.

chatux.init({ api: { endpoint: 'http://localhost:8080/chat', method: 'GET', dataType: 'json', params: { 'param1': 'value1', 'param2': 'value2' } } }); ">

 chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' ,
    method : 'GET' ,
    dataType : 'json' ,
    params : {
      'param1' : 'value1' ,
      'param2' : 'value2'
    }
  }
} ) ;

chat ux enverra des paramètres tels que 'https://example.com/api?param1=value1&param2=value2'

2. Des paramètres personnalisés peuvent être définis à chaque demande.

chatux.init({ api: { endpoint: 'http://localhost:8080/chat', method: 'GET', dataType: 'json', }, methods: { onPrepareRequest: (httpClient) => { //intercept http request before sending and set query parameters httpClient.params.param1 = 'value1'; httpClient.params.param2 = 'value2'; }, onFinishRequest: (httpClient) => { //delete params after sending delete httpClient.params.param1; delete httpClient.params.param2; } } }); ">

 chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' ,
    method : 'GET' ,
    dataType : 'json' ,
  } ,
  methods : {
    onPrepareRequest : ( httpClient ) => {
      //intercept http request before sending and set query parameters
      httpClient . params . param1 = 'value1' ;
      httpClient . params . param2 = 'value2' ;
    } ,
    onFinishRequest : ( httpClient ) => {
      //delete params after sending
      delete httpClient . params . param1 ;
      delete httpClient . params . param2 ;
    }
  }
} ) ;

Si rien n'est défini, seul le paramètre de requête nommé « texte » sera défini lorsque vous appuyez sur le bouton d'envoi.

En-têtes HTTP personnalisés

Il existe deux approches pour définir les en-têtes http.

1. Des en-têtes personnalisés peuvent être définis lors de l'initialisation.

Vous pouvez spécifier les en-têtes http comme suit.

chatux.init({ api: { endpoint: 'http://localhost:8080/chat', method: 'GET', dataType: 'json', escapeUserInput: true, headers: { 'Authorization': 'Bearer ABCD123ABCD123ABCD123', 'X-Additional-Headers': 'something_value' } } }); ">

 chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' ,
    method : 'GET' ,
    dataType : 'json' ,
    escapeUserInput : true ,
    headers : {
      'Authorization' : 'Bearer ABCD123ABCD123ABCD123' ,
      'X-Additional-Headers' : 'something_value'
    }
  }
} ) ;

2. Des en-têtes personnalisés peuvent être définis à chaque demande.

chatux.init({ api: { endpoint: 'http://localhost:8080/chat', method: 'GET', dataType: 'json', escapeUserInput: true, }, methods: { onPrepareRequest: (httpClient) => { httpClient.headers = {}; httpClient.headers['Authorization'] = 'Bearer ABCD123ABCD123ABCD123'; httpClient.headers['X-Additional-Headers'] = 'something_value'; } } }); ">

 chatux . init ( {
  api : {
    endpoint : 'http://localhost:8080/chat' ,
    method : 'GET' ,
    dataType : 'json' ,
    escapeUserInput : true ,
  } ,
  methods : {
    onPrepareRequest : ( httpClient ) => {
      httpClient . headers = { } ;
      httpClient . headers [ 'Authorization' ] = 'Bearer ABCD123ABCD123ABCD123' ;
      httpClient . headers [ 'X-Additional-Headers' ] = 'something_value' ;
    }
  }
} ) ;

Note

Les en-têtes HTTP ne peuvent pas être envoyés lors de l'utilisation de jsonp.
N'oubliez pas 'Access-Control-Allow-Headers' lors de l'accès avec cors :)

Comment afficher une interface utilisateur de chat

Étant donné que chatux peut restituer diverses variantes de l'interface utilisateur de chat, je les présente ci-dessous. Je souhaite montrer respectivement le JSON brut et l'exemple de code pour le serveur de discussion.

Afficher le texte

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  msg . push ( {
    type : 'text' ,
    value : 'Hello world'
  } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " text " ,
      "value" : " Hello world! "
    }
  ]
}

RÉSULTAT

Afficher l'image

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  msg . push ( {
    type : 'image' ,
    value : 'https://avatars1.githubusercontent.com/u/11747460'
  } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " image " ,
      "value" : " https://avatars1.githubusercontent.com/u/11747460 "
    }
  ]
}

RÉSULTAT

Afficher les boutons d'action

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  const opts = [ ] ;
  opts . push ( { label : 'label1' , value : 'value1' } ) ;
  opts . push ( { label : 'label2' , value : 'value2' } ) ;
  opts . push ( { label : 'label3' , value : 'value3' } ) ;
  msg . push ( { type : "option" , options : opts } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " option " ,
      "options" : [
        {
          "label" : " label1 " ,
          "value" : " value1 "
        },
        {
          "label" : " label2 " ,
          "value" : " value2 "
        },
        {
          "label" : " label3 " ,
          "value" : " value3 "
        }
      ]
    }
  ]
}

RÉSULTAT

Afficher le code HTML

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  msg . push ( {
    type : 'html' ,
    value : 'Click <a href="https://github.com/riversun" target="_blank" >here</a> to open a page.' ,
    delayMs : 500
  } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " html " ,
      "value" : " Click <a href= " https://github.com/riversun " target= " _blank " >here</a> to open a page. " ,
      "delayMs" : 500
    }
  ]
}

RÉSULTAT

Afficher YouTube

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  const videoId = 'TP4lxliMHXY' ; //youtube video id
  msg . push ( {
    type : 'youtube' ,
    value : videoId ,
    delayMs : 500 // wait(milliseconds)
  } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " youtube " ,
      "value" : " TP4lxliMHXY " ,
      "delayMs" : 500
    }
  ]
}

RÉSULTAT

Afficher plusieurs éléments

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  msg . push ( {
    type : 'text' ,
    value : 'What is this?' ,
    delayMs : 500
  } ) ;
  msg . push ( {
    type : 'image' ,
    value : 'https://upload.wikimedia.org/wikipedia/commons/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg'
  } ) ;
  const opts = [ ] ;
  opts . push ( { label : 'bob' , value : 'value1' } ) ;
  opts . push ( { label : 'riversun' , value : 'value2' } ) ;
  opts . push ( { label : 'john' , value : 'value3' } ) ;
  msg . push ( { type : 'option' , options : opts } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " text " ,
      "value" : " What is this? " ,
      "delayMs" : 500
    },
    {
      "type" : " image " ,
      "value" : " https://upload.wikimedia.org/wikipedia/commons/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg "
    },
    {
      "type" : " option " ,
      "options" : [
        {
          "label" : " bob " ,
          "value" : " value1 "
        },
        {
          "label" : " riversun " ,
          "value" : " value2 "
        },
        {
          "label" : " john " ,
          "value" : " value3 "
        }
      ]
    }
  ]
}

RÉSULTAT

Ouvrir la sous-fenêtre (ex.Url que vous souhaitez afficher)

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  msg . push ( {
    type : 'window' ,
    title : 'iframe page' ,
    url : 'https://riversun.github.io/i18nice' ,
    left : 20 ,
    top : 20 ,
    width : 400 ,
    height : 250 ,
    addYOffset : true ,
    overflow : 'hidden' ,
    backgroundColor : 'black' ,
    delayMs : 10
  } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " window " ,
      "title" : " iframe page " ,
      "url" : " https://riversun.github.io/i18nice " ,
      "left" : 20 ,
      "top" : 20 ,
      "width" : 400 ,
      "height" : 250 ,
      "addYOffset" : true
    }
  ]
}

RÉSULTAT

Ouvrir la sous-fenêtre (ex. Afficher la vidéo YouTube sur la fenêtre)

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  msg . push ( {
    type : 'window' ,
    title : 'youtube movie' ,
    html : '<div style="position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden">' +
      '<iframe style="position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;" width="400" height="300"  src="https://www.youtube.com/embed/nepdFs-2V1Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>' ,
    mobileUrl : 'https://www.youtube.com/embed/nepdFs-2V1Y' ,
    left : 60 ,
    top : 60 ,
    width : 400 ,
    height : 250 ,
    addYOffset : true ,
    overflow : 'hidden' ,
    backgroundColor : 'black' ,
    delayMs : 10 // wait(milliseconds)
  } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " window " ,
      "title" : " youtube movie " ,
      "html" : " <div style= " position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden " ><iframe style= " position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important; " width= " 400 " height= " 300 "  src= " https://www.youtube.com/embed/nepdFs-2V1Y " frameborder= " 0 " allow= " accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture " allowfullscreen></iframe></div> " ,
      "mobileUrl" : " https://www.youtube.com/embed/nepdFs-2V1Y " ,
      "left" : 60 ,
      "top" : 60 ,
      "width" : 400 ,
      "height" : 250 ,
      "addYOffset" : true ,
      "overflow" : " hidden " ,
      "backgroundColor" : " black " ,
      "delayMs" : 10
    }
  ]
}

RÉSULTAT

Ouvrir la sous-fenêtre (ex. Vidéo sur Google Drive)

CODE DU SERVEUR

 app . get ( '/chat' , function ( req , res ) {
  const response = { output : [ ] } ;
  const msg = response . output ;
  msg . push ( {
    type : 'window' ,
    title : 'google drive movie' ,
    html : '<div style="position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden">' +
      '<iframe  style="position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;"  src="https://drive.google.com/file/d/1FfOnq85pQgXtNsZeaF7P_CCsdKzcRrQk/preview" width="400" height="300"></iframe>' +
      '</div>' ,
    mobileUrl : 'https://drive.google.com/file/d/1FfOnq85pQgXtNsZeaF7P_CCsdKzcRrQk/preview' , //open this url when open on mobile
    left : 100 ,
    top : 100 ,
    width : 400 ,
    height : 250 ,
    addYOffset : true ,
    overflow : 'hidden' ,
    backgroundColor : 'black' ,
    delayMs : 10 // wait(milliseconds)
  } ) ;
  res . json ( response ) ;
} ) ;

JSON

{
  "output" : [
    {
      "type" : " window " ,
      "title" : " google drive movie " ,
      "html" : " <div style= " position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden " ><iframe  style= " position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important; "  src= " https://drive.google.com/file/d/something_id/preview " width= " 400 " height= " 300 " ></iframe></div> " ,
      "mobileUrl" : " https://drive.google.com/file/d/something_id/preview " ,
      "left" : 100 ,
      "top" : 100 ,
      "width" : 400 ,
      "height" : 250 ,
      "addYOffset" : true ,
      "overflow" : " hidden " ,
      "backgroundColor" : " black " ,
      "delayMs" : 10
    }
  ]
}

RÉSULTAT

Paramètres d'initialisation

L'exemple suivant montre tous les paramètres d'initialisation chatux . Vous pouvez personnaliser le comportement de chatux à votre guise.

chatux (); //init parameters const opt = { renderMode: 'auto',//'auto' or 'pc' or 'mobile' buttonOffWhenOpenFrame: false,//true:Turn off wakeup button when the chat window is opened.only for pc mode. bot: { wakeupText: null,//user input which is automatically send to server on startup botPhoto: null,//URL of bot photo image humanPhoto: null,//URL of human photo image widget: { sendLabel: 'SEND',//label for SEND button placeHolder: 'Say something'//default caption for input box } }, api: { endpoint: 'http://localhost:8081/chat',//endpoint of chat server method: 'GET',//'GET' or 'POST' dataType: 'json',//'json' or 'jsonp' errorResponse: { output: [ //Message displayed when a network error occurs when accessing the chat server {type: 'text', value: 'Sorry, an error occurred'} ] }, //set http headers headers: { 'Authorization': 'Bearer ABCD123ABCD123ABCD123', 'X-Additional-Headers': 'something_value' }, //set query parameters params: { 'param1': 'value1', 'param2': 'value2' } }, window: { title: 'My chat',//window title //infoUrl // If this value is set, an 'info' icon will appear at the left of the window's // title bar, and clicking this icon will jump to this URL infoUrl: 'https://github.com/riversun/chatux', size: { width: 350,//window width in px height: 500,//window height in px minWidth: 300,//window minimum-width in px minHeight: 300,//window minimum-height in px titleHeight: 50//title bar height in px }, appearance: { //border - border style of the window border: { shadow: '2px 2px 10px rgba(0, 0, 0, 0.5)', width: 0, radius: 6 }, //titleBar - title style of the window titleBar: { fontSize: 14, color: 'white', background: '#4784d4', leftMargin: 40, height: 40, buttonWidth: 36, buttonHeight: 16, buttonColor: 'white', buttons: [ //Icon named 'hideButton' to close chat window { fa: 'fas fa-times',//specify font awesome icon name: 'hideButton', visible: true } ], buttonsOnLeft: [ //Icon named 'info' to jump to 'infourl' when clicked { fa: 'fas fa-comment-alt',//specify font awesome icon name: 'info', visible: true } ], }, } }, //wakeupButton style wakeupButton: { right: 20,//right position in pixel bottom: 20,//bottom position in pixel size: 60,//wakeup button size fontSize: 25//wakeup button font size for fontawesome icon }, //Define a callback method to be called when an event occurs methods: { onChatWindowCreate: (win) => { //Called only once when a chat window is created console.log('#onChatWindowCreate'); }, onChatWindowPause: (win) => { //Called when the chat window is closed console.log('#onChatWindowPause'); }, onChatWindowResume: (win) => { //Called when the chat window is back to open console.log('#onChatWindowResume'); }, onUserInput: (userInputText) => { //Called back when the user enters text. //In other words, this method can intercept text input. // If it returns true, it is treated as consumed and no user-input-text is sent to the server. console.log('#onUserInput userInputText=' + userInputText); if (userInputText === 'end') { const consumed = true; chatux .dispose(); return consumed; } }, //For local test, get the user input text but stop accessing the chat server. // onServerProcess: (userInputText) => { // const response = {"output": [{"type": "text", "value": 'You said "' + userInputText + '"'}]}; // return response; // }, // onPrepareRequest: (httpClient) => { // httpClient.params.mykey1 = 'valOfmykey1';//set original query param // }, // onFinishRequest: (httpClient) => { // delete httpClient.params.mykey1; // }, onServerResponse: (response) => { //A callback that occurs when there is a response from the chat server. // You can handle server responses before reflecting them in the chat UI. console.log('#onServerResponse response=' + JSON.stringify(response)); return response; } } }; //initialize chatux .init(opt); chatux .start(true);//true:open chat UI automatically">

 const chatux = new chatux ( ) ;

//init parameters
const opt = {
  renderMode : 'auto' , //'auto' or 'pc' or 'mobile'
  buttonOffWhenOpenFrame : false , //true:Turn off wakeup button when the chat window is opened.only for pc mode.
  bot : {
    wakeupText : null , //user input which is automatically send to server on startup
    botPhoto : null , //URL of bot photo image
    humanPhoto : null , //URL of human photo image
    widget : {
      sendLabel : 'SEND' , //label for SEND button
      placeHolder : 'Say something' //default caption for input box
    }
  } ,
  api : {
    endpoint : 'http://localhost:8081/chat' , //endpoint of chat server
    method : 'GET' , //'GET' or 'POST'
    dataType : 'json' , //'json' or 'jsonp'
    errorResponse : {
      output : [
        //Message displayed when a network error occurs when accessing the chat server
        { type : 'text' , value : 'Sorry, an error occurred' }
      ]
    } ,
    //set http headers
    headers : {
      'Authorization' : 'Bearer ABCD123ABCD123ABCD123' ,
      'X-Additional-Headers' : 'something_value'
    } ,
    //set query parameters            
    params : {
      'param1' : 'value1' ,
      'param2' : 'value2'
    }
  } ,
  window : {
    title : 'My chat' , //window title

    //infoUrl
    // If this value is set, an 'info' icon will appear at the left of the window's
    // title bar, and  clicking this icon will jump to this URL
    infoUrl : 'https://github.com/riversun/chatux' ,
    size : {
      width : 350 , //window width in px
      height : 500 , //window height in px
      minWidth : 300 , //window minimum-width in px
      minHeight : 300 , //window minimum-height in px
      titleHeight : 50 //title bar height in px
    } ,
    appearance : {
      //border - border style of the window
      border : {
        shadow : '2px 2px 10px  rgba(0, 0, 0, 0.5)' ,
        width : 0 ,
        radius : 6
      } ,
      //titleBar - title style of the window
      titleBar : {
        fontSize : 14 ,
        color : 'white' ,
        background : '#4784d4' ,
        leftMargin : 40 ,
        height : 40 ,
        buttonWidth : 36 ,
        buttonHeight : 16 ,
        buttonColor : 'white' ,
        buttons : [
          //Icon named 'hideButton' to close chat window
          {
            fa : 'fas fa-times' , //specify font awesome icon
            name : 'hideButton' ,
            visible : true
          }
        ] ,
        buttonsOnLeft : [
          //Icon named 'info' to jump to 'infourl' when clicked
          {
            fa : 'fas fa-comment-alt' , //specify font awesome icon
            name : 'info' ,
            visible : true
          }
        ] ,
      } ,
    }
  } ,
  //wakeupButton style
  wakeupButton : {
    right : 20 , //right position in pixel
    bottom : 20 , //bottom position in pixel
    size : 60 , //wakeup button size
    fontSize : 25 //wakeup button font size for fontawesome icon
  } ,
  //Define a callback method to be called when an event occurs
  methods : {
    onChatWindowCreate : ( win ) => {
      //Called only once when a chat window is created
      console . log ( '#onChatWindowCreate' ) ;
    } ,
    onChatWindowPause : ( win ) => {
      //Called when the chat window is closed
      console . log ( '#onChatWindowPause' ) ;
    } ,
    onChatWindowResume : ( win ) => {
      //Called when the chat window is back to open
      console . log ( '#onChatWindowResume' ) ;
    } ,
    onUserInput : ( userInputText ) => {
      //Called back when the user enters text.
      //In other words, this method can intercept text input.
      // If it returns true, it is treated as consumed and no user-input-text is sent to the server.
      console . log ( '#onUserInput userInputText=' + userInputText ) ;
      if ( userInputText === 'end' ) {
        const consumed = true ;
        chatux . dispose ( ) ;
        return consumed ;
      }
    } ,
    //For local test, get the user input text but stop accessing the chat server.
    // onServerProcess: (userInputText) => {
    //     const response = {"output": [{"type": "text", "value": 'You said "' + userInputText + '"'}]};
    //     return response;
    // },
    // onPrepareRequest: (httpClient) => {
    //     httpClient.params.mykey1 = 'valOfmykey1';//set original query param
    // },
    // onFinishRequest: (httpClient) => {
    //     delete httpClient.params.mykey1;
    // },            
    onServerResponse : ( response ) => {
      //A callback that occurs when there is a response from the chat server.
      // You can handle server responses before reflecting them in the chat UI.
      console . log ( '#onServerResponse response=' + JSON . stringify ( response ) ) ;
      return response ;
    }
  }
} ;

//initialize
chatux . init ( opt ) ;

chatux . start ( true ) ; //true:open chat UI automatically