Ask AI group filters (#6529)

* feat(askai): add Kapa.ai source group filtering for InfluxDB v3

- Add ai_source_group_ids field to all InfluxDB v3 products in data/products.yml
- Add getProductSourceGroupIds() function to retrieve source group IDs from product data
- Enables filtered AI responses using Kapa source groups for documentation pages
- Follows existing pattern for dynamic product configuration
- Implement version-specific config support (__v1, __v2 suffixes)
- Append version hints to example questions for InfluxDB database products only
- Make example questions generic (remove product-specific names)
- Tools (Telegraf, Chronograf, Kapacitor, Flux, Explorer) display questions without version hints
- Pre-fills chat input with [version: /path/] for InfluxDB database products
- Users can easily edit or remove the pre-filled text
- Works for manual opens (Cmd+K) and programmatic opens
- Converts module to TypeScript

* refactor(ask-ai): change version format to 'My version: <product name>'

Use human-readable product names instead of URL paths for better UX.
Example: 'My version: InfluxDB 3 Core' instead of '[version: /influxdb3/core/]'

* fix(ask-ai): restore working Kapa.open() pre-fill implementation

- Replace textarea detection with direct Kapa.open() call
- Add Kapa preinitialization code
- Use click handler on .ask-ai-open button with capture phase
- Handle conversation reset event to re-fill version context
- Remove console logging for cleaner production code

* fix(ask-ai): remove parentheses from example questions for consistency

Make example question format match the pre-fill format:
- Before: 'question (My version: product)'
- After: 'question My version: product'

This ensures users don't think there's a difference between the two formats.

* fix(askai): add Explorer product mapping for Ask AI widget

- Add influxdb3_explorer mapping to getCurrentProductData()
- Add explorer context to getContext() function
- Ensures Explorer pages use correct ai_sample_questions from products.yml
- Reorder Explorer questions with 'install and run' first

This fixes the issue where Explorer Ask AI widget was showing wrong
example questions by properly loading the influxdb3_explorer config.

* test(page-context): add comprehensive e2e tests for product mappings

Add Cypress tests to validate page-context.js correctly identifies:
- Product context values for all InfluxDB products
- Product data from products.yml configuration
- Version information
- AI sample questions and source group IDs
- Placeholder host values

Tests cover:
- InfluxDB 3 (Core, Enterprise, Explorer, Cloud variants, Clustered)
- InfluxDB v2 and v1
- InfluxDB Cloud (TSM)
- Tools (Telegraf, Chronograf, Kapacitor, Flux)

Validates the fix for Explorer Ask AI showing correct example questions.

Related to #jts-askai-group-filters branch work.

* feat(test): add --no-mapping flag to e2e test runner

Allow running functionality tests without requiring content file paths.
The --no-mapping flag skips content-to-URL mapping, making it easier
to run tests that don't depend on specific content files.

Usage:
  # With content mapping (for content-specific tests)
  node run-e2e-specs.js content/influxdb3/core/_index.md

  # Without content mapping (for functionality tests)
  node run-e2e-specs.js --spec cypress/e2e/page-context.cy.js --no-mapping

Benefits:
- Simplifies running functionality tests like page-context.cy.js
- Reduces test startup time by skipping unnecessary file mapping
- Makes test commands clearer about their purpose

The page-context test was updated to work correctly with this flag.

* deps: update caniuse and related hook files

* test: Add a `--no-mapping` flag to run tests without specific content files (i.e., test contains all the URLs it needs)

* chore(ask-ai): Format example questions

* test(page-context): add comprehensive e2e tests for all products in products.yml

- Expanded test suite from 6 to 27 tests covering all products
- Added tests for InfluxDB 3 products (Explorer, Core, Enterprise, Cloud Serverless, Cloud Dedicated, Clustered)
- Added tests for InfluxDB v2 and Cloud (TSM)
- Added tests for InfluxDB v1 and Enterprise v1
- Added tests for other products (Telegraf, Chronograf, Kapacitor, Flux)
- Validates page mappings in page-context.js
- Validates AI sample questions configuration in products.yml
- All 27 tests passing

* fix(page-context): correct enterprise_influxdb URL pattern matching

- Changed pattern from /enterprise_v1/ to /enterprise_influxdb/
- Fixes Ask AI example questions not showing correctly for Enterprise v1
- Pattern now matches actual URL structure /enterprise_influxdb/v1/
- All 27 e2e tests passing

* test(page-context): add UI validation for Ask AI widget configuration

- Added 4 tests checking Kapa widget script data attributes
- Tests verify data-modal-example-questions contains correct product-specific questions
- Validates Explorer, Core, Enterprise, and Enterprise v1 configurations
- All 31 tests passing (27 existing + 4 new UI tests)

* feat(ask-ai): add help in Ask AI widget placeholder

- InfluxDB placeholder recommends specifying product and version
- Fix page-context.js to use products.influxdb_cloud instead of products.cloud
- Add UI tests verifying version-specific naming in Kapa widget script tags

* feat(ask-ai): Tailors placeholder for each version/product. Disables "Viewing <product>" in disclaimer note.

Author: jstirnaman

.github/instructions/layouts.instructions.md

@@ -11,10 +11,11 @@ applyTo: "layouts/**/*.html"
 
 When creating or modifying Hugo layouts and shortcodes:
 
-1. Use Hugo template syntax and functions
-2. Follow existing patterns in `/layouts/shortcodes/`
-3. Test in [content/example.md](../../content/example.md)
-4. Document new shortcodes in [DOCS-SHORTCODES.md](../../DOCS-SHORTCODES.md)
+1. Use test-driven development using `/cypress/`
+2. Use Hugo template syntax and functions
+3. Follow existing patterns in `/layouts/shortcodes/`
+4. Test in [content/example.md](../../content/example.md)
+5. Document new shortcodes in [DOCS-SHORTCODES.md](../../DOCS-SHORTCODES.md)
 
 ## Shortcode Pattern
 
@@ -30,9 +31,32 @@ When creating or modifying Hugo layouts and shortcodes:
 
 ## Testing
 
-Add usage examples to `content/example.md` to verify:
+**IMPORTANT:** Use test-driven development with Cypress.
+
+Add shortcode usage examples to `content/example.md` to verify:
+
 - Rendering in browser
 - Hugo build succeeds
 - No console errors
+- JavaScript functionality works as expected (check browser console for errors)
+- Interactive elements behave correctly (click links, buttons, etc.)
+
+### TDD Workflow
+
+1. Add Cypress tests (high-level to start).
+2. Run tests and make sure they fail.
+3. Implement code changes
+4. Run tests and make sure they pass.
+5. Add and refine tests.
+6. Repeat.
+
+### Manual Testing Workflow
+
+1. Make changes to shortcode/layout files
+2. Wait for Hugo to rebuild (check terminal output)
+3. Get the server URL from the log
+4. Open browser DevTools console (F12)
+5. Test the functionality and check for JavaScript errors
+6. Verify the feature works as intended before marking complete
 
 See [DOCS-SHORTCODES.md](../../DOCS-SHORTCODES.md) for complete shortcode documentation.

.husky/_/pre-commit

@@ -33,6 +33,9 @@ call_lefthook()
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"
 
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
     elif bundle exec lefthook -h >/dev/null 2>&1
     then
       bundle exec lefthook "$@"
@@ -42,12 +45,21 @@ call_lefthook()
     elif pnpm lefthook -h >/dev/null 2>&1
     then
       pnpm lefthook "$@"
-    elif swift package plugin lefthook >/dev/null 2>&1
+    elif swift package lefthook >/dev/null 2>&1
     then
-      swift package --disable-sandbox plugin lefthook "$@"
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
     elif command -v mint >/dev/null 2>&1
     then
       mint run csjones/lefthook-plugin "$@"
+    elif uv run lefthook -h >/dev/null 2>&1
+    then
+      uv run lefthook "$@"
+    elif mise exec -- lefthook -h >/dev/null 2>&1
+    then
+      mise exec -- lefthook "$@"
+    elif devbox run lefthook -h >/dev/null 2>&1
+    then
+      devbox run lefthook "$@"
     else
       echo "Can't find lefthook in PATH"
     fi

.husky/_/pre-push

@@ -33,6 +33,9 @@ call_lefthook()
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"
 
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
     elif bundle exec lefthook -h >/dev/null 2>&1
     then
       bundle exec lefthook "$@"
@@ -42,12 +45,21 @@ call_lefthook()
     elif pnpm lefthook -h >/dev/null 2>&1
     then
       pnpm lefthook "$@"
-    elif swift package plugin lefthook >/dev/null 2>&1
+    elif swift package lefthook >/dev/null 2>&1
     then
-      swift package --disable-sandbox plugin lefthook "$@"
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
     elif command -v mint >/dev/null 2>&1
     then
       mint run csjones/lefthook-plugin "$@"
+    elif uv run lefthook -h >/dev/null 2>&1
+    then
+      uv run lefthook "$@"
+    elif mise exec -- lefthook -h >/dev/null 2>&1
+    then
+      mise exec -- lefthook "$@"
+    elif devbox run lefthook -h >/dev/null 2>&1
+    then
+      devbox run lefthook "$@"
     else
       echo "Can't find lefthook in PATH"
     fi

.husky/_/prepare-commit-msg

@@ -33,6 +33,9 @@ call_lefthook()
     then
       "$dir/node_modules/lefthook/bin/index.js" "$@"
 
+    elif go tool lefthook -h >/dev/null 2>&1
+    then
+      go tool lefthook "$@"
     elif bundle exec lefthook -h >/dev/null 2>&1
     then
       bundle exec lefthook "$@"
@@ -42,12 +45,21 @@ call_lefthook()
     elif pnpm lefthook -h >/dev/null 2>&1
     then
       pnpm lefthook "$@"
-    elif swift package plugin lefthook >/dev/null 2>&1
+    elif swift package lefthook >/dev/null 2>&1
     then
-      swift package --disable-sandbox plugin lefthook "$@"
+      swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
     elif command -v mint >/dev/null 2>&1
     then
       mint run csjones/lefthook-plugin "$@"
+    elif uv run lefthook -h >/dev/null 2>&1
+    then
+      uv run lefthook "$@"
+    elif mise exec -- lefthook -h >/dev/null 2>&1
+    then
+      mise exec -- lefthook "$@"
+    elif devbox run lefthook -h >/dev/null 2>&1
+    then
+      devbox run lefthook "$@"
     else
       echo "Can't find lefthook in PATH"
     fi

assets/js/ask-ai-trigger.js

@@ -1,19 +1,117 @@
 import AskAI from './ask-ai.js';
 
+/**
+ * Global state for Ask AI initialization
+ */
+const state = {
+  kapaInitialized: false,
+  linksListenerInitialized: false,
+};
+
+/**
+ * Initialize the Kapa widget
+ */
+function initializeKapa() {
+  if (!state.kapaInitialized) {
+    AskAI();
+    state.kapaInitialized = true;
+
+    // Store in global namespace for debugging
+    window.influxdatadocs = window.influxdatadocs || {};
+    window.influxdatadocs.kapaInitialized = true;
+  }
+}
+
+/**
+ * Show the trigger button by removing inline display: none style
+ * @param {HTMLElement} element - The trigger button element
+ */
 function showTrigger(element) {
-  // Remove the inline display: none style
-  element.removeAttribute('style');
+  if (element) {
+    element.removeAttribute('style');
+  }
 }
 
+/**
+ * Initialize Ask AI trigger button component
+ * @param {Object} options - Component options
+ * @param {HTMLElement} options.component - The trigger button element
+ */
 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) });
