DrJones/Perf: Strip links in markdown response

Bug:377601855
Change-Id: Id3298cdc285135b032956a4a56d708b144f5c015
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5997916
Auto-Submit: Paul Irish <[email protected]>
Reviewed-by: Adam Raine <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Commit-Queue: Adam Raine <[email protected]>

Author: paulirish

front_end/panels/freestyler/FreestylerPanel.ts

@@ -219,6 +219,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       },
       selectedContext: null,
       blockedByCrossOrigin: false,
+      stripLinks: false,
       isReadOnly: false,
     };
   }
@@ -520,7 +521,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
     if (context instanceof CallTreeContext) {
-      const trace = new SDK.TraceObject.RevealableEvent(event);
+      const trace = new SDK.TraceObject.RevealableEvent(context.getItem().selectedNode.event);
       return Common.Revealer.reveal(trace);
     }
     // Node picker is using linkifier.
@@ -687,6 +688,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#viewProps.isReadOnly = this.#currentAgent.isHistoryEntry;
     this.#viewProps.requiresNewConversation = this.#currentAgent.type === AgentType.DRJONES_PERFORMANCE &&
         Boolean(this.#currentAgent.context) && this.#currentAgent.context !== currentContext;
+    this.#viewProps.stripLinks = this.#viewProps.agentType === AgentType.DRJONES_PERFORMANCE;
     this.doUpdate();
   }
 

front_end/panels/freestyler/components/FreestylerChatUi.test.ts

@@ -35,6 +35,70 @@ css
 }`,
       }));
     });
+
+    describe('link/image stripping', () => {
+      const linkCases = [
+        '[link text](https://z.com)',
+        'A response with [link text](https://z.com).',
+        '[*link text*](https://z.com)',
+        '[**text** `with code`](https://z.com).',
+        'plain link https://z.com .',
+        'link in quotes \'https://z.com\' .',
+      ];
+
+      const renderToElem = (string: string, renderer: MarkdownView.MarkdownView.MarkdownLitRenderer): Element => {
+        const component = new MarkdownView.MarkdownView.MarkdownView();
+        renderElementIntoDOM(component, {allowMultipleChildren: true});
+        component.data = {tokens: Marked.Marked.lexer(string), renderer};
+        assert.exists(component.shadowRoot?.firstElementChild);
+        return component.shadowRoot.firstElementChild;
+      };
+
+      it('strips links if stripLinks true', () => {
+        const linklessRenderer = new MarkdownRendererWithCodeBlock({stripLinks: true});
+        for (const linkCase of linkCases) {
+          const elem = renderToElem(linkCase, linklessRenderer);
+          assert.strictEqual(elem.querySelectorAll('a, x-link, devtools-link').length, 0);
+          assert.strictEqual(
+              ['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)), false);
+          assert.ok(elem.textContent?.includes('( https://z.com )'), linkCase);
+        }
+      });
+
+      it('leaves links intact by default', () => {
+        const linkfulRenderer = new MarkdownRendererWithCodeBlock();
+        for (const linkCase of linkCases) {
+          const elem = renderToElem(linkCase, linkfulRenderer);
+          assert.strictEqual(elem.querySelectorAll('a, x-link, devtools-link').length, 1);
+          assert.strictEqual(
+              ['<a', '<x-link', '<devtools-link'].some(tagName => elem.outerHTML.includes(tagName)), true);
+          assert.strictEqual(elem.textContent?.includes('( https://z.com )'), false);
+        }
+      });
+
+      const imageCases = [
+        '![image alt](https://z.com/i.png)',
+        'A response with ![image alt](https://z.com/i.png).',
+        '![*image alt*](https://z.com/i.png)',
+        '![**text** `with code`](https://z.com/i.png).',
+        'plain image href https://z.com/i.png .',
+        'link in quotes \'https://z.com/i.png\' .',
+      ];
+
+      it('strips images if stripLinks true', () => {
+        const linklessRenderer = new MarkdownRendererWithCodeBlock({stripLinks: true});
+        for (const imageCase of imageCases) {
+          const elem = renderToElem(imageCase, linklessRenderer);
+          assert.strictEqual(elem.querySelectorAll('a, x-link, devtools-link, img, devtools-markdown-image').length, 0);
+          assert.strictEqual(
+              ['<a', '<x-link', '<devtools-link', '<img', '<devtools-markdown-image'].some(
+                  tagName => elem.outerHTML.includes(tagName)),
+              false);
+
+          assert.ok(elem.textContent?.includes('( https://z.com/i.png )'), imageCase);
+        }
+      });
+    });
   });
 
   function getProp(options: Partial<Freestyler.Props>): Freestyler.Props {
@@ -57,6 +121,7 @@ css
       canShowFeedbackForm: false,
       userInfo: {},
       blockedByCrossOrigin: false,
+      stripLinks: false,
       isReadOnly: false,
       ...options,
     };

front_end/panels/freestyler/components/FreestylerChatUi.ts

@@ -281,6 +281,7 @@ export interface Props {
   isReadOnly: boolean;
   blockedByCrossOrigin: boolean;
   requiresNewConversation?: boolean;
+  stripLinks: boolean;
 }
 
 // The model returns multiline code blocks in an erroneous way with the language being in new line.
@@ -294,6 +295,11 @@ export interface Props {
 // }
 // ```
 class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  #stripLinks: boolean = false;
