SearchOrAskAI UX adjustments (#1798)

* SearchOrAskAI UX adjustments

* Prettier

* Fix compontent usage

* Run prettier

* Use thumbUp and thumbDown icons and adjust suggested questions

* Run prettier

Author: reakaleek

src/Elastic.Documentation.Site/Assets/eui-icons-cache.ts

@@ -13,6 +13,8 @@ import { icon as EuiIconNewChat } from '@elastic/eui/es/components/icon/assets/n
 import { icon as EuiIconRefresh } from '@elastic/eui/es/components/icon/assets/refresh'
 import { icon as EuiIconSearch } from '@elastic/eui/es/components/icon/assets/search'
 import { icon as EuiIconSparkles } from '@elastic/eui/es/components/icon/assets/sparkles'
+import { icon as EuiIconThumbDown } from '@elastic/eui/es/components/icon/assets/thumbDown'
+import { icon as EuiIconThumbUp } from '@elastic/eui/es/components/icon/assets/thumbUp'
 import { icon as EuiIconTrash } from '@elastic/eui/es/components/icon/assets/trash'
 import { icon as EuiIconUser } from '@elastic/eui/es/components/icon/assets/user'
 import { icon as EuiIconWrench } from '@elastic/eui/es/components/icon/assets/wrench'
@@ -37,4 +39,6 @@ appendIconComponentCache({
     faceSad: EuiIconFaceSad,
     refresh: EuiIconRefresh,
     error: EuiIconError,
+    thumbUp: EuiIconThumbUp,
+    thumbDown: EuiIconThumbDown,
 })

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

@@ -12,6 +12,7 @@ import {
     EuiToolTip,
     useEuiTheme,
     EuiCallOut,
+    EuiIcon,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import * as React from 'react'
@@ -69,6 +70,7 @@ export const AskAiAnswer = () => {
             hasShadow={false}
             hasBorder={false}
             css={css`
+                flex-grow: 1;
                 .euiMarkdownFormat {
                     font-size: ${euiTheme.size.base};
                 }
@@ -77,15 +79,26 @@ export const AskAiAnswer = () => {
                 }
             `}
         >
+            <div
+                css={css`
+                    display: flex;
+                    gap: ${euiTheme.size.s};
+                    align-items: center;
+                `}
+            >
+                <EuiIcon type="sparkles" color="subdued" size="s" />
+                <EuiText size="xs">Ask Elastic Docs AI Assistant</EuiText>
+            </div>
+            <EuiSpacer size="s" />
             <EuiPanel
                 panelRef={scrollRef}
                 paddingSize="m"
                 hasShadow={false}
                 hasBorder={false}
                 css={css`
-                    max-height: 50vh;
-                    overflow-y: scroll;
-                    background-color: ${euiTheme.colors.backgroundBaseSubdued};
+                    //max-height: 50vh;
+                    //overflow-y: scroll;
+                    background-color: ${euiTheme.colors.backgroundLightText};
                 `}
             >
                 <EuiMarkdownFormat>
@@ -104,7 +117,7 @@ export const AskAiAnswer = () => {
                                     <EuiToolTip content="This answer was helpful">
                                         <EuiButtonIcon
                                             aria-label="This answer was helpful"
-                                            iconType="faceHappy"
+                                            iconType="thumbUp"
                                             color="success"
                                         />
                                     </EuiToolTip>
@@ -113,7 +126,7 @@ export const AskAiAnswer = () => {
                                     <EuiToolTip content="This answer was not helpful">
                                         <EuiButtonIcon
                                             aria-label="This answer was not helpful"
-                                            iconType="faceSad"
+                                            iconType="thumbDown"
                                             color="danger"
                                         />
                                     </EuiToolTip>
@@ -142,7 +155,7 @@ export const AskAiAnswer = () => {
                             ).length > 0 && <EuiSpacer size="s" />}
                             <EuiFlexGroup
                                 alignItems="center"
-                                gutterSize="xs"
+                                gutterSize="s"
                                 responsive={false}
                             >
                                 <EuiFlexItem grow={false}>

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/useLlmGateway.ts

@@ -154,8 +154,10 @@ export const useLlmGateway = (props: Props): UseLlmGatewayResponse => {
         async (question: string) => {
             if (question.trim() && question !== lastSentQuestionRef.current) {
                 abort()
-                lastSentQuestionRef.current = question
                 setError(null)
+                setMessages([])
+                clearQueue()
+                lastSentQuestionRef.current = question
                 const payload = createLlmGatewayRequest(
                     question,
                     props.threadId

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/Search/SearchResults.tsx

@@ -10,6 +10,7 @@ import {
     useEuiTheme,
     EuiIcon,
     EuiPagination,
+    EuiHorizontalRule,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import { useDebounce } from '@uidotdev/usehooks'
@@ -70,14 +71,15 @@ export const SearchResults = () => {
                             <SearchResultListItem item={result} />
                         ))}
                     </ul>
+                    <EuiSpacer size="m" />
                     <div
                         css={css`
                             display: flex;
-                            justify-content: flex-end;
+                            justify-content: center;
                         `}
                     >
                         <EuiPagination
-                            aria-label="Many pages example"
+                            aria-label="Search results pages"
                             pageCount={Math.min(data.pageCount, 10)}
                             activePage={activePage}
                             onPageClick={(activePage) =>
@@ -87,6 +89,7 @@ export const SearchResults = () => {
                     </div>
                 </>
             )}
+            <EuiHorizontalRule margin="m" />
         </div>
     )
 }
@@ -99,7 +102,11 @@ function SearchResultListItem({ item: result }: SearchResultListItemProps) {
     const { euiTheme } = useEuiTheme()
     const searchTerm = useSearchTerm()
     const highlightSearchTerms = useMemo(
-        () => searchTerm.toLowerCase().split(' '),
+        () =>
+            searchTerm
+                .toLowerCase()
+                .split(' ')
+                .filter((i) => i.length > 1),
         [searchTerm]
     )
 

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

@@ -1,13 +1,14 @@
 import { AskAiAnswer } from './AskAi/AskAiAnswer'
+import { AskAiSuggestions } from './AskAi/AskAiSuggestions'
 import { SearchResults } from './Search/SearchResults'
-import { Suggestions } from './Suggestions'
 import { useAskAiTerm, useSearchActions, useSearchTerm } from './search.store'
 import {
     EuiFieldSearch,
     EuiSpacer,
     EuiBetaBadge,
     EuiText,
     EuiHorizontalRule,
+    useEuiOverflowScroll,
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import * as React from 'react'
@@ -18,24 +19,59 @@ export const SearchOrAskAiModal = () => {
     const { setSearchTerm, submitAskAiTerm } = useSearchActions()
 
     return (
-        <>
-            <EuiFieldSearch
-                fullWidth
-                placeholder="Search the docs or ask Elastic Docs AI Assistant"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                onSearch={(e) => {
-                    submitAskAiTerm(e)
-                }}
-                isClearable
-                autoFocus={true}
-            />
-            <EuiSpacer size="m" />
-            <SearchResults />
-            {askAiTerm ? <AskAiAnswer /> : <Suggestions />}
+        <div
+            css={css`
+                display: flex;
+                flex-direction: column;
+            `}
+        >
+            <div
+                css={css`
+                    flex-grow: 0;
+                `}
+            >
+                <EuiFieldSearch
+                    fullWidth
+                    placeholder="Search the docs or ask Elastic Docs AI Assistant"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    onSearch={(e) => {
+                        submitAskAiTerm(e)
+                    }}
+                    isClearable
+                    autoFocus={true}
+                />
+                <EuiSpacer size="m" />
+            </div>
+            <div
+                css={css`
+                    flex-grow: 1;
+                    overflow-y: scroll;
+                    max-height: 80vh;
+                    ${useEuiOverflowScroll('y')}
+                `}
+            >
+                <SearchResults />
+                {askAiTerm ? (
+                    <AskAiAnswer />
+                ) : (
+                    <AskAiSuggestions
+                        suggestions={[
+                            { question: 'What is an index template?' },
+                            { question: 'What is semantic search?' },
+                            {
+                                question:
+                                    'How do I create an elasticsearch index?',
+                            },
+                            { question: 'How do I set up an ingest pipeline?' },
+                        ]}
+                    />
+                )}
+            </div>
             <EuiHorizontalRule margin="m" />
             <div
                 css={css`
+                    flex-grow: 0;
                     display: flex;
                     align-items: center;
                     gap: calc(var(--spacing) * 2);
@@ -56,6 +92,6 @@ export const SearchOrAskAiModal = () => {
                     This feature is in beta. Got feedback? We'd love to hear it!
                 </EuiText>
             </div>
-        </>
+        </div>
     )
 }

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

@@ -28,6 +28,7 @@ public record AskAiRequest(string Message, string? ThreadId)
 		- Handling Unknowns: If the information required to answer the question is not present in the provided documents, you must explicitly state that the answer cannot be found. Do not attempt to guess, infer, or provide a general response.
 		- Helpful Fallback: If you cannot find a direct answer, you may suggest and link to a few related or similar topics that are present in the documentation. This provides value even when a direct answer is unavailable.
 		- Output Format: Your final response should be a single, coherent block of text.
+		- Short and Concise: Keep your answers as brief as possible while still being complete and informative. For more more details refer to the documentation with links.
 
 		## Negative Constraints: