[Console Insights] Render 'related content' section containing

references

This CL adds a section containing references to related content to
console insights answers.

This section is only being rendered if AIDA's response contains
`factualityMetadata`, which is only the case when AIDA uses Search
RAG. Currently Search RAG needs to be enabled via command line, so
this change has no effect on non-testers of Search RAG.

Screenshot: https://i.imgur.com/zzCzjL7.png

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

Author: wolfib

front_end/core/host/AidaClient.test.ts

@@ -293,7 +293,7 @@ describeWithEnvironment('AidaClient', () => {
           const response = JSON.stringify([
             {
               textChunk: {text: 'Chunk1\n'},
-              metadata: {rpcGlobalId: 123, attributionMetadata: {attributionAction: 'NO_ACTION', citations: []}},
+              metadata: {rpcGlobalId: 123},
             },
             {
               textChunk: {text: 'Chunk2\n'},
@@ -319,13 +319,10 @@ describeWithEnvironment('AidaClient', () => {
             'Chunk2\n',
         metadata: {
           rpcGlobalId: 123,
-          attributionMetadata: [
-            {attributionAction: Host.AidaClient.RecitationAction.NO_ACTION, citations: []},
-            {
-              attributionAction: Host.AidaClient.RecitationAction.CITE,
-              citations: [{startIndex: 0, endIndex: 1, url: 'https://example.com'}],
-            },
-          ],
+          attributionMetadata: {
+            attributionAction: Host.AidaClient.RecitationAction.CITE,
+            citations: [{startIndex: 0, endIndex: 1, url: 'https://example.com'}],
+          },
         },
         completed: false,
       },
@@ -334,13 +331,10 @@ describeWithEnvironment('AidaClient', () => {
             'Chunk2\n',
         metadata: {
           rpcGlobalId: 123,
-          attributionMetadata: [
-            {attributionAction: Host.AidaClient.RecitationAction.NO_ACTION, citations: []},
-            {
-              attributionAction: Host.AidaClient.RecitationAction.CITE,
-              citations: [{startIndex: 0, endIndex: 1, url: 'https://example.com'}],
-            },
-          ],
+          attributionMetadata: {
+            attributionAction: Host.AidaClient.RecitationAction.CITE,
+            citations: [{startIndex: 0, endIndex: 1, url: 'https://example.com'}],
+          },
         },
         functionCalls: undefined,
         completed: true,

front_end/core/host/AidaClient.ts

@@ -208,9 +208,18 @@ export interface AidaFunctionCallResponse {
   args: Record<string, unknown>;
 }
 
+export interface FactualityFact {
+  sourceUri?: string;
+}
+
+export interface FactualityMetadata {
+  facts: FactualityFact[];
+}
+
 export interface AidaResponseMetadata {
   rpcGlobalId?: RpcGlobalId;
-  attributionMetadata?: AttributionMetadata[];
+  attributionMetadata?: AttributionMetadata;
+  factualityMetadata?: FactualityMetadata;
 }
 
 export interface AidaResponse {
@@ -326,7 +335,7 @@ export class AidaClient {
     const text = [];
     let inCodeChunk = false;
     const functionCalls: AidaFunctionCallResponse[] = [];
-    const metadata: AidaResponseMetadata = {rpcGlobalId: 0};
+    let metadata: AidaResponseMetadata = {rpcGlobalId: 0};
     while ((chunk = await stream.read())) {
       let textUpdated = false;
       // The AIDA response is a JSON array of objects, split at the object
@@ -355,15 +364,9 @@ export class AidaClient {
 
       for (const result of results) {
         if ('metadata' in result) {
-          metadata.rpcGlobalId = result.metadata.rpcGlobalId;
-          if ('attributionMetadata' in result.metadata) {
-            if (!metadata.attributionMetadata) {
-              metadata.attributionMetadata = [];
-            }
-            metadata.attributionMetadata.push(result.metadata.attributionMetadata);
-            if (result.metadata.attributionMetadata.attributionAction === RecitationAction.BLOCK) {
-              throw new AidaBlockError();
-            }
+          metadata = result.metadata;
+          if (metadata?.attributionMetadata?.attributionAction === RecitationAction.BLOCK) {
+            throw new AidaBlockError();
           }
         }
         if ('textChunk' in result) {

front_end/panels/ai_assistance/agents/StylingAgent.test.ts

@@ -1014,10 +1014,10 @@ STOP`,
           explanation: 'ANSWER: this is the answer',
           metadata: {
             rpcGlobalId: 123,
-            attributionMetadata: [{
+            attributionMetadata: {
               attributionAction: Host.AidaClient.RecitationAction.ACTION_UNSPECIFIED,
               citations: [],
-            }],
+            },
           },
           completed: true,
         };

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

@@ -235,4 +235,40 @@ describeWithEnvironment('ConsoleInsight', () => {
     const content = component.shadowRoot!.querySelector('main')!.innerText.trim();
     assert.strictEqual(content, 'Check your internet connection and try again.');
   });
+
+  it('displays factuality metadata as related content', async () => {
+    function getAidaClientWithMetadata() {
+      return {
+        async *
+            fetch() {
+              yield {
+                explanation: 'test',
+                metadata: {
+                  rpcGlobalId: 0,
+                  factualityMetadata: {
+                    facts: [
+                      {sourceUri: 'https://www.firstSource.test/someInfo'},
+                      {sourceUri: 'https://www.anotherSource.test/page'},
+                    ],
+                  },
+                },
+                completed: true,
+              };
+            },
+        registerClientEvent: sinon.spy(),
+      };
+    }
+
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getAidaClientWithMetadata(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    const details = component.shadowRoot!.querySelector('details');
+    assert.strictEqual(details!.querySelector('summary')!.textContent?.trim(), 'Sources and related content');
+    const xLinks = details!.querySelectorAll('x-link');
+    assert.strictEqual(xLinks[0].textContent?.trim(), 'https://www.firstSource.test/someInfo');
+    assert.strictEqual(xLinks[0].getAttribute('href'), 'https://www.firstSource.test/someInfo');
+    assert.strictEqual(xLinks[1].textContent?.trim(), 'https://www.anotherSource.test/page');
+    assert.strictEqual(xLinks[1].getAttribute('href'), 'https://www.anotherSource.test/page');
+  });
 });

front_end/panels/explain/components/ConsoleInsight.ts

@@ -131,6 +131,10 @@ const UIStrings = {
    * @description Text for a link to Chrome DevTools Settings.
    */
   settingsLink: '`Console insights` in Settings',
+  /**
+   * @description The title of the list of references/recitations that were used to generate the insight.
+   */
+  references: 'Sources and related content',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/explain/components/ConsoleInsight.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -563,6 +567,34 @@ export class ConsoleInsight extends HTMLElement {
     // clang-format on
   }
 
+  #maybeRenderRelatedContent(): LitHtml.LitTemplate {
+    if (this.#state.type !== State.INSIGHT || !this.#state.metadata.factualityMetadata?.facts.length) {
+      return LitHtml.nothing;
+    }
+    // clang-format off
+    return html`
+      <details jslog=${VisualLogging.expand('references').track({click: true})}>
+        <summary>${i18nString(UIStrings.references)}</summary>
+        <ul>
+          ${this.#state.metadata?.factualityMetadata?.facts.map(fact => {
+            return fact.sourceUri ? html`
+              <li>
+                <x-link
+                  href=${fact.sourceUri}
+                  class="link"
+                  jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+                >
+                  ${fact.sourceUri}
+                </x-link>
+              </li>
+            ` : LitHtml.nothing;
+          })}
+        </ul>
+      </details>
+    `;
+    // clang-format on
+  }
+
   #renderMain(): LitHtml.TemplateResult {
     const jslog = `${VisualLogging.section(this.#state.type).track({resize: true})}`;
     // clang-format off
@@ -587,6 +619,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.#maybeRenderRelatedContent()}
           <details jslog=${VisualLogging.expand('sources').track({click: true})}>
             <summary>${i18nString(UIStrings.inputData)}</summary>
             <devtools-console-insight-sources-list .sources=${this.#state.sources} .isPageReloadRecommended=${this.#state.isPageReloadRecommended}>

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2733,6 +2733,8 @@ export const knownContextValues = new Set([
   'redirect-source-request-url',
   'reduce',
   'reduced-contrast',
+  'references',
+  'references.console-insights',
   'refresh',
   'refresh-caches',
   'refresh-database',