Page Comparison

// Configuration parameters
const askAIButton="Ask AI"

// Load and register the AI chat dialog
AJS.$(function() {
    // css and js resources
    const contextPath = AJS.contextPath();
    const resourncePath = "download/resources/com.xdevpod.apps.AIForConfluence:ai-for-confluence-resources"
    const aiCSSUrl=`${contextPath}/${resourncePath}/css/ai-for-confluence.css`
    const chatJSUrl=`${contextPath}/${resourncePath}/js/ai_editor.js`
    const langJSUrl=`${contextPath}/${resourncePath}/js/language_options.js`

    // funciton to show the chat dialog
    function showChatDialog() {
        const chatDiv = AJS.$(`
            <div id="devpod-rag-chat">
                <rag-chat query="Hello"></rag-chat>
            </div>
          `);
        chatDiv.css({
            "width": window.innerWidth*0.4 + 'px',
            "height": '100%',
            "position": "fixed",
            "right": 0,
            "top": 0,
            "z-index": 2000,
        });
  
        chatDiv.on("keypress", function (e) {
            e.stopPropagation();
        });
  
        AJS.$('body').append(chatDiv[0]);
    }

    // register the click event for the ask AI button
    function registerClickEvent() {
        AJS.$(`li.header__navigation__menu-container--link a[aria-label="${askAIButton}"]`).on('click', function(e) {
            e.preventDefault();
            console.log('ChatBox link clicked');
            showChatDialog();
        });
    }
    
    // load the chat css&resource and register the click event  
    AJS.$.get(aiCSSUrl, function(data) {
        $('<style></style>').appendTo('head').html(data);
    });
    AJS.$.getScript(langJSUrl, function() {
        AJS.$.getScript(chatJSUrl, function() {
            console.log("Chat resource loaded successfully");
            registerClickEvent();
        });
    });    
});