feat(docs): surface backend error frames in docs ask widget

Author: AztecBot

docs/src/components/AztecDocsWidget/Message.jsx

@@ -33,6 +33,7 @@ export function AssistantBody({
   text,
   sources,
   thinking,
+  error,
   tokens,
   mdComponents,
   feedback,
@@ -144,6 +145,26 @@ export function AssistantBody({
             </ReactMarkdown>
           ) : null}
         </div>
+        {error && (
+          <div
+            role="alert"
+            style={{
+              marginTop: text ? 10 : 0,
+              padding: "8px 10px",
+              border: `1px solid var(--azw-vermillion, ${accentColor})`,
+              background: isInk
+                ? "rgba(217, 74, 58, 0.12)"
+                : "rgba(217, 74, 58, 0.08)",
+              color: "var(--azw-vermillion, #d94a3a)",
+              fontFamily: "var(--azw-font-sans)",
+              fontSize: 12.5,
+              lineHeight: 1.45,
+              letterSpacing: "-0.01em",
+            }}
+          >
+            {error}
+          </div>
+        )}
         {sources?.length > 0 && (
           <div style={{ marginTop: 10 }}>
             <div

docs/src/components/AztecDocsWidget/Panel.jsx

@@ -228,16 +228,18 @@ export default function Panel({
                 const text = isLast && streaming ? streamText : m.response;
                 const sources = isLast && streaming ? streamSources : m.sources;
                 const isStreamingLast = isLast && streaming;
+                const error = isStreamingLast ? null : m.error;
                 const showFeedback =
                   !isStreamingLast && !!m.response && !!conversationId;
                 return (
                   <React.Fragment key={i}>
                     <UserBubble text={m.prompt} tokens={tokens} />
-                    {(text || isStreamingLast) && (
+                    {(text || isStreamingLast || error) && (
                       <AssistantBody
                         text={text}
                         sources={sources}
                         thinking={isStreamingLast}
+                        error={error}
                         tokens={tokens}
                         mdComponents={mdComponents}
                         showFeedback={showFeedback}

docs/src/components/AztecDocsWidget/index.jsx

@@ -73,6 +73,7 @@ export default function AztecDocsWidget({
 
     let acc = "";
     let sources = [];
+    let errorMessage = null;
     try {
       await streamAnswer({
         apiHost,
@@ -90,18 +91,27 @@ export default function AztecDocsWidget({
           setStreamSources(sources);
         },
         onConversationId: (id) => setConversationId(id),
+        onError: (message) => {
+          errorMessage = message;
+        },
         onDone: () => {},
       });
     } catch (err) {
       if (err.name !== "AbortError") {
-        acc =
-          acc || "Something went wrong fetching an answer. Please try again.";
+        errorMessage =
+          errorMessage ||
+          "Something went wrong fetching an answer. Please try again.";
       }
     }
 
     setMessages((prev) => {
       const copy = [...prev];
-      copy[copy.length - 1] = { prompt: question, response: acc, sources };
+      copy[copy.length - 1] = {
+        prompt: question,
+        response: acc,
+        sources,
+        error: errorMessage,
+      };
       return copy;
     });
     setStreaming(false);

docs/src/components/AztecDocsWidget/streamAnswer.js

@@ -7,6 +7,7 @@ export async function streamAnswer({
   onToken,
   onSource,
   onConversationId,
+  onError,
   onDone,
   signal,
 }) {
@@ -56,6 +57,14 @@ export async function streamAnswer({
         onSource(sources);
       } else if (parsed.type === "id" && parsed.id) {
         onConversationId(parsed.id);
+      } else if (parsed.type === "error") {
+        const message =
+          typeof parsed.error === "string" && parsed.error.trim()
+            ? parsed.error
+            : "Something went wrong generating an answer.";
+        onError?.(message);
+        onDone();
+        return;
       } else if (parsed.type === "end") {
         onDone();
         return;