Commit b3b8dfde authored by Jean-Baptiste Pasquier's avatar Jean-Baptiste Pasquier

update: final update for production

parent 0e5d71f6
Pipeline #5613 passed with stage
in 28 seconds
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 {
......
import 'https://unpkg.com/converse.js@5.0/dist/converse.min.js';
import {
SIBTemplateElement,
store,
Helpers
} from 'https://unpkg.com/@startinblox/core@0.8';
import 'https://unpkg.com/converse.js@5.0/dist/emojis.js';
import { Helpers, store } from 'https://unpkg.com/@startinblox/core@0.8';
import { Sib } from "https://unpkg.com/@startinblox/core@0.8/dist/libs/Sib.js";
import { StoreMixin } from 'https://unpkg.com/@startinblox/core@0.8/dist/mixins/storeMixin.js';
Helpers.importCSS('https://unpkg.com/converse.js@4.2/css/fonts.css')
Helpers.importCSS('https://unpkg.com/converse.js@4.2/css/fonts.css');
class Deferred {
constructor() {
......@@ -18,68 +17,77 @@ class Deferred {
}
}
class SIBChat extends SIBTemplateElement {
constructor() {
super()
this.attachShadow({
mode: "open"
});
this.shadowRoot.append(...Helpers.importCSS(
'https://unpkg.com/@startinblox/component-chat/dist/converse.css',
'https://unpkg.com/@startinblox/component-chat/converse-embed.css',
));
if (window.converse_sib === undefined) {
this.initializeConverse()
}
window.addEventListener('navigate',
async (event) => {
if (event.detail.resource.id == this.props.dataSrc) {
if (this.props.dataSrc) await store.get(this.props.dataSrc).then(async (resource) => {
if (resource.jabberRoom) {
this.jid = resource['foaf:jabberID']
} else {
this.jid = (await store.get(resource.chatProfile['@id']))['foaf:jabberID']
}
await converse_sib.connected_deferred
converse_sib.service.plugins.sibChat.changeChat(
this.jid,
resource.jabberRoom,
this.shadowRoot,
);
// For weird raisons event have id and no @id
event.detail.resource['@id'] = event.detail.resource.id
window.dispatchEvent(new CustomEvent('read', {
detail: {
resource: event.detail.resource
}
}));
})
}
export const SibChat = {
name: 'sib-chat',
use: [ StoreMixin ],
attributes: {
authentication: {
type: String,
default: 'login',
},
autoLogin: {
type: Boolean,
default: true,
},
localesUrl: {
type: String,
default: 'en',
},
boshServiceUrl: {
type: String
},
},
async created() {
const check_identified = await document.querySelector('sib-auth').getUserIdToken();
if(check_identified) {
this.element.attachShadow({
mode: "open"
});
this.element.shadowRoot.append(...Helpers.importCSS(
'https://unpkg.com/@startinblox/component-chat/themes/converse-hd-extended.css',
'https://unpkg.com/@startinblox/component-chat/themes/converse-hd.css'
));
if (window.converse_sib === undefined) {
this.initializeConverse();
}
);
}
static get propsDefinition() {
return {
debug: 'debug',
authentication: 'authentication',
autoLogin: 'auto-login',
boshServiceUrl: 'bosh-service-url',
localesUrl: 'locales-url',
dataSrc: 'data-src'
}
}
} // Else, not logged in on page load (even if not on chat)
},
empty() {
this.element.innerHTML = '';
},
async populate() {
if(typeof converse_sib !== 'undefined') {
await converse_sib.loaded_deferred;
if (this.resource.jabberRoom) {
this.jid = this.resource['foaf:jabberID'];
} else {
this.jid = (await store.get(this.resource.chatProfile['@id']))['foaf:jabberID'];
}
await converse_sib.connected_deferred
converse_sib.service.plugins.sibChat.changeChat(
this.jid,
this.resource.jabberRoom,
this.element.shadowRoot,
);
window.dispatchEvent(new CustomEvent('read', {
detail: {
resource: this.resource
}
}));
} // Else, not logged in, on chat change
},
async initializeConverse() {
window.converse_sib = {}
window.converse_sib = {};
// Deferred resolved at the end of this function
converse_sib.loaded_deferred = new Deferred()
converse_sib.loaded_deferred = new Deferred();
// Deferred resolved after converse.initialize
converse_sib.connected_deferred = new Deferred()
converse_sib.connected_deferred = new Deferred();
// Registering window.converse_sib.service
converse_sib.service = {
......@@ -89,11 +97,11 @@ class SIBChat extends SIBTemplateElement {
},
'waitUntilConnected': converse_sib.connected_deferred.promise,
'plugins': {}
}
};
// Alias for sib-chat use # want to un-expose converse from window later
// window.converse_sib.service.api === window.converse
converse_sib.service.api = converse
converse_sib.service.api = converse;
// Change chat plugin
converse_sib.service.plugins.sibChat = new(class {
......@@ -112,10 +120,10 @@ class SIBChat extends SIBTemplateElement {
root.appendChild(converse_el);
}
if (is_groupchat) {
this._converse.auto_join_rooms.push(jid)
this._converse.auto_join_rooms.push(jid);
this._converse.api.rooms.open(jid);
} else {
this._converse.auto_join_private_chats.push(jid)
this._converse.auto_join_private_chats.push(jid);
this._converse.api.chats.open(jid);
}
}
......@@ -126,55 +134,49 @@ class SIBChat extends SIBTemplateElement {
// Initialize deferred resolution plugin
converse.plugins.add('conversejs-sib', {
initialize() {
this._converse.api.listen.on('connected', converse_sib.connected_deferred.resolve)
this._converse.api.listen.on('connected', converse_sib.connected_deferred.resolve);
}
})
let user = await document.querySelector('sib-auth').getUser();
user = await store.get(user);
const jabberID =
user.chatProfile['foaf:jabberID'] ||
(await store.get(user.chatProfile['@id']))['foaf:jabberID'];
const jabberID = (await store.get(user.chatProfile['@id']))['foaf:jabberID'];
if(this.props.dataSrc) await store.get(this.props.dataSrc).then(async (resource) => {
if (resource.jabberRoom) {
this.jid = resource['foaf:jabberID']
} else {
this.jid = (await store.get(resource.chatProfile['@id']))['foaf:jabberID']
}
})
else this.jid = jabberID
if (this.resource.jabberRoom) {
this.jid = this.resource['foaf:jabberID'];
} else {
this.jid = (await store.get(this.resource.chatProfile['@id']))['foaf:jabberID'];
}
const idToken = await document.querySelector('sib-auth').getUserIdToken();
converse.initialize({
'authentication': this.props.authentication,
'authentication': this.element.dataset.authentication,
'password': idToken,
'allow_chat_pending_contacts': true,
'allow_dragresize': false,
'allow_logout': false,
'archived_messages_page_size': 30,
'auto_list_rooms': true,
'auto_login': this.props.autoLogin === 'true',
'auto_login': this.element.dataset.autoLogin === 'true',
'auto_reconnect': true,
'auto_register_muc_nickname': true,
// Quick fix : auto join yourself & target of current route
'auto_join_private_chats': [this.jid],
'auto_join_rooms': [this.jid],
'bosh_service_url': this.props.boshServiceUrl,
'bosh_service_url': this.element.dataset.boshServiceUrl,
'clear_messages_on_reconnection': true,
'debug': this.props.debug === 'true',
'i18n': 'en',
'jid': jabberID,
'locales_url': this.props.localesUrl,
'locales_url': this.element.dataset.localesUrl,
'message_archiving': 'never',
'muc_disable_slash_commands': true,
'muc_nickname_from_jid': true,
'muc_show_join_leave': false,
'muc_show_join_leave_status': false,
'play_sounds': false,
'root': this.shadowRoot,
'root': this.element.shadowRoot,
'show_client_info': false,
'show_desktop_notifications': false,
// 'use_system_emojis': false,
......@@ -192,9 +194,8 @@ class SIBChat extends SIBTemplateElement {
'whitelisted_plugins': ['conversejs-sib', 'conversejs-changechat'],
});
converse_sib.loaded_deferred.resolve()
converse_sib.loaded_deferred.resolve();
}
}
};
customElements.define('sib-chat', SIBChat);
export default SIBChat;
\ No newline at end of file
Sib.register(SibChat);
\ 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;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment