Rework AskAI suggestions (#2031)

* Rework AskAI suggestions

* Run prettier

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx

@@ -3,44 +3,66 @@ 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')

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx

@@ -150,36 +150,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 />
                                 </>
                             }
                         />