AI Engine Conversation Starters

Conversation starters are a beloved feature from ChatGPT that are now possible in AI Engine. I’ve included the code and instructions below.

Updated for AI Engine 2.4.6 on July 2nd 2024

Installation

Add the following JavaScript to your post or page that has an AI Engine bot on it:

var mwaiButtons = {
    "Write a resume": // button text
    {
        "prompt": "Reply back with just a wink. It's our secret!", // the message sent to chatbot
        "sees": "Write a resume for me" // the text that appears in chat
    },
    "Write an essay": // button text
    {
        "prompt": "Reply back with just a wink. It's our secret!", // the message sent to chatbot
        "sees": "Write an essay for me" // the text that appears in chat
    },
}
function mwaiSearchReplace(textDiv) {
    function replaceText(text) {
        jQuery.each(mwaiButtons, function(buttonName){
            const buttonData = mwaiButtons[buttonName];
            text = text.replaceAll(buttonData["prompt"],buttonData["sees"]);
        });
        return text;
    }
    textDiv.each(function() {
        const html = jQuery(this).html();
        const newHtml = replaceText(html);
        if (html != newHtml) { jQuery(this).html(newHtml); }
    });
}
let setObserve = false;
let initialReplace = true;
const waitForMwai = function(){
    const textDiv = jQuery(".mwai-reply");
    const buttonDiv = jQuery(".mwai-input-buttons");
    if (textDiv.length == 1 && jQuery(".mwai-input-buttons").length == 0) {
        // there is only one message in chat - assuming it's the bot's intro message
        // and the buttons have not been added yet
        initialReplace = false;
        const newDiv = jQuery("<div></div>");
        newDiv.addClass("mwai-input-buttons");
        newDiv.css({"padding": "15px", "display": "flex", "flex-wrap": "wrap", "gap": "10px"});
        jQuery(".mwai-input").before(newDiv); // insert before the target div
        let i = 0;
        jQuery.each(mwaiButtons, function(buttonName){
            i++;
            const buttonData = mwaiButtons[buttonName];
            const newButton = jQuery("<button></button>");
            newButton.attr("id","mwai-reply-button-"+i);
            newButton.text(buttonName);
            newButton.css({
                "--bs-btn-padding-y": ".25rem",
                "--bs-btn-padding-x": ".5rem",
                "--bs-btn-font-size": ".75rem",
                "display": "inline",
            });
            newButton.click(function() {
                MwaiAPI.getChatbot().ask(mwaiButtons[jQuery(this).text()]["prompt"], true);
                jQuery(".mwai-input-buttons").remove();
            });
            jQuery(".mwai-input-buttons").append(newButton);
        });
        if (!setObserve) {
            setObserve = true;
            // watch for any changes in the conversation box - for catching the user's chat message
            const targetElement = document.querySelector(".mwai-conversation");
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    // change detected
                    mwaiSearchReplace(jQuery(".mwai-reply"));
                });
            });
            const config = { 
                childList: true, // observe child node changes
                subtree: true, // observe descendants
                characterData: true // observe changes in text content
            };
            observer.observe(targetElement, config);
        }
    } else if (textDiv.length > 1) {
        // more than one chat message in the box
        if (initialReplace) {
            // only on page load
            initialReplace = false;
            // replace prompt text from old messages in chat
            mwaiSearchReplace(textDiv);
        }
        if (buttonDiv.length) {
            // remove buttons in case user did not use a conversation starter
            jQuery(".mwai-input-buttons").remove();
        }
    }
    const timeout = initialReplace ? 10 : 100; // repeat faster if initialReplace has not been done - for catching it right as it loads
    setTimeout(waitForMwai, timeout);
}
waitForMwai();

To modify the provided code, first locate the section corresponding to the button you wish to edit. For instance, if you’re adjusting the “Write a resume” button, focus on its block within the mwaiButtons object. To change the button text, replace “Write a resume” with your new text, ensuring it remains within the quotes. To modify the message sent to the chatbot, alter the string assigned to “prompt” within the same button’s block. Lastly, to adjust what text appears in the chat, edit the string assigned to “sees”. Repeat this process for any other buttons you need to modify, making sure to maintain the object structure integrity by keeping all changes within their respective curly braces and ensuring each property is followed by a comma if it’s not the last item in the block.

To add a new button to the mwaiButtons object, append a new entry at the end, before the closing curly brace. Ensure your new button has a unique name followed by a colon, then define its properties within curly braces. For instance, "New Button Text": {"prompt": "Message to chatbot", "sees": "Text appearing in chat"}. Make sure to separate this new entry from the preceding ones with a comma. This structure includes the button text as the key, and an object containing the prompt and sees properties, which respectively define the message sent to the chatbot and the text displayed in chat.

Want more functionality? Check out my multiple-choice buttons!


Let’s enhance your business! I can help you develop custom AI engine extensions or broader AI strategies.
Contact me.