{"id":22443074,"url":"https://github.com/riversun/chatux","last_synced_at":"2025-08-01T18:33:56.046Z","repository":{"id":34294312,"uuid":"175105471","full_name":"riversun/chatux","owner":"riversun","description":"Chat Bot UI / Conversational UI library for Java Script","archived":false,"fork":false,"pushed_at":"2023-03-03T14:23:17.000Z","size":1635,"stargazers_count":90,"open_issues_count":24,"forks_count":22,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-05T17:07:55.699Z","etag":null,"topics":["bot","chat","framework","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/riversun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-12T00:32:57.000Z","updated_at":"2024-11-22T11:37:39.000Z","dependencies_parsed_at":"2024-10-24T17:18:00.529Z","dependency_job_id":null,"html_url":"https://github.com/riversun/chatux","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":0.05660377358490565,"last_synced_commit":"6cd06bf66edb03095ab0f346600c1a30ab8c6022"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fchatux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fchatux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fchatux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riversun%2Fchatux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riversun","download_url":"https://codeload.github.com/riversun/chatux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228398746,"owners_count":17913675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bot","chat","framework","ui"],"created_at":"2024-12-06T02:22:24.573Z","updated_at":"2024-12-06T02:22:25.246Z","avatar_url":"https://github.com/riversun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Overview\n\n'chatux' is a library that allows you to easily create chat windows on your PC or mobile\n\nIt is licensed under [MIT](https://opensource.org/licenses/MIT) license.\n\n[![npm version](https://badge.fury.io/js/chatux.svg)](https://badge.fury.io/js/chatux)\n\n### What is '**chatux**' like?\n\nIt is an independent and lightweight chat user interface (chat UI) library for javascript.\n\n- You can create pages for chat agents and chat bots that support both smartphones and PCs.\n- For PC, show chat in a window that does not disturb existing content\n- For mobile devices like smart phones and tablets, chat UI will be overlaid on existing pages to avoid disturbing\n  existing content\n\n[![guide](https://riversun.github.io/chatux/guide.png)](https://riversun.github.io/chatux/)\n\n# DEMO\n\nhttps://riversun.github.io/chatux/\n\n\u003cimg src=\"https://riversun.github.io/chatux/chatux_qr.png\"\u003e\n\n**How to play demo.**\n\nThis demo is simple echo chat. But a few command available.If you write \"show buttons\", you can see action buttons in\nchat. Or you write \"show image\", you can see image in chat.\n\nExample project is available on this repo.  \nhttps://github.com/riversun/chatux-example\n\n# Quick start\n\nCheck this example.\n\n```html\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003ctitle\u003echatux example\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\"\u003e\n\u003c/head\u003e\n\u003cbody style=\"padding:0px;margin:0px;\"\u003e\n\u003cdiv style=\"padding:40px\"\u003e\n    \u003ch1\u003echatux example\u003c/h1\u003e\n    \u003cp\u003e Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n        magna aliqua.\u003c/p\u003e\n\u003c/div\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chatux/dist/chatux.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\n    const chatux = new ChatUx();\n\n    const opt = {\n        api: {\n            // URL of chat server\n            endpoint: 'https://script.google.com/macros/s/AKfycbwpf8iZfGXkJD6K__oCVQYF35HLBQjYxmKP0Ifrpe_piK4By4rh/exec',\n            // HTTP METHOD\n            method: 'GET',\n            // DATA TYPE\n            dataType: 'jsonp',\n            // escapeUserInput true:Escaping HTML tags in user input text when submitting to the server. default is false.\n            escapeUserInput: true,\n        },\n        window: {\n            title: 'My chat',\n            infoUrl: 'https://github.com/riversun/chatux'\n        }\n    };\n\n    //initialize\n    chatux.init(opt);\n    chatux.start(true);\n\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n\u003c!-- \n**Show on PC**\n\n[![guide](https://riversun.github.io/chatux/onpc.png)](https://riversun.github.io/chatux/)\n\n\n**Show on mobile**\n\n[![guide](https://riversun.github.io/chatux/onmobile.png)](https://riversun.github.io/chatux/)\n\n--\u003e\n\n## install and minimal code\n\n### using npm\n\n**install**\n\n```\nnpm install chatux --save\n```\n\n**code**\n\n```js\nimport {ChatUx} from 'chatux';\n\nconst chatux = new ChatUx();\n\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',//chat server\n    method: 'GET',//HTTP METHOD when requesting chat server\n    dataType: 'json',//json or jsonp is available\n    escapeUserInput: true,//true:Escaping HTML tags in user input text when submitting to the server. default is false.\n  }\n});\n\nchatux.start();\n```\n\n### using with script tag\n\n```\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/chatux/dist/chatux.min.js\"\u003e\u003c/script\u003e\n```\n\n**code**\n\n```js\nconst chatux = new ChatUx();\n\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',//chat server\n    method: 'GET',//HTTP METHOD when requesting chat server\n    dataType: 'json',//json or jsonp is available\n    escapeUserInput: true,// true:Escaping HTML tags in user input text when submitting to the server. default is false.\n  }\n});\n\nchatux.start();\n\n\n```\n\n# How it works\n\nThe system of **chatux** is very simple.\n\nLet's look at the execution sequence of **chatux**.\n\nSuppose you have a chat server for **chatux** at http://localhost:8080/chat\nSpecify server endpoint like this.\n\n```js\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',\n    method: 'GET',\n    dataType: 'json',\n    escapeUserInput: true,// true:Escaping HTML tags in user input text when submitting to the server. default is false.\n  }\n});\n\n```\n\nThe following is the sequence.\n\n![image](https://user-images.githubusercontent.com/11747460/54331314-d3735f80-465c-11e9-9a22-5a975809f770.png)\n\n-\n    1. **chatux** sends user input text to chat server.  \n       GET http://localhost:8080/chat?text=hello\n\n-\n    2. The server processes user input text and returns a response as JSON.\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"text\",\n      \"value\": \"You say 'hello'\"\n    }\n  ]\n}\n```\n\n-\n    3. According to the response, **chatux** renders the result on the chat screen.  \n       ![image](https://user-images.githubusercontent.com/11747460/54341678-c4e97000-467d-11e9-96e5-090d4ac8ba9c.png)\n\nSo, if you create chat server that can do this kind of interaction, you can easily create chatbots etc.\n\nNext, let's see how to render.\n\n# Chat server\n\nLet's create a simple chat server.\n\n* initialize npm project and install express\n\n```shell\nnpm init\nnpm install express\n```\n\n* Write a simple server that returns json.\n\n```js\nconst express = require('express');\nconst app = express();\nconst port = 8080;\n\n// enabling CORS\napp.use(function (req, res, next) {\n  res.header('Access-Control-Allow-Origin', '*');\n  res.header('Access-Control-Allow-Headers', '*');\n  next();\n});\napp.get('/chat', function (req, res) {\n  const userInputText = req.query.text;\n\n  const response = {\n    output: []\n  };\n\n  const msg = response.output;\n  msg.push({\n    type: 'text',\n    value: `You say ${userInputText}`\n  });\n  res.json(response);\n});\n\napp.listen(port, () =\u003e {\n  console.log('chat server started on port:' + port);\n});\n\n\n```\n\n* start server\n\n```shell\nnpm start\n```\n\n* Access directory\n\nhttp://localhost:8081/chat?text=hello\n\nYou will get JSON for chatux as follows.\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"text\",\n      \"value\": \"You say hello\"\n    }\n  ]\n}\n```\n\n* Access from **ChatUX** on browser\n\n```js\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',\n    method: 'GET',\n    dataType: 'json',\n    escapeUserInput: true,\n  }\n});\nchatux.start(true);//true:automatically open chat\n\n```\n\n![image](https://user-images.githubusercontent.com/11747460/54860945-e379f600-4d64-11e9-9f23-1636343f3607.png)\n\n\u003chr\u003e\n\n# Custom query parameters\n\nThere are two approaches to specifying query parameters.\n\n1.Custom query parameters can be set at initialization.\n\n```js\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',\n    method: 'GET',\n    dataType: 'json',\n    params: {\n      'param1': 'value1',\n      'param2': 'value2'\n    }\n  }\n});\n\n```\n\nchat ux will send parameters like 'https://example.com/api?param1=value1\u0026param2=value2'\n\n2.Custom parameters can be set at each request.\n\n```js\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',\n    method: 'GET',\n    dataType: 'json',\n  },\n  methods: {\n    onPrepareRequest: (httpClient) =\u003e {\n      //intercept http request before sending and set query parameters\n      httpClient.params.param1 = 'value1';\n      httpClient.params.param2 = 'value2';\n    },\n    onFinishRequest: (httpClient) =\u003e {\n      //delete params after sending\n      delete httpClient.params.param1;\n      delete httpClient.params.param2;\n    }\n  }\n});\n\n```\n\nIf nothing is set, only the query parameter named 'text' will be set when you tap send button.\n\n# Custom Http Headers\n\nThere are two approaches to set http headers.\n\n1.Custom headeres can be set at initialization.\n\nYou can specify http-headers like as follows.\n\n```js\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',\n    method: 'GET',\n    dataType: 'json',\n    escapeUserInput: true,\n    headers: {\n      'Authorization': 'Bearer ABCD123ABCD123ABCD123',\n      'X-Additional-Headers': 'something_value'\n    }\n  }\n});\n\n```\n\n2.Custom headers can be set at each request.\n\n```js\nchatux.init({\n  api: {\n    endpoint: 'http://localhost:8080/chat',\n    method: 'GET',\n    dataType: 'json',\n    escapeUserInput: true,\n  },\n  methods: {\n    onPrepareRequest: (httpClient) =\u003e {\n      httpClient.headers = {};\n      httpClient.headers['Authorization'] = 'Bearer ABCD123ABCD123ABCD123';\n      httpClient.headers['X-Additional-Headers'] = 'something_value';\n    }\n  }\n});\n\n```\n\n**Note**\n\n- Http headers cannot be sent when using jsonp.\n- Don't forget 'Access-Control-Allow-Headers' when accessing with cors :)\n\n# How to render a chat UI\n\nSince chatux can render various variations of chat UI, I introduce them below. I want to show raw JSON and code example\nfor chat server respectively.\n\n### Show text\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  msg.push({\n    type: 'text',\n    value: 'Hello world'\n  });\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"text\",\n      \"value\": \"Hello world!\"\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54342102-f44cac80-467e-11e9-89c9-05b01ca64e78.png)\n\n\u003chr\u003e\n\n### Show image\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  msg.push({\n    type: 'image',\n    value: 'https://avatars1.githubusercontent.com/u/11747460'\n  });\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"image\",\n      \"value\": \"https://avatars1.githubusercontent.com/u/11747460\"\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54341630-9ff4fd00-467d-11e9-9355-6236785841fb.png)\n\n\u003chr\u003e\n\n### Show action buttons\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  const opts = [];\n  opts.push({label: 'label1', value: 'value1'});\n  opts.push({label: 'label2', value: 'value2'});\n  opts.push({label: 'label3', value: 'value3'});\n  msg.push({type: \"option\", options: opts});\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"option\",\n      \"options\": [\n        {\n          \"label\": \"label1\",\n          \"value\": \"value1\"\n        },\n        {\n          \"label\": \"label2\",\n          \"value\": \"value2\"\n        },\n        {\n          \"label\": \"label3\",\n          \"value\": \"value3\"\n        }\n      ]\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54356961-389c7480-46a0-11e9-9d47-2b0b5500f3e7.png)\n\n\u003chr\u003e\n\n### Show html\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  msg.push({\n    type: 'html',\n    value: 'Click \u003ca href=\"https://github.com/riversun\" target=\"_blank\" \u003ehere\u003c/a\u003e to open a page.',\n    delayMs: 500\n  });\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"html\",\n      \"value\": \"Click \u003ca href=\\\"https://github.com/riversun\\\" target=\\\"_blank\\\" \u003ehere\u003c/a\u003e to open a page.\",\n      \"delayMs\": 500\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54356215-684a7d00-469e-11e9-82b6-c9d99f6d6610.png)\n\n\u003chr\u003e\n\n### Show youtube\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  const videoId = 'TP4lxliMHXY'; //youtube video id\n  msg.push({\n    type: 'youtube',\n    value: videoId,\n    delayMs: 500 // wait(milliseconds)\n  });\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"youtube\",\n      \"value\": \"TP4lxliMHXY\",\n      \"delayMs\": 500\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54350146-0e42bb00-4690-11e9-9ced-192e47bea481.png)\n\n\u003chr\u003e\n\n### Show multiple elements\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  msg.push({\n    type: 'text',\n    value: 'What is this?',\n    delayMs: 500\n  });\n  msg.push({\n    type: 'image',\n    value: 'https://upload.wikimedia.org/wikipedia/commons/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg'\n  });\n  const opts = [];\n  opts.push({label: 'bob', value: 'value1'});\n  opts.push({label: 'riversun', value: 'value2'});\n  opts.push({label: 'john', value: 'value3'});\n  msg.push({type: 'option', options: opts});\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"text\",\n      \"value\": \"What is this?\",\n      \"delayMs\": 500\n    },\n    {\n      \"type\": \"image\",\n      \"value\": \"https://upload.wikimedia.org/wikipedia/commons/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg\"\n    },\n    {\n      \"type\": \"option\",\n      \"options\": [\n        {\n          \"label\": \"bob\",\n          \"value\": \"value1\"\n        },\n        {\n          \"label\": \"riversun\",\n          \"value\": \"value2\"\n        },\n        {\n          \"label\": \"john\",\n          \"value\": \"value3\"\n        }\n      ]\n    }\n  ]\n}\n\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54357551-b0b76a00-46a1-11e9-8f75-cdfd97a42e0d.png)\n\n\u003chr\u003e\n\n## Open sub window (ex.Url you want to show)\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  msg.push({\n    type: 'window',\n    title: 'iframe page',\n    url: 'https://riversun.github.io/i18nice',\n    left: 20,\n    top: 20,\n    width: 400,\n    height: 250,\n    addYOffset: true,\n    overflow: 'hidden',\n    backgroundColor: 'black',\n    delayMs: 10\n  });\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"window\",\n      \"title\": \"iframe page\",\n      \"url\": \"https://riversun.github.io/i18nice\",\n      \"left\": 20,\n      \"top\": 20,\n      \"width\": 400,\n      \"height\": 250,\n      \"addYOffset\": true\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54411353-6cc07580-4732-11e9-8fbf-27e484acd421.png)\n\n\u003chr\u003e\n\n## Open sub window (ex.Show youtube video on the window)\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  msg.push({\n    type: 'window',\n    title: 'youtube movie',\n    html: '\u003cdiv style=\"position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden\"\u003e' +\n      '\u003ciframe 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\u003e\u003c/iframe\u003e\u003c/div\u003e',\n    mobileUrl: 'https://www.youtube.com/embed/nepdFs-2V1Y',\n    left: 60,\n    top: 60,\n    width: 400,\n    height: 250,\n    addYOffset: true,\n    overflow: 'hidden',\n    backgroundColor: 'black',\n    delayMs: 10 // wait(milliseconds)\n  });\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"window\",\n      \"title\": \"youtube movie\",\n      \"html\": \"\u003cdiv style=\\\"position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden\\\"\u003e\u003ciframe 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\u003e\u003c/iframe\u003e\u003c/div\u003e\",\n      \"mobileUrl\": \"https://www.youtube.com/embed/nepdFs-2V1Y\",\n      \"left\": 60,\n      \"top\": 60,\n      \"width\": 400,\n      \"height\": 250,\n      \"addYOffset\": true,\n      \"overflow\": \"hidden\",\n      \"backgroundColor\": \"black\",\n      \"delayMs\": 10\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54411528-199af280-4733-11e9-8ef5-eceb4af57e6a.png)\n\n\u003chr\u003e\n\n## Open sub window (ex.Video on Google Drive)\n\n**SERVER CODE**\n\n```js\napp.get('/chat', function (req, res) {\n  const response = {output: []};\n  const msg = response.output;\n  msg.push({\n    type: 'window',\n    title: 'google drive movie',\n    html: '\u003cdiv style=\"position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden\"\u003e' +\n      '\u003ciframe  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\"\u003e\u003c/iframe\u003e' +\n      '\u003c/div\u003e',\n    mobileUrl: 'https://drive.google.com/file/d/1FfOnq85pQgXtNsZeaF7P_CCsdKzcRrQk/preview',//open this url when open on mobile\n    left: 100,\n    top: 100,\n    width: 400,\n    height: 250,\n    addYOffset: true,\n    overflow: 'hidden',\n    backgroundColor: 'black',\n    delayMs: 10 // wait(milliseconds)\n  });\n  res.json(response);\n});\n```\n\n**JSON**\n\n```json\n{\n  \"output\": [\n    {\n      \"type\": \"window\",\n      \"title\": \"google drive movie\",\n      \"html\": \"\u003cdiv style=\\\"position: relative; width: 100%; padding-top: 56.25%;background:black;overflow: hidden\\\"\u003e\u003ciframe  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\\\"\u003e\u003c/iframe\u003e\u003c/div\u003e\",\n      \"mobileUrl\": \"https://drive.google.com/file/d/something_id/preview\",\n      \"left\": 100,\n      \"top\": 100,\n      \"width\": 400,\n      \"height\": 250,\n      \"addYOffset\": true,\n      \"overflow\": \"hidden\",\n      \"backgroundColor\": \"black\",\n      \"delayMs\": 10\n    }\n  ]\n}\n```\n\n**RESULT**\n\n![image](https://user-images.githubusercontent.com/11747460/54411133-9200b400-4731-11e9-8270-f79d318c3252.png)\n\n# Initialization parameters\n\nThe following example shows all **ChatUX** initialization parameters. You can customize the behavior of ChatUX as you\nlike.\n\n```js\n\nconst chatux = new ChatUx();\n\n//init parameters\nconst opt = {\n  renderMode: 'auto',//'auto' or 'pc' or 'mobile'\n  buttonOffWhenOpenFrame: false,//true:Turn off wakeup button when the chat window is opened.only for pc mode.\n  bot: {\n    wakeupText: null,//user input which is automatically send to server on startup\n    botPhoto: null,//URL of bot photo image\n    humanPhoto: null,//URL of human photo image\n    widget: {\n      sendLabel: 'SEND',//label for SEND button\n      placeHolder: 'Say something'//default caption for input box\n    }\n  },\n  api: {\n    endpoint: 'http://localhost:8081/chat',//endpoint of chat server\n    method: 'GET',//'GET' or 'POST'\n    dataType: 'json',//'json' or 'jsonp'\n    errorResponse: {\n      output: [\n        //Message displayed when a network error occurs when accessing the chat server\n        {type: 'text', value: 'Sorry, an error occurred'}\n      ]\n    },\n    //set http headers\n    headers: {\n      'Authorization': 'Bearer ABCD123ABCD123ABCD123',\n      'X-Additional-Headers': 'something_value'\n    },\n    //set query parameters            \n    params: {\n      'param1': 'value1',\n      'param2': 'value2'\n    }\n  },\n  window: {\n    title: 'My chat',//window title\n\n    //infoUrl\n    // If this value is set, an 'info' icon will appear at the left of the window's\n    // title bar, and  clicking this icon will jump to this URL\n    infoUrl: 'https://github.com/riversun/chatux',\n    size: {\n      width: 350,//window width in px\n      height: 500,//window height in px\n      minWidth: 300,//window minimum-width in px\n      minHeight: 300,//window minimum-height in px\n      titleHeight: 50//title bar height in px\n    },\n    appearance: {\n      //border - border style of the window\n      border: {\n        shadow: '2px 2px 10px  rgba(0, 0, 0, 0.5)',\n        width: 0,\n        radius: 6\n      },\n      //titleBar - title style of the window\n      titleBar: {\n        fontSize: 14,\n        color: 'white',\n        background: '#4784d4',\n        leftMargin: 40,\n        height: 40,\n        buttonWidth: 36,\n        buttonHeight: 16,\n        buttonColor: 'white',\n        buttons: [\n          //Icon named 'hideButton' to close chat window\n          {\n            fa: 'fas fa-times',//specify font awesome icon\n            name: 'hideButton',\n            visible: true\n          }\n        ],\n        buttonsOnLeft: [\n          //Icon named 'info' to jump to 'infourl' when clicked\n          {\n            fa: 'fas fa-comment-alt',//specify font awesome icon\n            name: 'info',\n            visible: true\n          }\n        ],\n      },\n    }\n  },\n  //wakeupButton style\n  wakeupButton: {\n    right: 20,//right position in pixel\n    bottom: 20,//bottom position in pixel\n    size: 60,//wakeup button size\n    fontSize: 25//wakeup button font size for fontawesome icon\n  },\n  //Define a callback method to be called when an event occurs\n  methods: {\n    onChatWindowCreate: (win) =\u003e {\n      //Called only once when a chat window is created\n      console.log('#onChatWindowCreate');\n    },\n    onChatWindowPause: (win) =\u003e {\n      //Called when the chat window is closed\n      console.log('#onChatWindowPause');\n    },\n    onChatWindowResume: (win) =\u003e {\n      //Called when the chat window is back to open\n      console.log('#onChatWindowResume');\n    },\n    onUserInput: (userInputText) =\u003e {\n      //Called back when the user enters text.\n      //In other words, this method can intercept text input.\n      // If it returns true, it is treated as consumed and no user-input-text is sent to the server.\n      console.log('#onUserInput userInputText=' + userInputText);\n      if (userInputText === 'end') {\n        const consumed = true;\n        chatux.dispose();\n        return consumed;\n      }\n    },\n    //For local test, get the user input text but stop accessing the chat server.\n    // onServerProcess: (userInputText) =\u003e {\n    //     const response = {\"output\": [{\"type\": \"text\", \"value\": 'You said \"' + userInputText + '\"'}]};\n    //     return response;\n    // },\n    // onPrepareRequest: (httpClient) =\u003e {\n    //     httpClient.params.mykey1 = 'valOfmykey1';//set original query param\n    // },\n    // onFinishRequest: (httpClient) =\u003e {\n    //     delete httpClient.params.mykey1;\n    // },            \n    onServerResponse: (response) =\u003e {\n      //A callback that occurs when there is a response from the chat server.\n      // You can handle server responses before reflecting them in the chat UI.\n      console.log('#onServerResponse response=' + JSON.stringify(response));\n      return response;\n    }\n  }\n};\n\n//initialize\nchatux.init(opt);\n\nchatux.start(true);//true:open chat UI automatically\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friversun%2Fchatux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friversun%2Fchatux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friversun%2Fchatux/lists"}