Initial Kapa.ai chat integration.

Continue refactoring JavaScript into a component pattern and ESM.
Replaces some jQuery with native DOM API.

chore(ai): reference documentation and instructions for training AI

chore(ai): implement Kapa AI chat widget
- Move script tag to HTML template to make it obvious.
- Cleanup javascript to make it more component-like
- Set Kapa attributes, support setting userid

chore(js): add JS dependencies, previously referenced in script tags, to package.json for JS builds.

fix(api): indents

chore(js): package Mermaid diagram library

chore(js): refactor JS for AIChat and Theme as examples of using the component pattern for HTML/CSS/JS

chore(js): Use the new local-storage API in refactored module code and in code not yet ported. Cleanup syntax in local-storage and make functions available from window.LocalStorageAPI.

fix(js): theme.js name-change

chore(js): fix ai-chat.js file name

fix(js): refactor:
- componentNames are snakecase in HTML
- replace DOM selection method and jQuery eventhandler assignment
- remove old theme.js references

chore(ai): configure chat window overlay, size, and position:
- removes overlay and scroll lock
- positions chat to the right and bottom
- expands sample question width to 12 cols

chore(ai): edit disclaimer

fix(ai): size and position

chore(js): make ai-chat specific to configuration and and setting userid (for testing and future use).

fix(js): copy referrerHost variable to v3-wayfinding instead of relying on influxdb-url to assign it.

chore(ai): add a footer div at page bottom to contain modal triggers for custom-time and ask-ai. Still needs some CSS help. Moves tooltip text from CSS to HTML data attribute.

chore(ai): dynamically load AI script tag after DOMContentLoaded to avoid race conditions. Call initialization from the modal trigger module and pass the show trigger function to the onload handler.

fix(ai): fix modal triggers to viewport

fix(modal-triggers): stack the triggers into a single column.

restyle footer widgets

updated time selector modal to use correct storage term

minor style update

WIP(ai-chat): get product data

chore(js): Factor out pageContext module from influxdb-url.js

chore(js): Refactor helpers.js out of inflluxdb-url.js

WIP: refactor influxdburl - minimal changes for module conversions

feat(ai): Custom AI chat example questions product and version.
Ask AI example questions:
- Adds support for customizing example Ask AI questions per product or version.
- Configure questions in site `data/products.yml`; otherwise, it uses default questions from `ask-ai.js`

Context, page, and product data:
- Adds sample URLs for remaining versions in influxdb_urls
- `page-context.js` consolidates and exports constants for page context (protocol, host, path, referrer) and path-to-data mappings for product and influxdb_url site data

Module refactor:
- Refactors some JavaScript into ES6 modules, and refactors some of those further into a Component pattern--just vanilla JS and no shadow DOM stuff. The Component pattern that uses data attributes to "bind" JavaScript modules with CSS and HTML is a popular approach in modern web development. This pattern enhances modularity, reusability, and maintainability by associating behavior (JavaScript), structure (HTML), and style (CSS) through the use of data attributes.
- `assets/main.js` is the entrypoint
- Passes pageParams from the Hugo page to modules that import `@params`.
- Moves most external dependencies out of `script` tags and into package.json to be managed with `yarn`.
- Adds `eslint`.
- For modules that aren't yet components, wraps execution statements inside an `initialize()` function and calls the function from `main.js` on `DOMContentLoaded`.
- For components, if the page contains the `data-component="<component-name>"`, the matching element is passed to the component function on `DOMContentLoaded`.
- I tried to avoid changing logic where it wasn't necessary.

Update DOC_GPT_PROFILE.md

customize ai chat modal styles

fix(influxdb-url): Rename to cloud_dedicated in influxdb_urls.yml, remove newly added placeholder URL and use the extant default, refactor
- Rename  to  in influxdb_urls.yml
- Fix influxdb-url.js and data provision in local-storage.js to use the new name, mapping it to  to retain the existing local storage key

chore(api-lib): Use local-storage import instead of window global

chore(js): cleanup

fix(js): Ensure feature-callout initializes on page load

fix(theme): Load preferred theme before making the page visible. Execute a predefined function by specifying the function name in data-theme-callback

fix(search-toggle): Restores toggling the search field when sidebar is collapsed. Moves the event handler to a new search-button component

fix(ai): Fix custom attribute assignment. Rename property to ai_example_questions

Include the word `Bearer` or `Token`, a space, and your **token** value (all case-sensitive). Fix TOC links.
Fixes #5781

fix(api-docs): Update API reference directories and generation script for influxdb3 URL paths, update links and names in reference content

fix(api-ref): Update getswagger.sh destination paths to use the new directory structure when fetching spec files. Update the redocly  plugin module path.

hotfix: fix hlevel bug in children shortcode

Remove underline from custom time widget

add color to custom time widget styling

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,100 @@
+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',
+    modalOpenOnCommandK: 'true',
+    modalExampleQuestionsColSpan: '8',
+    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 || null;
+    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 chatAttributes = {
+    modalExampleQuestions: getProductExampleQuestions(),
+    ...chatParams,
+  }
+  initializeChat({onChatLoad, chatAttributes});
+
+  if (userid) {
+    setUser(userid, email);
+  }
+}