cljs-chat
A simple Javascript chat component. It looks like this:
Requirements
- Bootstrap v4
Usage
Setup
- Download the javascript and copy it to your website's resources dir
curl https://github.com/philipperolet/cljs-chat/blob/main/resources/public/js/cljs-chat.js
curl https://github.com/philipperolet/cljs-chat/blob/main/resources/public/css/cljs-chat.css
- Include JS and CSS in HTML
<html>
<head>
<link href="PATH/TO/cljs-chat.css" rel="stylesheet">
...
</body>
<script src="PATH/TO/cljs-chat.js" type="text/javascript"></script>
...
</html>
- Add the chat component where desired in the HTML (once per app) with this line
<div id="cljs-chat" class="container-fluid"></div>
Clojurescript users
Since the project was written in clojurescript, you can use the component directly by adding a dependency. Therefore, no need to download/include the JS file manually.
However, the CSS file still needs to be downloaded and added to your site as explained above.
CLI/deps.edn dependency information:
org.clojars.philipperolet/cljs-chat {:mvn/version "0.5"}
Leiningen:
[org.clojars.philipperolet/cljs-chat "0.5"]
If you use reagent, you can also render the component directly anywhere without the plain HTML div
(:require [mzero.web.chat :as c])
(defn my-app []
[:div#app
...
[c/chat-component]
...
...])
API
The convention is that the user clicking the "Send" button is "me", talking to a remote user "you".
You can:
- programatically post messages as users "you" and "me" (with optional callback function);
- access the full message history;
- set the full message history;
- define a callback for when user "me" clicks on UX button "Send";
- customize the placeholder text (gray text in the text input).
mzero.web.chat.send_message("you", "Hello!");
mzero.web.chat.send_message("me", "Hi, what's up?", callback_fn);
mzero.web.chat.get_messages();
mzero.web.chat.set_messages([{"user": "me", "text":"yo"}, {"user": "you", "text": "lo"}])
mzero.web.chat.send_button_callback = function () {alert("hey!");};
mzero.web.chat.placeholder_message = "Talk to the AI";
ClojureScript users
The component is written in ClojureScript, so no need to use JS interop and type conversions.
(:require [mzero.web.chat :as c])
...
(c/send-message "you" "Hello")
(c/send-message "me" "Hi, what'sup" callback-fn)
(:messages @c/chat-data) ;; equivalent of get_messages
(set! c/send-button-callback #(js/alert "Hey"))
(set! c/placeholder_message "Talk to the AI")
(c/set-messages [{:user "me" :text "yo"} {:user "you" :text "lo"}])
...
Note that rather using "get-messages" that returns JS objects, we look directly at the chat data atom.
Style customization
The CSS file is very short (< 90 lines) and straightforward. It can easily be changed as you see fit.
The main CSS elements are
- ".mzero-chat" the all-encompassing div;
- ".messages" the div with the chat list;
- ".new-message" the div with the input and send button.
About
This project is licensed under the terms of the Eclipse License
Copyright (c) 2022 Philippe Rolet
Can you improve this documentation?Edit on GitHub
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close