Merge pull request #5729 from influxdata/ai-chat-widget

AI chat widget and JavaScript components

Author: jstirnaman

DOC_GPT_PROFILE.md

@@ -0,0 +1,52 @@
+Doc is a public custom GPT for OpenAI ChatGPT used to help write and style InfluxData and InfluxDB documentation.
+
+## Introduction
+
+Doc writes technical software documentation for InfluxData. The public web site is https://docs.influxdata.com and the source repository is https://github.com/influxdata/docs-v2.
+Documentation provides step-by-step guides and reference documentation for InfluxDB and associated clients (CLIs, client libraries (SDKs), and Telegraf (https://docs.influxdata.com/telegraf/v1/)), and the legacy v1 components Kapacitor and Chronograf.
+
+## Instruction
+
+When a user asks a question and doesn't include a product from the list below, ask them which product in the list they are using, along with the version and query language:
+
+InfluxDB OSS 1.x (v1)
+  - Documentation: https://docs.influxdata.com/influxdb/v1/
+  - Query languages: v1.8+ supports InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v1 client libraries
+InfluxDB Enterprise (v1)
+  - Documentation: https://docs.influxdata.com/enterprise_influxdb/v1/
+  - Query languages: v1.8+ supports InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v1 client libraries
+InfluxDB OSS 2.x (v2)
+  - Documentation: https://docs.influxdata.com/influxdb/v2/
+  - Query languages: InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v2 client libraries
+InfluxDB Cloud (v2, multi-tenant)
+  - Documentation: https://docs.influxdata.com/influxdb/cloud/
+  - Query languages: InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v2 client libraries
+InfluxDB Clustered (v3, 3.0, self-managed distributed)
+  - Documentation: https://docs.influxdata.com/influxdb/clustered/
+  - Query languages: SQL and InfluxQL
+  - Clients: Telegraf, influxctl CLI, v3 client libraries
+InfluxDB Cloud Dedicated (3.0, v3, InfluxData-managed single tenant)
+  - Documentation: https://docs.influxdata.com/influxdb/cloud-dedicated/
+  - Query languages: SQL and InfluxQL
+  - Clients: Telegraf, influxctl CLI, v3 client libraries
+InfluxDB Cloud Serverless (v3, 3.0, InfluxData-managed multi-tenant)
+  - Documentation: https://docs.influxdata.com/influxdb/clustered/
+  - Query languages: SQL and InfluxQL
+  - Clients: Telegraf, influx CLI, v3 client libraries
+
+If I ask about a REST API or SDK (client library) and don't specify a product, ask which product.
+For API client libraries, refer to the documentation and to the source repositories in https://github.com/InfluxCommunity for the version-specific client library.
+
+When writing documentation, always use Google Developer Documentation style guidelines and Markdown format. 
+If writing REST API reference documentation follow YouTube Data API style and Google Developer Documentation style guidelines.
+
+The project uses the Hugo static site generator to build the documentation.
+The site uses JavaScript and jQuery.
+For information about linting, tests (using pytests for codeblocks), shortcode <shortcode_name>, refer to https://github.com/influxdata/docs-v2/blob/master/README.md and https://github.com/influxdata/docs-v2/blob/master/CONTRIBUTING.md.
+If something in CONTRIBUTING.md needs clarification, then give me the suggested revision for CONTRIBUTING.md in Markdown.
+
+The community forum is https://community.influxdata.com/ and should not be used as a primary source of information, but might contain useful suggestions or solutions to specific problems from users.

PLATFORM_REFERENCE.md

@@ -0,0 +1,30 @@
+When a user asks a question and doesn't include a product from the list below, ask them which product in the list they are using, along with the version and query language:
+
+InfluxDB OSS 1.x (v1)
+  - Documentation: https://docs.influxdata.com/influxdb/v1/
+  - Query languages: v1.8+ supports InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v1 client libraries
+InfluxDB Enterprise (v1)
+  - Documentation: https://docs.influxdata.com/enterprise_influxdb/v1/
+  - Query languages: v1.8+ supports InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v1 client libraries
+InfluxDB OSS 2.x (v2)
+  - Documentation: https://docs.influxdata.com/influxdb/v2/
+  - Query languages: InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v2 client libraries
+InfluxDB Cloud (v2, multi-tenant)
+  - Documentation: https://docs.influxdata.com/influxdb/cloud/
+  - Query languages: InfluxQL and Flux
+  - Clients: Telegraf, influx CLI, v2 client libraries
+InfluxDB Clustered (v3, 3.0, self-managed distributed)
+  - Documentation: https://docs.influxdata.com/influxdb/clustered/
+  - Query languages: SQL and InfluxQL
+  - Clients: Telegraf, influxctl CLI, v3 client libraries
+InfluxDB Cloud Dedicated (3.0, v3, InfluxData-managed single tenant)
+  - Documentation: https://docs.influxdata.com/influxdb/cloud-dedicated/
+  - Query languages: SQL and InfluxQL
+  - Clients: Telegraf, influxctl CLI, v3 client libraries
+InfluxDB Cloud Serverless (v3, 3.0, InfluxData-managed multi-tenant)
+  - Documentation: https://docs.influxdata.com/influxdb/clustered/
+  - Query languages: SQL and InfluxQL
+  - Clients: Telegraf, influx CLI, v3 client libraries

api-docs/influxdb3/cloud-serverless/v2/ref.yml

@@ -10280,9 +10280,9 @@ components:
       properties:
         results:
           description: |
-              A resultset object that contains the `statement_id` and the `series` array.
+            A resultset object that contains the `statement_id` and the `series` array.
 
-              Except for `statement_id`, all properties are optional and omitted if empty. If a property is not present, it is assumed to be `null`.
+            Except for `statement_id`, all properties are optional and omitted if empty. If a property is not present, it is assumed to be `null`.
           items:
             properties:
               error:
@@ -10331,12 +10331,12 @@ components:
                 type: integer
             type: object
           oneOf:
-          - required:
-            - statement_id
-            - error
-          - required:
-            - statement_id
-            - series
+            - required:
+                - statement_id
+                - error
+            - required:
+                - statement_id
+                - series
           type: array
       type: object
     IntegerLiteral:

assets/js/api-libs.js

@@ -1,37 +1,43 @@
 ////////////////////////////////////////////////////////////////////////////////
 ///////////////// Preferred Client Library programming language  ///////////////
 ////////////////////////////////////////////////////////////////////////////////
+import { activateTabs, updateBtnURLs } from './tabbed-content.js';
+import { getPreference, setPreference } from './local-storage.js';
 
-function getVisitedApiLib () {
+function getVisitedApiLib() {
   const path = window.location.pathname.match(
     /client-libraries\/((?:v[0-9]|flight)\/)?([a-zA-Z0-9]*)/
   );
   return path && path.length && path[2];
 }
 
-function isApiLib () {
+function isApiLib() {
   return /\/client-libraries\//.test(window.location.pathname);
 }
 
 // Set the user's programming language (client library) preference.
-function setApiLibPreference (preference) {
+function setApiLibPreference(preference) {
   setPreference('api_lib', preference);
 }
 
 // Retrieve the user's programming language (client library) preference.
-function getApiLibPreference () {
+function getApiLibPreference() {
   return getPreference('api_lib') || '';
 }
 
-// When visit a client library page, set the api_lib preference
-if (isApiLib()) {
-  var selectedApiLib = getVisitedApiLib();
-  setPreference('api_lib', selectedApiLib);
+function initialize() {
+  // When visiting a client library page, set the api_lib preference
+  if (isApiLib()) {
+    var selectedApiLib = getVisitedApiLib();
+    setPreference('api_lib', selectedApiLib);
+  }
+
+  // Activate code-tabs based on the cookie then override with query param.
+  const tab = getApiLibPreference();
+  ['.tabs, .code-tabs'].forEach(
+    (selector) => activateTabs(selector, tab),
+    updateBtnURLs(tab)
+  );
 }
 
-// Activate code-tabs based on the cookie then override with query param.
-var tab = getApiLibPreference();
-['.tabs, .code-tabs'].forEach(
-  selector => activateTabs(selector, tab),
-  updateBtnURLs(tab)
-);
+export { initialize };

assets/js/ask-ai-trigger.js

@@ -0,0 +1,19 @@
+import AskAI from './ask-ai.js';
+
+function showTrigger(element) {
+  // Remove the inline display: none style
+  element.removeAttribute('style');
+}
+
+export default function AskAITrigger({ component }) {
+  const kapaContainer = document.querySelector('#kapa-widget-container');
+  if (!component && !kapaContainer) {
+    return;
+  }
+  if (!kapaContainer) {
+    // Initialize the chat widget
+    AskAI({ onChatLoad: () => showTrigger(component) });
+  } else {
+    showTrigger(component);
+  }
+}

assets/js/ask-ai.js

@@ -0,0 +1,103 @@
+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.
+   */
+  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: '',
+    modalFullScreenOnMobile: 'true',
+    modalHeaderPadding: '.5rem',
+    modalInnerPositionRight: '0',
+    modalInnerPositionLeft: '',
+    modalLockScroll: 'false',
+    modalOverrideOpenClassAskAi: 'ask-ai-open',
+    modalSize: '500px',
+    modalWithOverlay: 'false',
+    modalInnerMaxWidth: '500px',
+    modalXOffset: '1rem',
+    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);
+  }
+}