Adding a copy/clipboard function

Example of the AI-Search chat completion callback usage

The AI Search callback can be used to modify the AI answer display, or even the answer itself. Here we add the ability to click on a icon in the answer that will paste a URL into the browser clipboard. This URL can then be shared so that users can reproduce the query.

First register a callback function ours will be called aiAnswerCallback:

   <script>
   document.addEventListener('DOMContentLoaded', async function() {
       var ai_element = document.getElementById('auto_ai_search_bot');
       _bl_ai_search.init('<MY TOKEN>', ai_element, {
           callback: aiAnswerCallback,
       });
   });
   </script>

Now add the aiAnswerCallback function to the webpage. This relies on the fact that a query inserted into the URL using the chatbarQuery parameter will cause the AI-Search load that query when the page is first displayed to the user:

aiAnswerCallback = function() {
    
    // Select all elements with the class _bl_message
    const messages = document.querySelectorAll('._bl_message p');
    if (!messages.length) return;

    // In case other code has messed with the messages, loop through
    // the messages and add the event listener
    messages.forEach(function(message) {
        const m_href = message.parentNode.querySelector('._bl_message_href')
        m_href && m_href.addEventListener('click', click_to_clipboard);
    });
    
    // Get the last message element
    const lastMessage = messages[messages.length - 1];
    
    // Use the text content of the message as the search query
    const query = lastMessage.textContent.trim();

    let currentUrl = window.location.href;

    // If there is alreadly a chatbarQuery parameter, remove it
    if (currentUrl.indexOf('chatbarQuery=') !== -1) {
        currentUrl = currentUrl.replace(/&?chatbarQuery=[^&]+/, '');
    }
    
    // Determine the appropriate delimiter: '?' if no query exists, otherwise '&'
    const delimiter = currentUrl.indexOf('?') === -1 ? '?' : '&';
    
    // New query parameter appended
    const href = currentUrl + delimiter + 'chatbarQuery=' + encodeURIComponent(query);

    // Add div element of class _bl_message_href to the last message containing
    // the href in the title attribute
    const a = document.createElement('div');
    a.classList.add('_bl_message_href');
    a.setAttribute('title', href);

    // Add the new element affter the last message
    lastMessage.parentNode.appendChild(a);

    a.addEventListener('click', click_to_clipboard);
}

function click_to_clipboard() {
    navigator.clipboard.writeText(this.getAttribute('title'));
    alert(this.getAttribute('title'));
}

The following CSS could be used to display a small copy/clipboard icon in the user queries:

    #ai_search_container ._bl_message_href{
        width: 8px;
        height: 8px;
        cursor: pointer;
        position: absolute;
        top: -2px;
        right: 6px;
        font-size: 1em;
    }
    #ai_search_container ._bl_message_href:after{
        content: '⧉';
        font-size: 1em;
    }