Security News
Django Joins curl in Pushing Back on AI Slop Security Reports
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
By Sarah Gooding - Jun 30, 2025
🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
chatux
'chatux' is a library that allows you to easily create chat windows on your PC or mobile
Overview
'chatux' is a library that allows you to easily create chat windows on your PC or mobile
It is licensed under MIT license.
What is 'chatux' like?
It is an independent and lightweight chat user interface (chat UI) library for javascript.
- You can create pages for chat agents and chat bots that support both smartphones and PCs.
- For PC, show chat in a window that does not disturb existing content
- For mobile dvices like smartphones and tablets, chat UI will be overlaid on existing pages to avoid disturbing existing content
DEMO
https://riversun.github.io/chatux/
How to play demo.
This demo is simple echo chat. But a few command available.If you write "show buttons", you can see action buttons in chat. Or you write "show image", you can see image in chat.
Quick start
Check this example.
<!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://riversun.github.io/chatux/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'
},
window: {
title: 'My chat',
infoUrl: 'https://github.com/riversun/chatux'
}
};
//initialize
chatux.init(opt);
chatux.start(true);
</script>
</body>
</html>
Show on PC
Show on mobile
install and minimal code
using npm
install
npm install chatux --save
code
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
}
});
chatux.start();
using with script tag
<script src="https://riversun.github.io/chatux/chatux.min.js"></script>
code
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
}
});
chatux.start();
How it works
The system of chatux is very simple.
Let's look at the execution sequence of chatux.
Suppose you have a chat server for chatux at http://localhost:8080/chat Specify server endpoint like this.
chatux.init({
api: {
endpoint: 'http://localhost:8080/chat',
method: 'GET',
dataType: 'json'
}
});
The following is the sequence.
-
1. chatux sends user input text to chat server.
GET http://localhost:8080/chat?text=hello -
2. The server processes user input text and returns a response as JSON.
{
"output": [
{
"type": "text",
"value": "You say 'hello'"
}
]
}
- 3. According to the response, chatux renders the result on the chat screen.
So, if you create chat server that can do this kind of interaction, you can easily create chatbots etc.
Next, let's see how to render.
How to render a chat UI
Rendering is indicated by simple JSON generated by chat server.
Show text
JSON
{
"output": [
{
"type": "text",
"value": "Hello world!"
}
]
}
RESULT
Show image
JSON
{
"output": [
{
"type": "image",
"value": "https://avatars1.githubusercontent.com/u/11747460"
}
]
}
RESULT
Show action buttons
JSON
{
"output": [
{
"type": "option",
"options": [
{
"label": "label1",
"value": "value1"
},
{
"label": "label2",
"value": "value2"
},
{
"label": "label3",
"value": "value3"
}
]
}
]
}
RESULT
Show html
{
"output": [
{
"type": "html",
"value": "Click <a href=\"https://github.com/riversun\" target=\"_blank\" >here</a> to open a page.",
"delayMs": 500
}
]
}
Show youtube
JSON
{
"output": [
{
"type": "youtube",
"value": "TP4lxliMHXY", //youtube video id
"delayMs": 500
}
]
}
RESULT
Show multiple elements
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"
}
]
}
]
}
RESULT
Open sub window (ex.Url you want to see)
JSON
{
"output": [
{
"type": "window",
"title": "iframe page",
"url": "https://riversun.github.io/i18nice",
"left": 20,
"top": 20,
"width": 400,
"height": 250,
"addYOffset": true,
}
]
}
RESULT
Open sub window (ex.Video on Youtube)
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
}
]
}
RESULT
Open sub window (ex.Video on Google Drive)
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
}
]
}
RESULT
FAQs
'chatux' is a library that allows you to easily create chat windows on your PC or mobile
The npm package chatux receives a total of 48 weekly downloads. As such, chatux popularity was classified as not popular.
We found that chatux demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 17 Mar 2019
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
By Sarah Gooding - Jun 26, 2025
Security News
Node.js Homepage Adds Paid Support Link, Prompting Contributor Pushback
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
By Sarah Gooding - Jun 25, 2025