...
 
Commits (4)
HTTPSERVE ?= ./node_modules/.bin/http-server
HTTPSERVE_PORT ?= 8001
.PHONY: help
help:
@echo "Please use \`make <target>' where <target> is one of the following:"
@echo ""
@echo " clean Remove all NPM packages"
@echo " dev Set up the development environment. To force a fresh start, run 'make clean' first."
@echo " serve Serve this directory via a webserver on port $(HTTPSERVE_PORT). To change the port, use the HTTPSERVE_PORT env variable"
stamp-npm: package.json package-lock.json
npm install -ddd --verbose
touch stamp-npm
.PHONY: clean
clean:
-rm -rf node_modules
.PHONY: build
build: stamp-npm
npm link converse.js
cd node_modules/converse.js && make dist
cp node_modules/converse.js/dist/converse.min.js 3rdparty
cp node_modules/converse.js/css/converse.min.css 3rdparty
cp node_modules/converse.js/css/fonts.js 3rdparty
.PHONY: serve
serve: stamp-npm
$(HTTPSERVE) -p $(HTTPSERVE_PORT) -c-1
# Chatty - XMPP Chat Web Component
# Sib Chat
Chatty is an [XMPP](https://xmpp.org/) client based on [Web Component](webcomponents.org) and the [ConverseJS](https://github.com/jcbrand/converse.js) library.
Sib Chat is an [XMPP](https://xmpp.org/) client based on [Web Component](webcomponents.org) and the [ConverseJS](https://github.com/jcbrand/converse.js) library.
The goal of Chatty, and its family of web components, is to allow you to deploy a chat on your application by adding a single `<hd-chatty>` tag to your HTML, let alone the configuration of the XMPP server.
## Installation (for developers)
To install Chatty for local development, `cd` into the directory where you want to install it and issue the following command :
git clone https://git.happy-dev.fr/happy-dev/xmpp-chat-component
make dev
make serve
# open http://localhost:8001 in your browser
To work with a checkout of converse.js:
# Somewhere outside of this repo:
git clone git@github.com:jcbrand/converse.js.git
cd converse.js
npm link
# then cd into this repo
npm link converse.js
## Getting the OIDC token
You need to log in here first:
http://test-paris.happy-dev.fr/admin/login/?next=/admin/
The goal of Sib Chat, and its family of web components, is to allow you to deploy a chat on your application by adding a single `<sib-chat>` tag to your HTML, let alone the configuration of the XMPP server.
\ No newline at end of file
.modal-backdrop {
z-index: 1030;
}
.converse-embedded .chat-head,
.converse-embedded .occupants,
.converse-embedded .toggle-occupants {
display: none !important;
}
.converse-embedded .chatbox .box-flyout .chat-body {
height: 100% !important;
}
.converse-embedded .chat-area {
flex: 0 0 100% !important;
max-width: 100% !important;
}
<?php
$subdomain = array_shift((explode('.', getenv('HTTP_HOST'))));
$domain = substr(getenv('HTTP_HOST'), strlen($subdomain));
header('Content-Type: application/json');
echo json_encode([
'jid' => $subdomain .'@chat'. $domain,
'password' => 'happydev',
]);
......@@ -4,15 +4,7 @@
<meta charset="UTF-8" />
<script type="module" src="https://unpkg.com/@startinblox/oidc@0.7" ></script>
<script type="module" src="sib-chat.js"></script>
<title>XMPP chat</title>
<!--
<script type="text/javascript">
setInterval(() => {
document.querySelector('body').appendChild(document.querySelector('.converse-container').cloneNode(true));
}, 5000);
</script>
-->
<title>SIB Chat</title>
<style>
body {
......
This diff is collapsed.
.modal-backdrop {
z-index: 1030;
}
.converse-embedded .chat-head,
.converse-embedded .occupants,
.converse-embedded .toggle-occupants {
display: none !important;
}
.converse-embedded .chatbox .box-flyout .chat-body {
height: 100% !important;
}
.converse-embedded .chat-area {
flex: 0 0 100% !important;
max-width: 100% !important;
}
\ No newline at end of file