106 lines
3.8 KiB
JavaScript
106 lines
3.8 KiB
JavaScript
import { productData } from './page-context.js';
|
|
|
|
function setUser(userid, email) {
|
|
const NAMESPACE = 'kapaSettings';
|
|
|
|
// Set the user ID and email in the global settings namespace.
|
|
// The chat widget will use this on subsequent chats to personalize the user's experience.
|
|
window[NAMESPACE] = {
|
|
user: {
|
|
uniqueClientId: userid,
|
|
email: email,
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize the chat widget
|
|
function initializeChat({onChatLoad, chatAttributes}) {
|
|
/* See https://docs.kapa.ai/integrations/website-widget/configuration for
|
|
* available configuration options.
|
|
* All values are strings.
|
|
*/
|
|
// If you make changes to data attributes here, you also need to port the changes to the api-docs/template.hbs API reference template.
|
|
const requiredAttributes = {
|
|
websiteId: 'a02bca75-1dd3-411e-95c0-79ee1139be4d',
|
|
projectName: 'InfluxDB',
|
|
projectColor: '#020a47',
|
|
projectLogo: '/img/influx-logo-cubo-white.png',
|
|
}
|
|
|
|
const optionalAttributes = {
|
|
|
|
modalDisclaimer: 'This AI can access [documentation for InfluxDB, clients, and related tools](https://docs.influxdata.com). Information you submit is used in accordance with our [Privacy Policy](https://www.influxdata.com/legal/privacy-policy/).',
|
|
modalExampleQuestions: 'Use Python to write data to InfluxDB 3,How do I query using SQL?,How do I use MQTT with Telegraf?',
|
|
buttonHide: 'true',
|
|
exampleQuestionButtonWidth: 'auto',
|
|
modalOpenOnCommandK: 'true',
|
|
modalExampleQuestionsColSpan: '8',
|
|
modalFullScreenOnMobile: 'true',
|
|
modalHeaderPadding: '.5rem',
|
|
modalInnerPositionRight: '0',
|
|
modalInnerPositionLeft: '',
|
|
modalLockScroll: 'false',
|
|
modalOverrideOpenClassAskAi: 'ask-ai-open',
|
|
modalSize: '640px',
|
|
modalWithOverlay: 'false',
|
|
modalInnerMaxWidth: '800px',
|
|
modalXOffset: 'calc(100% - 800px - .5rem)',
|
|
modalYOffset: '10vh',
|
|
userAnalyticsFingerprintEnabled: 'true',
|
|
fontFamily: 'Proxima Nova, sans-serif',
|
|
modalHeaderBgColor: 'linear-gradient(90deg, #d30971 0%, #9b2aff 100%)',
|
|
modalHeaderBorderBottom: 'none',
|
|
modalTitleColor: '#fff',
|
|
modalTitleFontSize: '1.25rem',
|
|
}
|
|
|
|
const scriptUrl = 'https://widget.kapa.ai/kapa-widget.bundle.js';
|
|
const script = document.createElement('script');
|
|
script.async = true;
|
|
script.src = scriptUrl;
|
|
script.onload = function() {
|
|
onChatLoad();
|
|
window.influxdatadocs.AskAI = AskAI;
|
|
};
|
|
script.onerror = function() {
|
|
console.error('Error loading AI chat widget script');
|
|
};
|
|
|
|
const dataset = {...requiredAttributes, ...optionalAttributes, ...chatAttributes};
|
|
Object.keys(dataset).forEach(key => {
|
|
// Assign dataset attributes from the object
|
|
script.dataset[key] = dataset[key];
|
|
});
|
|
|
|
// Check for an existing script element to remove
|
|
const oldScript= document.querySelector(`script[src="${scriptUrl}"]`);
|
|
if (oldScript) {
|
|
oldScript.remove();
|
|
}
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
function getProductExampleQuestions() {
|
|
const questions = productData?.product?.ai_sample_questions;
|
|
return questions?.join(',') || '';
|
|
}
|
|
|
|
/**
|
|
* chatParams: specify custom (for example, page-specific) attribute values for the chat, pass the dataset key-values (collected in ...chatParams). See https://docs.kapa.ai/integrations/website-widget/configuration for available configuration options.
|
|
* onChatLoad: function to call when the chat widget has loaded
|
|
* userid: optional, a unique user ID for the user (not currently used for public docs)
|
|
*/
|
|
export default function AskAI({ userid, email, onChatLoad, ...chatParams }) {
|
|
|
|
const modalExampleQuestions = getProductExampleQuestions();
|
|
const chatAttributes = {
|
|
...(modalExampleQuestions && { modalExampleQuestions }),
|
|
...chatParams,
|
|
}
|
|
initializeChat({onChatLoad, chatAttributes});
|
|
|
|
if (userid) {
|
|
setUser(userid, email);
|
|
}
|
|
}
|