+    state.kapaInitialized = true;
+    window.influxdatadocs = window.influxdatadocs || {};
+    window.influxdatadocs.kapaInitialized = true;
   } else {
     showTrigger(component);
   }
-}
+}
+
+/**
+ * Handle ask-ai-link clicks globally
+ * This ensures ask-ai-link shortcodes work even without the trigger button
+ */
+function handleAskAILinks() {
+  if (state.linksListenerInitialized) {
+    return;
+  }
+
+  state.linksListenerInitialized = true;
+
+  // Store in global namespace for debugging
+  window.influxdatadocs = window.influxdatadocs || {};
+  window.influxdatadocs.askAILinksInitialized = true;
+
+  // Listen for clicks on ask-ai-link elements
+  document.addEventListener(
+    'click',
+    (event) => {
+      const link = event.target.closest('.ask-ai-open');
+      if (!link) return;
+
+      const query = link.getAttribute('data-query');
+
+      // Initialize Kapa if not already done
+      if (!state.kapaInitialized) {
+        initializeKapa();
+
+        // Wait for Kapa to be ready, then open with query
+        if (query && window.Kapa?.open) {
+          // Give Kapa a moment to initialize
+          setTimeout(() => {
+            if (window.Kapa?.open) {
+              window.Kapa.open({
+                mode: 'ai',
+                query: query,
+              });
+            }
+          }, 100);
+        }
+      } else {
+        // Kapa is already initialized - open with query if provided
+        if (query && window.Kapa?.open) {
+          window.Kapa.open({
+            mode: 'ai',
+            query: query,
+          });
+        }
+      }
+    },
+    { passive: true }
+  );
+}
+
+// Initialize ask-ai-link handling when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', handleAskAILinks);
+} else {
+  handleAskAILinks();
+}