feat(agentStudio): error translations access raw errorMessage safely

Author: pipeline1987

packages/instantsearch-ui-components/src/components/chat/ChatMessageError.tsx

@@ -10,14 +10,20 @@ export type ChatMessageErrorTranslations = {
   /**
    * Error message text
    */
-  errorMessage: string;
+  errorMessage:
+    | string
+    | ((params: { errorMessage?: string }) => string);
   /**
    * Retry button text
    */
   retryText: string;
 };
 
 export type ChatMessageErrorProps = ComponentProps<'article'> & {
+  /**
+   * Raw error message received from the API/transport layer.
+   */
+  errorMessage?: string;
   /**
    * Callback for reload action
    */
@@ -39,17 +45,21 @@ export function createChatMessageErrorComponent({
 
   return function ChatMessageError(userProps: ChatMessageErrorProps) {
     const {
+      errorMessage,
       onReload,
       actions,
       translations: userTranslations,
       ...props
     } = userProps;
-    const translations: Required<ChatMessageErrorTranslations> = {
-      errorMessage:
-        'Sorry, we are not able to generate a response at the moment. Please retry or contact support.',
-      retryText: 'Retry',
-      ...userTranslations,
-    };
+    const defaultErrorMessage =
+      'Sorry, we are not able to generate a response at the moment. Please retry or contact support.';
+    const defaultRetryText = 'Retry';
+    const errorMessageTranslation = userTranslations?.errorMessage;
+    const resolvedErrorMessage =
+      typeof errorMessageTranslation === 'function'
+        ? errorMessageTranslation({ errorMessage })
+        : errorMessageTranslation || defaultErrorMessage;
+    const retryText = userTranslations?.retryText || defaultRetryText;
 
     return (
       <article
@@ -59,7 +69,7 @@ export function createChatMessageErrorComponent({
         <div className="ais-ChatMessage-container">
           <div className="ais-ChatMessage-content">
             <div className="ais-ChatMessage-message">
-              {translations.errorMessage}
+              {resolvedErrorMessage}
             </div>
             {(actions || onReload) && (
               <div className="ais-ChatMessage-actions">
@@ -82,7 +92,7 @@ export function createChatMessageErrorComponent({
                     onClick={() => onReload?.()}
                   >
                     <ReloadIcon createElement={createElement} />
-                    {translations.retryText}
+                    {retryText}
                   </Button>
                 )}
               </div>

packages/instantsearch-ui-components/src/components/chat/ChatMessages.tsx

@@ -519,11 +519,7 @@ export function createChatMessagesComponent({
             {status === 'error' && (
               <DefaultError
                 onReload={onReload}
-                translations={
-                  error?.message
-                    ? { errorMessage: error.message }
-                    : undefined
-                }
+                errorMessage={error?.message}
               />
             )}
           </div>

packages/instantsearch-ui-components/src/components/chat/__tests__/ChatMessages.test.tsx

@@ -5,12 +5,16 @@
 import { render, screen } from '@testing-library/preact';
 import { Fragment, createElement } from 'preact';
 
+import { createChatMessageErrorComponent } from '../ChatMessageError';
 import { createChatMessagesComponent } from '../ChatMessages';
 
+import type { ChatMessageErrorProps } from '../ChatMessageError';
+
 const ChatMessages = createChatMessagesComponent({
   createElement,
   Fragment,
 });
+const ChatMessageError = createChatMessageErrorComponent({ createElement });
 
 describe('ChatMessages', () => {
   test('renders with default props', () => {
@@ -256,7 +260,66 @@ describe('ChatMessages', () => {
     });
   });
 
-  test('shows API error message when status is error and error is set', () => {
+  test('does not expose raw API error message by default', () => {
+    render(
+      <ChatMessages
+        messages={[]}
+        indexUiState={{}}
+        setIndexUiState={jest.fn()}
+        tools={{}}
+        onReload={jest.fn()}
+        onClose={jest.fn()}
+        status="error"
+        error={new Error('Request blocked for this domain')}
+      />
+    );
+
+    expect(
+      screen.getByText(
+        'Sorry, we are not able to generate a response at the moment. Please retry or contact support.'
+      )
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('Request blocked for this domain')
+    ).not.toBeInTheDocument();
+  });
+
+  test('passes raw error message to custom error component', () => {
+    const ErrorComponent = jest.fn(() => <span>Custom error</span>);
+
+    render(
+      <ChatMessages
+        messages={[]}
+        indexUiState={{}}
+        setIndexUiState={jest.fn()}
+        tools={{}}
+        onReload={jest.fn()}
+        onClose={jest.fn()}
+        status="error"
+        error={new Error('Request blocked for this domain')}
+        errorComponent={ErrorComponent}
+      />
+    );
+
+    expect(ErrorComponent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        errorMessage: 'Request blocked for this domain',
+      }),
+      {}
+    );
+  });
+
+  test('allows error translation to use raw error message', () => {
+    const CustomError = (props: ChatMessageErrorProps) => (
+      <ChatMessageError
+        {...props}
+        translations={{
+          errorMessage: ({ errorMessage }) =>
+            errorMessage ? `Friendly: ${errorMessage}` : 'Friendly fallback',
+        }}
+      />
+    );
+
     render(
       <ChatMessages
         messages={[]}
@@ -267,11 +330,12 @@ describe('ChatMessages', () => {
         onClose={jest.fn()}
         status="error"
         error={new Error('Request blocked for this domain')}
+        errorComponent={CustomError}
       />
     );
 
     expect(
-      screen.getByText('Request blocked for this domain')
+      screen.getByText('Friendly: Request blocked for this domain')
     ).toBeInTheDocument();
   });
 

packages/instantsearch.js/src/lib/ai-lite/__tests__/utils.test.ts

@@ -4,6 +4,14 @@
 import { getMessageFromStreamErrorText } from '../utils';
 
 describe('getMessageFromStreamErrorText', () => {
+  function encodeAsNestedJson(value: unknown, depth: number): string {
+    let result = JSON.stringify(value);
+    for (let i = 0; i < depth; i++) {
+      result = JSON.stringify(result);
+    }
+    return result;
+  }
+
   it('unwraps double-encoded JSON with error field (Agent Studio / AI SDK style)', () => {
     const inner = {
       error: 'Max steps per completion limit was reached',
@@ -41,6 +49,17 @@ describe('getMessageFromStreamErrorText', () => {
     );
   });
 
+  it('unwraps deeply nested JSON strings without fixed depth limits', () => {
+    const errorText = encodeAsNestedJson(
+      { error: 'Deep nested error message' },
+      25
+    );
+
+    expect(getMessageFromStreamErrorText(errorText)).toBe(
+      'Deep nested error message'
+    );
+  });
+
   it('returns Unknown error for whitespace-only input', () => {
     expect(getMessageFromStreamErrorText('   ')).toBe('Unknown error');
   });

packages/instantsearch.js/src/lib/ai-lite/utils.ts

@@ -112,6 +112,34 @@ function messageFromErrorObject(o: Record<string, unknown>): string | undefined
   return undefined;
 }
 
+function unwrapNestedJsonString(
+  value: unknown,
+  seenStrings: ReadonlySet<string> = new Set()
+): unknown {
+  if (typeof value !== 'string') {
+    return value;
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return trimmed;
+  }
+
+  if (seenStrings.has(trimmed)) {
+    return trimmed;
+  }
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    if (typeof parsed === 'string') {
+      return unwrapNestedJsonString(parsed, new Set([...seenStrings, trimmed]));
+    }
+    return parsed;
+  } catch {
+    return trimmed;
+  }
+}
+
 /**
  * Turns chat stream `error` chunk `errorText` into a short user-facing string.
  * Handles plain text, single JSON objects (`error` / `message`), and
@@ -123,34 +151,16 @@ export function getMessageFromStreamErrorText(errorText: string): string {
     return 'Unknown error';
   }
 
-  let remaining: unknown = trimmed;
-  for (let depth = 0; depth < 5; depth++) {
-    if (typeof remaining === 'string') {
-      const s = remaining.trim();
-      if (!s) {
-        break;
-      }
-      try {
-        remaining = JSON.parse(s) as unknown;
-        continue;
-      } catch {
-        return s;
-      }
+  const remaining = unwrapNestedJsonString(trimmed);
+  if (remaining && typeof remaining === 'object' && !Array.isArray(remaining)) {
+    const o = remaining as Record<string, unknown>;
+    const msg = messageFromErrorObject(o);
+    if (msg) {
+      return msg;
     }
-
-    if (remaining && typeof remaining === 'object' && !Array.isArray(remaining)) {
-      const o = remaining as Record<string, unknown>;
-      const msg = messageFromErrorObject(o);
-      if (msg) {
-        return msg;
-      }
-      if (typeof o.type === 'string' && o.type.trim()) {
-        return o.type.trim();
-      }
-      break;
+    if (typeof o.type === 'string' && o.type.trim()) {
+      return o.type.trim();
     }
-
-    break;
   }
 
   if (typeof remaining === 'string') {