chatux 다운로드 - chatux 소스 코드 다운로드

개요

' chatux '는 PC나 모바일에서 채팅창을 쉽게 만들 수 있는 라이브러리입니다.

MIT 라이선스에 따라 라이선스가 부여됩니다.

' chatux '는 어떤가요?

자바스크립트를 위한 독립적이고 가벼운 채팅 사용자 인터페이스(채팅 UI) 라이브러리입니다.

스마트폰과 PC를 모두 지원하는 채팅 에이전트, 챗봇용 페이지를 생성할 수 있습니다.
PC의 경우 기존 콘텐츠를 방해하지 않는 창에 채팅을 표시합니다.
스마트폰, 태블릿 등 모바일 기기의 경우 기존 콘텐츠를 방해하지 않도록 채팅 UI가 기존 페이지에 오버레이됩니다.

데모

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

데모 플레이 방법.

이 데모는 간단한 에코 채팅입니다. 하지만 몇 가지 명령을 사용할 수 있습니다. "버튼 표시"라고 쓰면 채팅에서 작업 버튼을 볼 수 있습니다. 또는 "이미지 표시"라고 입력하시면 채팅창에서 이미지를 보실 수 있습니다.

이 저장소에서 예제 프로젝트를 사용할 수 있습니다.
https://github.com/riversun/chatux-example

빠른 시작

이 예를 확인하세요.

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 >

설치 및 최소 코드

npm 사용

설치하다

 npm install chatux --save

암호

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

스크립트 태그와 함께 사용

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

암호

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

작동 원리

chatux 의 시스템은 매우 간단합니다.

chatux 의 실행 순서를 살펴보자.

http://localhost:8080/chat에 chatux 용 채팅 서버가 있다고 가정합니다. 이와 같이 서버 끝점을 지정합니다.

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

다음은 순서입니다.

1. chatux 사용자 입력 텍스트를 채팅 서버로 보냅니다.
  GET http://localhost:8080/chat?text=hello
1. 서버는 사용자 입력 텍스트를 처리하고 응답을 JSON으로 반환합니다.

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

1. 응답에 따라 chatux 결과를 채팅 화면에 렌더링합니다.

그래서 이런 상호작용이 가능한 채팅서버를 만들면 챗봇 등을 쉽게 만들 수 있습니다.

다음으로 렌더링 방법을 살펴보겠습니다.

채팅 서버

간단한 채팅 서버를 만들어 보겠습니다.

npm 프로젝트 초기화 및 express 설치

npm init
npm install express

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

서버 시작

npm start

액세스 디렉토리

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

다음과 같이 chatux 에 대한 JSON을 얻을 수 있습니다.

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

브라우저의 chatux 에서 액세스

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

맞춤 쿼리 매개변수

쿼리 매개변수를 지정하는 방법에는 두 가지가 있습니다.

1. 초기화 시 사용자 정의 쿼리 매개변수를 설정할 수 있습니다.

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는 'https://example.com/api?param1=value1&param2=value2'와 같은 매개변수를 보냅니다.

2. 각 요청마다 맞춤 매개변수를 설정할 수 있습니다.

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

아무것도 설정하지 않은 경우 보내기 버튼을 탭하면 'text'라는 쿼리 매개변수만 설정됩니다.

사용자 정의 HTTP 헤더

http 헤더를 설정하는 방법에는 두 가지가 있습니다.

1. 초기화 시 사용자 정의 헤더를 설정할 수 있습니다.

다음과 같이 http-header를 지정할 수 있습니다.

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. 각 요청마다 사용자 정의 헤더를 설정할 수 있습니다.

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

메모

jsonp를 사용하는 경우 Http 헤더를 보낼 수 없습니다.
cors로 접근할 때 'Access-Control-Allow-Headers'를 잊지 마세요 :)

채팅 UI를 렌더링하는 방법

chatux 채팅 UI의 다양한 변형을 렌더링할 수 있으므로 아래에서 소개합니다. 채팅 서버에 대한 원시 JSON과 코드 예제를 각각 보여주고 싶습니다.

텍스트 표시

서버 코드

 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! "
    }
  ]
}

결과

이미지 표시

서버 코드

 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 "
    }
  ]
}

결과

작업 버튼 표시

서버 코드

 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 "
        }
      ]
    }
  ]
}

결과

HTML 표시

서버 코드

 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
    }
  ]
}

결과

유튜브 표시

서버 코드

 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
    }
  ]
}

결과

여러 요소 표시

서버 코드

 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 "
        }
      ]
    }
  ]
}

결과

하위 창 열기(예: 표시하려는 URL)

서버 코드

 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
    }
  ]
}

결과

하위 창 열기(예: 창에 YouTube 동영상 표시)

서버 코드

 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
    }
  ]
}

결과

하위 창 열기(예: Google 드라이브의 동영상)

서버 코드

 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
    }
  ]
}

결과

초기화 매개변수

다음 예는 모든 chatux 초기화 매개변수를 보여줍니다. 원하는 대로 chatux 의 동작을 사용자 정의할 수 있습니다.

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