[Console Insights] Handle timeout of the doConversation API

Show informative message to the user when the doConversation API times
out.

Screencast: https://i.imgur.com/UUbBuf1.mp4 (with artificially short
timeout of 2s)

Bug: 385122375
Change-Id: I9a51fe3d63f0018bbe0a102e65c0516551dd20c5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6197942
Auto-Submit: Wolfgang Beyer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: wolfib

front_end/core/host/AidaClient.test.ts

@@ -412,6 +412,19 @@ describeWithEnvironment('AidaClient', () => {
     }
   });
 
+  it('throws a timeout error on timeout', async () => {
+    sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'doAidaConversation').callsArgWith(2, {
+      netErrorName: 'net::ERR_TIMED_OUT'
+    });
+    const provider = new Host.AidaClient.AidaClient();
+    try {
+      await getAllResults(provider);
+      expect.fail('provider.fetch did not throw');
+    } catch (err) {
+      expect(err.message).equals('doAidaConversation timed out');
+    }
+  });
+
   it('throws an error for other codes', async () => {
     sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'doAidaConversation').callsArgWith(2, {
       statusCode: 418,

front_end/core/host/AidaClient.ts

@@ -337,6 +337,8 @@ export class AidaClient {
         stream.fail(new Error('Server responded: permission denied'));
       } else if (result.error) {
         stream.fail(new Error(`Cannot send request: ${result.error} ${result.detail || ''}`));
+      } else if (result.netErrorName === 'net::ERR_TIMED_OUT') {
+        stream.fail(new Error('doAidaConversation timed out'));
       } else if (result.statusCode !== 200) {
         stream.fail(new Error(`Request failed: ${JSON.stringify(result)}`));
       } else {

front_end/panels/explain/components/ConsoleInsight.test.ts

@@ -162,6 +162,34 @@ describeWithEnvironment('ConsoleInsight', () => {
     assert(component.shadowRoot!.querySelector('.rating'));
   });
 
+  it('shows an error message on timeout', async () => {
+    function getAidaClientWithTimeout() {
+      return {
+        async *
+            fetch() {
+              yield {
+                explanation: 'test',
+                metadata: {
+                  rpcGlobalId: 0,
+                },
+                completed: true,
+              };
+              throw new Error('doAidaConversation timed out');
+            },
+        registerClientEvent: sinon.spy(),
+      };
+    }
+
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getAidaClientWithTimeout(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    assert.isNotNull(component.shadowRoot);
+    assert.strictEqual(
+        component.shadowRoot.querySelector('.error-message')?.textContent,
+        'Generating a response took too long. Please try again.');
+  });
+
   const reportsRating = (positive: boolean) => async () => {
     const stub = getGetHostConfigStub({});
     const actionTaken = sinon.stub(Host.userMetrics, 'actionTaken');

front_end/panels/explain/components/ConsoleInsight.ts

@@ -139,6 +139,10 @@ const UIStrings = {
    * @description Sub-heading for a list of links to URLs which are related to the AI-generated response.
    */
   relatedContent: 'Related content',
+  /**
+   * @description Error message shown when the request to get an AI response times out.
+   */
+  timedOut: 'Generating a response took too long. Please try again.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/explain/components/ConsoleInsight.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -200,6 +204,7 @@ type StateData = {
   completed: boolean,
   directCitationUrls: string[],
   highlightIndex?: number,
+  timedOut?: boolean,
 }&Host.AidaClient.AidaResponse|{
   type: State.ERROR,
   error: string,
@@ -564,10 +569,15 @@ export class ConsoleInsight extends HTMLElement {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightGenerated);
     } catch (err) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightErrored);
-      this.#transitionTo({
-        type: State.ERROR,
-        error: err.message,
-      });
+      if (err.message === 'doAidaConversation timed out' && this.#state.type === State.INSIGHT) {
+        this.#state.timedOut = true;
+        this.#transitionTo({...this.#state, completed: true, timedOut: true});
+      } else {
+        this.#transitionTo({
+          type: State.ERROR,
+          error: err.message,
+        });
+      }
     }
   }
 
@@ -763,6 +773,7 @@ export class ConsoleInsight extends HTMLElement {
               .data=${{tokens: this.#state.tokens, renderer: this.#renderer, animationEnabled: true} as MarkdownView.MarkdownView.MarkdownViewData}>
             </devtools-markdown-view>`: this.#state.explanation
           }
+          ${this.#state.timedOut ? html`<p class="error-message">${i18nString(UIStrings.timedOut)}</p>` : LitHtml.nothing}
           ${this.#isSearchRagResponse(this.#state.metadata) ? html`
             <details class="references" ${LitHtml.Directives.ref(this.#referenceDetailsRef)} @toggle=${this.#onToggleReferenceDetails} jslog=${VisualLogging.expand('references').track({click: true})}>
               <summary>${i18nString(UIStrings.references)}</summary>

front_end/panels/explain/components/consoleInsight.css

@@ -383,3 +383,7 @@ details h3 {
   color: var(--sys-color-on-surface-subtle);
   padding-left: var(--sys-size-6);
 }
+
+.error-message {
+  font: var(--sys-typescale-body4-bold);
+}