searxng/searx/templates/kvanDark/elements/chat_box.html

<aside class="chat_box" aria-label="{{ chat_box.chat_box }}">
    <h2 class="title"><bdi>{{ chat_box.chat_box }}</bdi></h2>
    <p><bdi>{{ chat_box.content | safe }}</bdi></p>
</aside>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        function updateChatBox() {
            fetch('/get-chat-content')
                .then(response => response.json())
                .then(data => {
                    const chatBox = document.querySelector('.chat_box');
                    console.log('response from api', data);
                    chatBox.querySelector('bdi').textContent = data.chat_box;
                    chatBox.querySelector('p').textContent = data.content;
                })
                .catch(error => console.error('Error:', error));
        }

        // Call updateChatBox after search is completed
        // This might be tied to an event, depending on how your search functionality is implemented
        updateChatBox();
    });
</script>