SearchOrAskAi Error Handling Improvements (#2166)

* Add error handling utilities

* Improve error display on AskAi, and interrupt streams when rate limits are reached.

Author: cotti

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

@@ -1,10 +1,13 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck: EUI icons do not have types
 import { icon as EuiIconVisualizeApp } from '@elastic/eui/es/components/icon/assets/app_visualize'
+import { icon as EuiIconArrowEnd } from '@elastic/eui/es/components/icon/assets/arrowEnd'
+import { icon as EuiIconArrowStart } from '@elastic/eui/es/components/icon/assets/arrowStart'
 import { icon as EuiIconArrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down'
 import { icon as EuiIconArrowLeft } from '@elastic/eui/es/components/icon/assets/arrow_left'
 import { icon as EuiIconArrowRight } from '@elastic/eui/es/components/icon/assets/arrow_right'
 import { icon as EuiIconCheck } from '@elastic/eui/es/components/icon/assets/check'
+import { icon as EuiIconComment } from '@elastic/eui/es/components/icon/assets/comment'
 import { icon as EuiIconCopy } from '@elastic/eui/es/components/icon/assets/copy'
 import { icon as EuiIconCopyClipboard } from '@elastic/eui/es/components/icon/assets/copy_clipboard'
 import { icon as EuiIconCross } from '@elastic/eui/es/components/icon/assets/cross'
@@ -59,4 +62,7 @@ appendIconComponentCache({
     copy: EuiIconCopy,
     play: EuiIconPlay,
     sortUp: EuiIconSortUp,
+    arrowStart: EuiIconArrowStart,
+    arrowEnd: EuiIconArrowEnd,
+    comment: EuiIconComment,
 })

src/Elastic.Documentation.Site/Assets/modal.css

@@ -29,3 +29,35 @@
 		@apply text-ink-dark hover:text-ink text-2xl font-bold no-underline;
 	}
 }
+
+/* Search or Ask AI animation for secondary buttons */
+
+@keyframes slideInFromRight {
+	from {
+		right: 8px;
+		opacity: 0;
+	}
+	to {
+		right: 40px;
+		opacity: 1;
+	}
+}
+
+@keyframes slideOutToRight {
+	from {
+		right: 40px;
+		opacity: 1;
+	}
+	to {
+		right: 8px;
+		opacity: 0;
+	}
+}
+
+.slideInSearchOrAskAiInputAnimation {
+	animation: slideInFromRight 0.2s ease-out forwards;
+}
+
+.slideOutSearchOrAskAiInputAnimation {
+	animation: slideOutToRight 0.2s ease-out forwards;
+}

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

@@ -37,7 +37,7 @@ const ALL_SUGGESTIONS: AskAiSuggestion[] = [
     },
 ]
 
-export const AskAiSuggestions = () => {
+export const AskAiSuggestions = ({ disabled }: { disabled?: boolean }) => {
     const { submitQuestion } = useChatActions()
     const { setModalMode } = useModalActions()
     const { euiTheme } = useEuiTheme()
@@ -64,9 +64,12 @@ export const AskAiSuggestions = () => {
                         fullWidth
                         size="s"
                         onClick={() => {
-                            submitQuestion(suggestion.question)
-                            setModalMode('askAi')
+                            if (!disabled) {
+                                submitQuestion(suggestion.question)
+                                setModalMode('askAi')
+                            }
                         }}
+                        disabled={disabled}
                     >
                         {suggestion.question}
                     </EuiButton>

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

@@ -13,6 +13,7 @@ jest.mock('./chat.store', () => ({
     useChatActions: jest.fn(() => ({
         submitQuestion: jest.fn(),
         clearChat: jest.fn(),
+        clearNon429Errors: jest.fn(),
         setAiProvider: jest.fn(),
     })),
 }))
@@ -29,6 +30,44 @@ jest.mock('./AskAiSuggestions', () => ({
     ),
 }))
 
+// Mock AiProviderSelector
+jest.mock('./AiProviderSelector', () => ({
+    AiProviderSelector: () => (
+        <div data-testid="ai-provider-selector">Provider Selector</div>
+    ),
+}))
+
+// Mock modal.store
+jest.mock('../modal.store', () => ({
+    useModalActions: jest.fn(() => ({
+        setModalMode: jest.fn(),
+        openModal: jest.fn(),
+        closeModal: jest.fn(),
+        toggleModal: jest.fn(),
+    })),
+}))
+
+// Mock cooldown hooks
+jest.mock('./useAskAiCooldown', () => ({
+    useIsAskAiCooldownActive: jest.fn(() => false),
+    useAskAiCooldown: jest.fn(() => null),
+    useAskAiCooldownActions: jest.fn(() => ({
+        setCooldown: jest.fn(),
+        updateCooldown: jest.fn(),
+        notifyCooldownFinished: jest.fn(),
+        acknowledgeCooldownFinished: jest.fn(),
+    })),
+}))
+
+jest.mock('../useCooldown', () => ({
+    useCooldown: jest.fn(),
+}))
+
+// Mock SearchOrAskAiErrorCallout
+jest.mock('../SearchOrAskAiErrorCallout', () => ({
+    SearchOrAskAiErrorCallout: () => null,
+}))
+
 const mockUseChatMessages = jest.mocked(
     jest.requireMock('./chat.store').useChatMessages
 )
@@ -39,12 +78,14 @@ const mockUseChatActions = jest.mocked(
 describe('Chat Component', () => {
     const mockSubmitQuestion = jest.fn()
     const mockClearChat = jest.fn()
+    const mockClearNon429Errors = jest.fn()
 
     beforeEach(() => {
         jest.clearAllMocks()
         mockUseChatActions.mockReturnValue({
             submitQuestion: mockSubmitQuestion,
             clearChat: mockClearChat,
+            clearNon429Errors: mockClearNon429Errors,
         })
     })
 
@@ -196,7 +237,9 @@ describe('Chat Component', () => {
                 /Ask Elastic Docs AI Assistant/i
             )
             await user.type(input, question)
-            await user.click(screen.getByRole('button', { name: /send/i }))
+            await user.click(
+                screen.getByRole('button', { name: /send message/i })
+            )
 
             // Assert
             expect(mockSubmitQuestion).toHaveBeenCalledWith(question)