Skip to content

Rework AskAI suggestions #2031

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 13, 2025
Merged

Rework AskAI suggestions #2031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9c58a43
Rework AskAI suggestions
reakaleek Oct 10, 2025
18cb70e
Run prettier
reakaleek Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 43 additions & 21 deletions ...Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
31 changes: 1 addition & 30 deletions src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
</>
}
/>
Expand Down
Loading