Компонент Чат
Новый HTML-тег <cb-chat> в роли чата с двусторонним шифрованием. Сообщения передаются по сети в зашифрованном виде и даже при перехвате их нельзя читать. У каждого чата свой ключ шифрования, который ФСБ может запросить, обеспечивая безопасность территории где находится участник чата.<cb-chat>
<dialog class="cb-chatdialog">
<cb-chatdialog>
<cb-chatoptionlabel>Полную версию или покороче?</cb-chatoptionlabel>
<cb-chatoption>Полную</cb-chatoption>
<cb-chatoption>Покороче</cb-chatoption>
</cb-chatdialog>
</dialog>
<button class="cb-chatdialogbutton" chatbutton hidden>
<svg viewBox="0 0 24 24"><use href="#cb-svg-chat"></use></svg>
</button>
</cb-chat><cb-chatoptionlabel>
Вопрос от менеджера чата пользователю.
<cb-chatoption>
Вариант быстрого ответа пользователя менеджеру.
Кастомизация
Эти элементы не требуют дополнительной настройки, хотя возможна небольшая кастомизация не затрагивающая работу компонента. Делайте её после комментариевcustomization.
/public/components/chat/index.jscustomElements.define(
'cb-chat',
class extends HTMLElement {
async connectedCallback() {
await cb.setupOnce(this, cb.chat.setupChat)
//customization
const button = cb.chat.button
if(button) {
console.log(button)
// button.addEventListener('newmessage', e => {
// const {lastMessage, unreaded} = e.detail
// })
}
const dialog = cb.chat.dialogElement
// console.log(dialog)
const listElement = cb.chat.listElement
// console.log(listElement)
el.addEventListener('createMenuElement', e => {
const {element} = e.detail
// const myButton = cb.crTag('button', 'cb-option', 'send')
// myButton.type = 'button'
// myButton.role = 'menuitem'
// myButton.dataset.value = 'myValue'
// element.addEventListener('pickItem', e => {
// const {value} = e.detail.item.dataset
// const chat = cb.chat.getChatById(element.chatId)
// })
// element.contentElement.append(myButton)
})
this.dispatchEvent(new CustomEvent('connect'))
}
disconnectedCallback() {
this.dispatchEvent(new CustomEvent('disconnect'))
}
}
)