From 9c58a438c70ca05871dd30ec100f2894c3763093 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Sat, 11 Oct 2025 01:30:27 +0200
Subject: [PATCH 1/2] Rework AskAI suggestions

---
 .../SearchOrAskAi/AskAi/AskAiSuggestions.tsx  | 55 +++++++++++--------
 .../SearchOrAskAi/AskAi/Chat.tsx              | 31 +----------
 2 files changed, 34 insertions(+), 52 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
index 98796c7cc..c65e7bca9 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
@@ -3,44 +3,55 @@ import { useChatActions } from './chat.store'
 import { EuiButton, useEuiTheme } from '@elastic/eui'
 import { css } from '@emotion/react'
 import * as React from 'react'
-
-const buttonStyles = css`
-    border: none;
-    & > span {
-        justify-content: flex-start;
-    }
-`
+import { useMemo } from 'react'
 
 export interface AskAiSuggestion {
     question: string
 }
 
-interface Props {
-    suggestions: Set<AskAiSuggestion>
-}
+// Comprehensive list of AI suggestion questions
+const ALL_SUGGESTIONS: AskAiSuggestion[] = [
+    { question: 'How do I set up a data stream in Elasticsearch?' },
+    { question: 'What are the best practices for indexing performance?' },
+    { question: 'How can I create a dashboard in Kibana?' },
+    { question: 'What is the difference between a keyword and text field?' },
+    { question: 'How do I configure machine learning jobs?' },
+    { question: 'What are aggregations and how do I use them?' },
+    { question: 'How do I set up Elasticsearch security and authentication?' },
+    { question: 'What are the different types of Elasticsearch queries?' },
+    { question: 'How do I monitor cluster health and performance?' },
+    { question: 'What is the Elastic Stack and how do the components work together?' },
+    { question: 'How do I create and manage Elasticsearch indices?' },
+    { question: 'What are the best practices for Elasticsearch mapping?' },
+    { question: 'How do I set up log shipping with Beats?' },
+    { question: 'What is APM and how do I use it for application monitoring?' },
+    { question: 'How do I create custom visualizations in Kibana?' },
+    { question: 'What are Elasticsearch snapshots and how do I use them?' },
+    { question: 'How do I configure cross-cluster search?' },
+    { question: 'What are the different Elasticsearch node types and their roles?' },
+]
 
-export const AskAiSuggestions = (props: Props) => {
+export const AskAiSuggestions = () => {
     const { submitQuestion } = useChatActions()
     const { setModalMode } = useModalActions()
     const { euiTheme } = useEuiTheme()
 
-    const dynamicButtonStyles = css`
-        ${buttonStyles}
-        svg {
-            color: ${euiTheme.colors.textSubdued};
-        }
-    `
-
+    // Randomly select 3 questions from the comprehensive list
+    const selectedSuggestions = useMemo(() => {
+        // Shuffle the array and take first 3
+        const shuffled = [...ALL_SUGGESTIONS].sort(() => Math.random() - 0.5)
+        return shuffled.slice(0, 3)
+    }, [])
+    
     return (
         <ul>
-            {Array.from(props.suggestions).map((suggestion) => (
-                <li key={suggestion.question}>
+            {selectedSuggestions.map((suggestion) => (
+                <li key={suggestion.question} css={css`margin-bottom: ${euiTheme.size.s};`}>
                     <EuiButton
                         iconType="newChat"
-                        color="text"
+                        color="primary"
                         fullWidth
                         size="s"
-                        css={dynamicButtonStyles}
                         onClick={() => {
                             submitQuestion(suggestion.question)
                             setModalMode('askAi')
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
index b110742ec..c540523f2 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
@@ -148,36 +148,7 @@ export const Chat = () => {
                                         <h3>Try asking me:</h3>
                                     </EuiTitle>
                                     <EuiSpacer size="s" />
-                                    <AskAiSuggestions
-                                        suggestions={
-                                            new Set([
-                                                {
-                                                    question:
-                                                        'How do I set up a data stream in Elasticsearch?',
-                                                },
-                                                {
-                                                    question:
-                                                        'What are the best practices for indexing performance?',
-                                                },
-                                                {
-                                                    question:
-                                                        'How can I create a dashboard in Kibana?',
-                                                },
-                                                {
-                                                    question:
-                                                        'What is the difference between a keyword and text field?',
-                                                },
-                                                {
-                                                    question:
-                                                        'How do I configure machine learning jobs?',
-                                                },
-                                                {
-                                                    question:
-                                                        'What are aggregations and how do I use them?',
-                                                },
-                                            ])
-                                        }
-                                    />
+                                    <AskAiSuggestions />
                                 </>
                             }
                         />

From 18cb70e210457b2ef3e79387f45e8c88d858d562 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Sat, 11 Oct 2025 01:34:01 +0200
Subject: [PATCH 2/2] Run prettier

---
 .../SearchOrAskAi/AskAi/AskAiSuggestions.tsx  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
index c65e7bca9..cb8084193 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
@@ -20,7 +20,10 @@ const ALL_SUGGESTIONS: AskAiSuggestion[] = [
     { question: 'How do I set up Elasticsearch security and authentication?' },
     { question: 'What are the different types of Elasticsearch queries?' },
     { question: 'How do I monitor cluster health and performance?' },
-    { question: 'What is the Elastic Stack and how do the components work together?' },
+    {
+        question:
+            'What is the Elastic Stack and how do the components work together?',
+    },
     { question: 'How do I create and manage Elasticsearch indices?' },
     { question: 'What are the best practices for Elasticsearch mapping?' },
     { question: 'How do I set up log shipping with Beats?' },
@@ -28,7 +31,10 @@ const ALL_SUGGESTIONS: AskAiSuggestion[] = [
     { question: 'How do I create custom visualizations in Kibana?' },
     { question: 'What are Elasticsearch snapshots and how do I use them?' },
     { question: 'How do I configure cross-cluster search?' },
-    { question: 'What are the different Elasticsearch node types and their roles?' },
+    {
+        question:
+            'What are the different Elasticsearch node types and their roles?',
+    },
 ]
 
 export const AskAiSuggestions = () => {
@@ -42,11 +48,16 @@ export const AskAiSuggestions = () => {
         const shuffled = [...ALL_SUGGESTIONS].sort(() => Math.random() - 0.5)
         return shuffled.slice(0, 3)
     }, [])
-    
+
     return (
         <ul>
             {selectedSuggestions.map((suggestion) => (
-                <li key={suggestion.question} css={css`margin-bottom: ${euiTheme.size.s};`}>
+                <li
+                    key={suggestion.question}
+                    css={css`
+                        margin-bottom: ${euiTheme.size.s};
+                    `}
+                >
                     <EuiButton
                         iconType="newChat"
                         color="primary"