Fix styling and handling of errors.

Author: gibrown

projects/packages/search/src/instant-search/components/answers-panel.jsx

@@ -1,4 +1,4 @@
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import * as React from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { markdownToHtml } from '../lib/markdown';
@@ -31,9 +31,10 @@ const ExternalLinkIcon = () => (
  * @param {string} props.status    - 'idle' | 'loading' | 'streaming' | 'done' | 'error'
  * @param {string} props.text      - Accumulated answer text (markdown).
  * @param {Array}  props.citations - Array of { title, url, excerpt } citation objects.
+ * @param {object} props.error     - Error info: { message, code, source } or null.
  * @return {React.ReactElement|null} The rendered panel or null.
  */
-export default function AnswersPanel( { status, text, citations = [] } ) {
+export default function AnswersPanel( { status, text, citations = [], error = null } ) {
 	const [ expanded, setExpanded ] = useState( false );
 	const [ overflows, setOverflows ] = useState( false );
 	const contentRef = useRef( null );
@@ -46,10 +47,44 @@ export default function AnswersPanel( { status, text, citations = [] } ) {
 		}
 	}, [ status, text ] );
 
-	if ( status === 'idle' || status === 'error' ) {
+	if ( status === 'idle' ) {
 		return null;
 	}
 
+	if ( status === 'error' ) {
+		return (
+			<div className="jp-search-answers-panel jp-search-answers-panel--error" aria-live="polite">
+				<h2 className="jp-search-answers-panel__heading">
+					{ __( 'AI answer', 'jetpack-search-pkg' ) }
+				</h2>
+				<div className="jp-search-answers-panel__error">
+					<p className="jp-search-answers-panel__error-message">
+						{ __( 'Sorry, an error occurred while generating an answer.', 'jetpack-search-pkg' ) }
+					</p>
+					{ error && (
+						<p
+							className="jp-search-answers-panel__error-detail"
+							data-testid="answers-panel-error-detail"
+						>
+							{ error.message }
+							{ error.code !== null && (
+								<>
+									<br />
+									{
+										/* translators: %s: numeric error code */ sprintf(
+											__( 'Error code: %s', 'jetpack-search-pkg' ),
+											error.code
+										)
+									}
+								</>
+							) }
+						</p>
+					) }
+				</div>
+			</div>
+		);
+	}
+
 	const isCollapsible = status === 'done';
 	const isCollapsed = isCollapsible && ! expanded;
 	// Keep fixed height through done+collapsed so the panel stays stable when

projects/packages/search/src/instant-search/components/answers-panel.scss

@@ -47,6 +47,26 @@
 	text-transform: uppercase;
 }
 
+.jp-search-answers-panel--error {
+	border-color: #f0c0c0;
+}
+
+.jp-search-answers-panel__error {
+	padding: 0 18px 14px;
+}
+
+.jp-search-answers-panel__error-message {
+	color: #cc1818;
+	font-size: 13px;
+	margin: 0 0 4px;
+}
+
+.jp-search-answers-panel__error-detail {
+	color: helper.$color-text-lighter;
+	font-size: 12px;
+	margin: 0;
+}
+
 .jp-search-answers-panel__loading {
 	align-items: center;
 	color: #787c82;

projects/packages/search/src/instant-search/components/search-app.jsx

@@ -64,6 +64,7 @@ class SearchApp extends Component {
 			aiStatus: 'idle', // 'idle' | 'loading' | 'streaming' | 'done' | 'error'
 			aiText: '',
 			aiCitations: [],
+			aiError: null,
 		};
 
 		this.getResults = debounce( this.getResults, 200 );
@@ -256,7 +257,7 @@ class SearchApp extends Component {
 		const siteId = options.aiAnswersSiteId || options.siteId;
 
 		if ( ! query || query.length < 3 ) {
-			this.setState( { aiStatus: 'idle', aiText: '', aiCitations: [] } );
+			this.setState( { aiStatus: 'idle', aiText: '', aiCitations: [], aiError: null } );
 			return;
 		}
 
@@ -266,11 +267,26 @@ class SearchApp extends Component {
 		this.aiController = new AbortController();
 		const controller = this.aiController; // local capture to avoid race in .catch()
 
-		this.setState( { aiStatus: 'loading', aiText: '', aiCitations: [] } );
+		this.setState( { aiStatus: 'loading', aiText: '', aiCitations: [], aiError: null } );
 
 		const url =
 			'https://public-api.wordpress.com/wpcom/v2/ai/agent/jetpack-workflow-search_summarizer';
 
+		const HTTP_STATUS_NAMES = {
+			400: 'Bad Request',
+			401: 'Unauthorized',
+			403: 'Forbidden',
+			404: 'Not Found',
+			429: 'Too Many Requests',
+			500: 'Internal Server Error',
+			502: 'Bad Gateway',
+			503: 'Service Unavailable',
+			504: 'Gateway Timeout',
+		};
+
+		// Captured by onopen before onerror fires, so .catch sees the real HTTP error.
+		let httpError = null;
+
 		fetchEventSource( url, {
 			method: 'POST',
 			headers: {
@@ -308,6 +324,11 @@ class SearchApp extends Component {
 			signal: controller.signal,
 			onopen: async response => {
 				if ( ! response.ok ) {
+					httpError = {
+						message: HTTP_STATUS_NAMES[ response.status ] || `HTTP ${ response.status }`,
+						code: response.status,
+						source: 'http',
+					};
 					throw new Error( `HTTP ${ response.status }` );
 				}
 			},
@@ -328,19 +349,29 @@ class SearchApp extends Component {
 						const citations = dataPart?.data?.sources || dataPart?.data?.strict_sources || [];
 						this.setState( { aiStatus: 'done', aiCitations: citations } );
 					} else if ( data.result?.status?.state === 'failed' || data.error ) {
-						this.setState( { aiStatus: 'error' } );
+						const textPart = data.result?.status?.message?.parts?.find( p => p.type === 'text' );
+						const message = data.error?.message || textPart?.text || 'Request failed';
+						const code = data.error?.code ?? null;
+						this.setState( {
+							aiStatus: 'error',
+							aiError: { message, code, source: 'api' },
+						} );
 					}
 				} catch {
 					// Ignore unparseable events.
 				}
 			},
 			onerror: () => {
-				this.setState( { aiStatus: 'error' } );
-				throw new Error( 'SSE error' );
+				// Rethrow without setting state — .catch handles all error state
+				// so httpError captured in onopen isn't overwritten.
+				throw new Error( 'onerror' );
 			},
 		} ).catch( () => {
 			if ( ! controller.signal.aborted ) {
-				this.setState( { aiStatus: 'error' } );
+				this.setState( {
+					aiStatus: 'error',
+					aiError: httpError ?? { message: 'Network request error', code: null, source: 'network' },
+				} );
 			}
 		} );
 	};
@@ -395,6 +426,7 @@ class SearchApp extends Component {
 							aiStatus={ this.state.aiStatus }
 							aiText={ this.state.aiText }
 							aiCitations={ this.state.aiCitations }
+							aiError={ this.state.aiError }
 							closeOverlay={ this.hideResults }
 							enableLoadOnScroll={ this.state.overlayOptions.enableInfScroll }
 							enableFilteringOpensOverlay={ this.state.overlayOptions.enableFilteringOpensOverlay }

projects/packages/search/src/instant-search/components/search-results.jsx

@@ -157,6 +157,7 @@ class SearchResults extends Component {
 					status={ this.props.aiStatus }
 					text={ this.props.aiText }
 					citations={ this.props.aiCitations }
+					error={ this.props.aiError }
 				/>
 				<TabbedSearchFilters />
 

projects/packages/search/src/instant-search/components/test/answers-panel.test.jsx

@@ -8,11 +8,6 @@ describe( 'AnswersPanel', () => {
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	it( 'renders nothing on error', () => {
-		const { container } = render( <AnswersPanel status="error" text="" citations={ [] } /> );
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
 	it( 'shows loading message', () => {
 		render( <AnswersPanel status="loading" text="" citations={ [] } /> );
 		expect( screen.getByText( 'Finding an answer…' ) ).toBeInTheDocument();
@@ -29,4 +24,60 @@ describe( 'AnswersPanel', () => {
 		expect( screen.getByText( 'Reset here.' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'Reset Password' ) ).toBeInTheDocument();
 	} );
+
+	describe( 'error state', () => {
+		it( 'shows error message when error prop is null', () => {
+			render( <AnswersPanel status="error" text="" citations={ [] } error={ null } /> );
+			expect(
+				screen.getByText( 'Sorry, an error occurred while generating an answer.' )
+			).toBeInTheDocument();
+		} );
+
+		it( 'shows no detail line when error prop is null', () => {
+			render( <AnswersPanel status="error" text="" citations={ [] } error={ null } /> );
+			expect( screen.queryByTestId( 'answers-panel-error-detail' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'shows network error message', () => {
+			const error = { message: 'Network request error', code: null, source: 'network' };
+			render( <AnswersPanel status="error" text="" citations={ [] } error={ error } /> );
+			expect( screen.getByText( 'Network request error' ) ).toBeInTheDocument();
+		} );
+
+		it( 'shows API error message', () => {
+			const error = {
+				message: 'An error occurred while processing the request. Please try again later.',
+				code: -32000,
+				source: 'api',
+			};
+			render( <AnswersPanel status="error" text="" citations={ [] } error={ error } /> );
+			expect(
+				screen.getByText( /An error occurred while processing the request/ )
+			).toBeInTheDocument();
+		} );
+
+		it( 'shows "Error code: X" when code is present', () => {
+			const error = { message: 'Request failed', code: -32000, source: 'api' };
+			render( <AnswersPanel status="error" text="" citations={ [] } error={ error } /> );
+			expect( screen.getByText( /Error code: -32000/ ) ).toBeInTheDocument();
+		} );
+
+		it( 'omits error code line when code is null', () => {
+			const error = { message: 'Network request error', code: null, source: 'network' };
+			render( <AnswersPanel status="error" text="" citations={ [] } error={ error } /> );
+			expect( screen.queryByText( /Error code:/ ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'shows HTTP friendly name as message', () => {
+			const error = { message: 'Service Unavailable', code: 503, source: 'http' };
+			render( <AnswersPanel status="error" text="" citations={ [] } error={ error } /> );
+			expect( screen.getByText( /Service Unavailable/ ) ).toBeInTheDocument();
+			expect( screen.getByText( /Error code: 503/ ) ).toBeInTheDocument();
+		} );
+
+		it( 'still shows the AI answer heading in error state', () => {
+			render( <AnswersPanel status="error" text="" citations={ [] } /> );
+			expect( screen.getByText( 'AI answer' ) ).toBeInTheDocument();
+		} );
+	} );
 } );