...
Please follow the blew steps to integrate AI for Confluence with Scroll View Point
Step
...
2: Add “Ask AI“ in herder.link of theme settings
Edit the the Scroll Viewpoint Theme with the Theme Editor, add the link
...
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
| Code Block | ||||
|---|---|---|---|---|
| ||||
// 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();
});
});
}); |
...