+  constructor(opts: {stripLinks?: boolean} = {}) {
+    super();
+    this.#stripLinks = Boolean(opts.stripLinks);
+  }
   override templateForToken(token: Marked.Marked.MarkedToken): LitHtml.TemplateResult|null {
     if (token.type === 'code') {
       const lines = (token.text as string).split('\n');
@@ -303,13 +309,34 @@ class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownIn
       }
     }
 
+    // Potentially remove links from the rendered result
+    if (this.#stripLinks && (token.type === 'link' || token.type === 'image')) {
+      // Insert an extra text node at the end after any link text. Show the link as plaintext (surrounded by parentheses)
+      const urlText = ` ( ${token.href} )`;
+      // Images would be turned into as links (but we'll skip that) https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/markdown_view/MarkdownView.ts;l=286-291;drc=d2cc89e48c913666655542d818ad0a09d25d0d08
+      const childTokens = token.type === 'image' ? undefined : [
+        ...token.tokens,
+        {type: 'text', text: urlText, raw: urlText},
+      ];
+
+      token = {
+        ...token,
+        // Marked doesn't read .text or .raw of a link, but we'll update anyway
+        // https://github.com/markedjs/marked/blob/035af38ab1e5aae95ece213dcc9a9c6d79cff46f/src/Renderer.ts#L178-L191
+        text: `${token.text}${urlText}`,
+        raw: `${token.text}${urlText}`,
+        type: 'text',
+        tokens: childTokens,
+      };
+    }
+
     return super.templateForToken(token);
   }
 }
 
 export class FreestylerChatUi extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #markdownRenderer = new MarkdownRendererWithCodeBlock();
+  #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
   #props: Props;
 
@@ -319,6 +346,7 @@ export class FreestylerChatUi extends HTMLElement {
   }
 
   set props(props: Props) {
+    this.#markdownRenderer = new MarkdownRendererWithCodeBlock({stripLinks: props.stripLinks});
     this.#props = props;
     this.#render();
   }

front_end/ui/components/docs/freestyler/basic.ts

@@ -56,6 +56,7 @@ const component = new Freestyler.FreestylerChatUi({
   userInfo: {},
   blockedByCrossOrigin: false,
   isReadOnly: false,
+  stripLinks: false,
 });
 
 document.getElementById('container')?.appendChild(component);

front_end/ui/components/docs/freestyler/empty_state.ts

@@ -31,6 +31,7 @@ const component = new Freestyler.FreestylerChatUi({
   userInfo: {},
   blockedByCrossOrigin: false,
   isReadOnly: false,
+  stripLinks: false,
 });
 
 document.getElementById('container')?.appendChild(component);