Ask AI group filters

.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();
+}