Integration with Scroll Viewport

Please follow the blew steps to integrate AI for Confluence with Scroll View Point

Step 1: Add “Ask AI“ in herder.link of theme settings

Edit the the Scroll Viewpoint Theme with the Theme Editor, add the link

The text of the link should be Ask AI . The text can be customized, please be noticed that the corresponding js (step 2) must also be changed with the same text.

Save the configuration, then Ask AI will be shown in the header of Scroll Viewpoint view.

Step 2: Customize JS

Add the custom.js file if it does not exist, edit the custom.js and copy below code into it.

Please set the baseURL to your confluence base url

// Configuration parameters
const askAIButton="Ask AI"
const baseURL="<your confluence base url>"

// 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" base-url="${baseURL}"></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();
        });
    });    
});

Above js script will do:

Download the required js and css resources
Register Click event on “ASK AI” link to call the AI for Confluence dialog

Save the theme configuration and then have a test.