.-.-.-.-.-

const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { method: 'POST', headers: {
                    'Authorization': 'Bearer {{ botSecret }}'
                } });
            const { token } = await res.json();

var audioRingTone = new Audio("{{ audioUrl }}");
            var playRingTone = false;

document.addEventListener("visibilitychange", () => {
                playRingTone = document.visibilityState !== 'visible';
            });

const store = window.WebChat.createStore(
                {},
                ({ dispatch }) => next => action => {
                    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY'
                        && action.payload.activity.type === 'message'
                        && action.payload.activity.from.id === '{{ botId }}'
                        && playRingTone) {
                        audioRingTone.play();
                    }

return next(action);
                }
            );

const styleSet = window.WebChat.createStyleSet({});

styleSet.textContent = {
                ...styleSet.textContent,
                fontFamily: 'Poppins, sans-serif'
            }
            styleSet.suggestedActionLayout = 'flow';

}
        else {
            cont.classList.add("active");
            document.getElementById(btn).classList.add("active");
        }
    }
    window.addEventListener("load", function(){
        console.log('load')
        document.getElementById('carebot-ai-toggle').addEventListener('click',e=>{
            e.preventDefault();
            console.log(e.currentTarget)
            chatShow(document.getElementById('carebot-ai-container'), e.currentTarget);
        })
        document.getElementById('carebot-ai-close').addEventListener('click',e=>{
            e.preventDefault();
            console.log(e.currentTarget)
            chatHide(document.getElementById('carebot-ai-container'), e.currentTarget,"carebot-ai-toggle");
        })
    });

</script>
<a id="carebot-ai-toggle" href="javascript:void(0)" class="carebot-ai-toggle" title="Virtual chat" aria-label="Virtual chat">
    <span class="carebot-ai-icon">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 30 29">
            <path fill="#fff" d="M 27.035156 0.484375 L 7.964844 0.484375 C 6.328125 0.484375 5 1.769531 5 3.351562 L 5 7.25 L 2.964844 7.25 C 1.328125 7.25 0 8.535156 0 10.117188 L 0 20.335938 C 0 21.914062 1.328125 23.199219 2.964844 23.199219 L 6 23.199219 L 6 28.03125 C 6 28.234375 6.125 28.410156 6.320312 28.484375 C 6.378906 28.507812 6.441406 28.515625 6.5 28.515625 C 6.640625 28.515625 6.773438 28.460938 6.867188 28.359375 L 11.71875 23.199219 L 22.035156 23.199219 C 23.671875 23.199219 25 21.914062 25 20.335938 L 25 16.433594 L 27.035156 16.433594 C 28.671875 16.433594 30 15.148438 30 13.566406 L 30 3.351562 C 30 1.769531 28.671875 0.484375 27.035156 0.484375 Z M 24 20.335938 C 24 21.378906 23.117188 22.234375 22.035156 22.234375 L 11.496094 22.234375 C 11.359375 22.234375 11.222656 22.289062 11.128906 22.390625 L 7 26.78125 L 7 22.71875 C 7 22.453125 6.773438 22.234375 6.5 22.234375 L 2.964844 22.234375 C 1.878906 22.234375 1 21.378906 1 20.335938 L 1 10.117188 C 1 9.066406 1.878906 8.21875 2.964844 8.21875 L 22.035156 8.21875 C 22.441406 8.21875 22.820312 8.335938 23.132812 8.539062 C 23.652344 8.882812 24 9.464844 24 10.117188 Z M 29 13.566406 C 29 14.613281 28.121094 15.46875 27.035156 15.46875 L 25 15.46875 L 25 10.117188 C 25 8.832031 24.121094 7.742188 22.914062 7.378906 C 22.824219 7.351562 22.730469 7.328125 22.628906 7.3125 C 22.4375 7.273438 22.238281 7.25 22.035156 7.25 L 6 7.25 L 6 3.351562 C 6 2.300781 6.882812 1.449219 7.964844 1.449219 L 27.035156 1.449219 C 28.121094 1.449219 29 2.300781 29 3.351562 Z M 29 13.566406 "/>
            <path fill="#fff" d="M 6 13.058594 L 13 13.058594 C 13.277344 13.058594 13.5 12.839844 13.5 12.574219 C 13.5 12.308594 13.277344 12.089844 13 12.089844 L 6 12.089844 C 5.722656 12.089844 5.5 12.308594 5.5 12.574219 C 5.5 12.839844 5.722656 13.058594 6 13.058594 Z M 6 13.058594 "/>
            <path fill="#fff" d="M 19.5 14.992188 L 6 14.992188 C 5.722656 14.992188 5.5 15.207031 5.5 15.476562 C 5.5 15.742188 5.722656 15.957031 6 15.957031 L 19.5 15.957031 C 19.777344 15.957031 20 15.742188 20 15.476562 C 20 15.207031 19.777344 14.992188 19.5 14.992188 Z M 19.5 14.992188 "/>
            <path fill="#fff" d="M 19.5 17.890625 L 6 17.890625 C 5.722656 17.890625 5.5 18.109375 5.5 18.375 C 5.5 18.640625 5.722656 18.855469 6 18.855469 L 19.5 18.855469 C 19.777344 18.855469 20 18.640625 20 18.375 C 20 18.109375 19.777344 17.890625 19.5 17.890625 Z M 19.5 17.890625 "/>
        </svg>
    </span>
    <span class="carebot-ai-rollover">
        <span class="carebot-ai-rollover-icon">
            {{ iconCode|raw }}
        </span>
        Chat with us!
    </span>
</a>
<aside id="carebot-ai-container" class="carebot-ai-container" aria-hidden="true">
    <div class="carebot-ai-header">
        <span class="carebot-ai-icon">
            {{ iconCode|raw }}
        </span>
        <div class="carebot-ai-title">Live chat</div>
        <a id="carebot-ai-close" href="javascript:void(0)" class="carebot-ai-close" aria-label="Close">
            <svg viewBox="90 100 375 375"><g><path fill="#fff" d="M1778.3 76.8 1716.2 14.7 896.5 834.4 76.8 14.7 14.7 76.8 834.4 896.5 14.7 1716.2 76.8 1778.3 896.5 958.6 1716.2 1778.3 1778.3 1716.2 958.6 896.5z" transform="scale(.215, -.215) translate(400, -2300)"></path></g></svg>
        </a>
    </div>
    <div class="carebot-ai-body">
        <div class="carebot-ai-holder" id="carebot-ai"></div>
    </div>
</aside>

/srv/users/craft4/apps/craft4-newsite-space/public/../plugins/carebot/src/templates/chat-code.twig