feat(docs-ai): shuffle suggestion questions (#36348)

* feat: shuffle suggestion questions

* chore: refactor

Author: onceLearner

assets/scripts/components/conversational-search/index.js

@@ -7,6 +7,7 @@ import { attachTooltips, buildSourceCards, showSourceTooltip, closeAllSourceTool
 import { addMessageActions, injectCodeCopyButtons } from './actions';
 import { streamConversation, fetchConversation, resetTypesenseClient } from './streaming';
 import { streamDocsAiChat } from './docsai-client';
+import { pickQuestions } from './suggested-questions';
 
 const { env } = document.documentElement.dataset;
 const docsConfig = getConfig(env);
@@ -161,9 +162,23 @@ class ConversationalSearch {
         const emptyStateTemplate = document.getElementById('conv-search-empty-state');
         if (emptyStateTemplate) {
             container.appendChild(emptyStateTemplate.content.cloneNode(true));
+            this.renderSuggestions(container);
         }
     }
 
+    renderSuggestions(container = this.messagesContainer) {
+        const suggestionsContainer = container?.querySelector('.conv-search-suggestions');
+        const template = document.getElementById('conv-search-suggestion-template');
+        if (!suggestionsContainer || !template) return;
+
+        suggestionsContainer.replaceChildren(...pickQuestions().map((q) => {
+            const btn = template.content.firstElementChild.cloneNode(true);
+            btn.dataset.query = q;
+            btn.querySelector('span').textContent = q;
+            return btn;
+        }));
+    }
+
     // --- Events ------------------------------------------------------------------
 
     bindEvents() {

assets/scripts/components/conversational-search/suggested-questions.js

@@ -0,0 +1,32 @@
+const SUGGESTED_QUESTIONS = [
+    'What is the Datadog Agent?',
+    'How to define a Datadog monitor in Terraform (example)?',
+    'Which OpenTelemetry semantic conventions should I use for LLM traces in Datadog?',
+    'How do I install the Datadog Agent on a Linux host?',
+    'What are Datadog API and application keys, and how do I create them?',
+    'How do I tag my infrastructure in Datadog?',
+    'How do I set up APM tracing for a Python application?',
+    'What is the difference between a service, a resource, and a trace in Datadog APM?',
+    'How do I send logs from a Docker container to Datadog?',
+    'How do I create a log processing pipeline to parse custom logs?',
+    'How do I monitor Kubernetes clusters with Datadog?',
+    'How do I set up the AWS integration with Datadog?',
+    'How do I create a metric monitor with alert conditions in Datadog?',
+    'What monitor types are available in Datadog?',
+    'How do I build a custom dashboard with template variables?',
+    'How do I create a Synthetic API test to monitor an endpoint?',
+    'How do I set up Real User Monitoring (RUM) for a web application?',
+    'How do I monitor AWS Lambda functions with Datadog?',
+    'How do I enable Continuous Profiler for a Java service?',
+    'How do I trace LLM application calls with Datadog LLM Observability?',
+    'How do I create a Service Level Objective (SLO) in Datadog?',
+    'How do I send OpenTelemetry traces to Datadog?',
+    'How do I track AWS cloud costs in Datadog?'
+];
+
+export function pickQuestions() {
+    const indexes = new Set();
+    // Pick 3 random distinct indexes
+    while (indexes.size < 3) indexes.add(Math.floor(Math.random() * SUGGESTED_QUESTIONS.length));
+    return [...indexes].map((index) => SUGGESTED_QUESTIONS[index]);
+}

layouts/partials/conversational-search.html

@@ -69,13 +69,15 @@ <h3 class="conv-search-empty-title">How can I help you today?</h3>
             <p class="conv-search-empty-subtitle">Ask me anything about Datadog documentation</p>
         </div>
         <div class="conv-search-suggestions">
-            <button class="conv-search-suggestion" data-query="What is the Datadog Agent?"><span>What is the Datadog Agent?</span></button>
-            <button class="conv-search-suggestion" data-query="How to define a Datadog monitor in Terraform (example)?"><span>How to define a Datadog monitor in Terraform (example)?</span></button>
-            <button class="conv-search-suggestion" data-query="Which OpenTelemetry semantic conventions should I use for LLM traces in Datadog?"><span>Which OpenTelemetry semantic conventions should I use for LLM traces in Datadog?</span></button>
         </div>
     </div>
 </template>
 
+{{/* Suggestion button shell — text + data-query are filled in by JS */}}
+<template id="conv-search-suggestion-template">
+    <button class="conv-search-suggestion"><span></span></button>
+</template>
+
 {{/* Reusable assistant message actions (thumbs/copy) */}}
 <template id="conv-search-actions-template">
     <div class="conv-search-message-actions">