Sanitize suggestion chips for Ai Assistance

This truncates and adds basic sanitization of the suggestion chips.
We check if it is indeed an array of strings, and remove all
unnecessary extra whitespace.

We set the max length of a chip to be 200 characters, as chips
are suggestions that shouldn't be too long anyway. And we now also
respect the max length of the input text area to avoid users not
seeing what they insert via clicking on a chip.

Bug: 513747800
Change-Id: Ib0edcf30981d8446d0a691853308160740d0436c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7864200
Reviewed-by: Alina Varkki <alinavarkki@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>

Author: ktran

front_end/models/ai_assistance/agents/AiAgent.test.ts

@@ -551,4 +551,88 @@ describeWithEnvironment('AiAgent', () => {
       });
     });
   });
+
+  describe('parseTextResponseForSuggestions', () => {
+    it('should parse valid suggestions', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const parsed = agent.parseTextResponseForSuggestions('SUGGESTIONS: ["how to fix", "why it fails"]');
+      assert.deepEqual(parsed.suggestions, ['how to fix', 'why it fails']);
+    });
+
+    it('should filter out non-string suggestions', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const parsed = agent.parseTextResponseForSuggestions('SUGGESTIONS: ["valid", 123, null, {"key": "val"}]');
+      assert.deepEqual(parsed.suggestions, ['valid']);
+    });
+
+    it('should truncate long suggestions', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const longSuggestion = 'a'.repeat(300);
+      const parsed = agent.parseTextResponseForSuggestions(`SUGGESTIONS: ["${longSuggestion}"]`);
+      assert.isDefined(parsed.suggestions);
+      assert.lengthOf(parsed.suggestions![0], 200);
+      assert.strictEqual(parsed.suggestions![0], 'a'.repeat(200));
+    });
+
+    it('should sanitize whitespace and newlines in suggestions', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const parsed = agent.parseTextResponseForSuggestions(
+          'SUGGESTIONS: ["line1\\nline2", "word1\\r\\nword2", "excessive   spaces"]');
+      assert.deepEqual(parsed.suggestions, ['line1 line2', 'word1 word2', 'excessive spaces']);
+    });
+
+    it('should reject non-array suggestions', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const parsed = agent.parseTextResponseForSuggestions('SUGGESTIONS: "not an array"');
+      assert.isUndefined(parsed.suggestions);
+    });
+
+    it('should remove empty suggestions after sanitization', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const parsed = agent.parseTextResponseForSuggestions('SUGGESTIONS: ["", "   ", "\\n\\n"]');
+      assert.isUndefined(parsed.suggestions);
+    });
+
+    it('should parse suggestions from a multi-line response containing both answer and suggestions', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const responseText = [
+        'Here is the first line of the answer.',
+        'SUGGESTIONS: ["suggestion 1", "suggestion 2"]',
+        'Here is the second line of the answer.',
+      ].join('\n');
+      const parsed = agent.parseTextResponseForSuggestions(responseText);
+      assert.strictEqual(
+          parsed.answer, 'Here is the first line of the answer.\nHere is the second line of the answer.');
+      assert.deepEqual(parsed.suggestions, ['suggestion 1', 'suggestion 2']);
+    });
+
+    it('should handle multiple SUGGESTIONS lines by keeping the last valid one', () => {
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(),
+      });
+      const responseText = [
+        'Answer text.',
+        'SUGGESTIONS: ["first suggestion"]',
+        'More answer text.',
+        'SUGGESTIONS: ["second suggestion"]',
+      ].join('\n');
+      const parsed = agent.parseTextResponseForSuggestions(responseText);
+      assert.strictEqual(parsed.answer, 'Answer text.\nMore answer text.');
+      assert.deepEqual(parsed.suggestions, ['second suggestion']);
+    });
+  });
 });

front_end/models/ai_assistance/agents/AiAgent.ts

@@ -13,6 +13,8 @@ import type * as Trace from '../../trace/trace.js';
 import type * as Workspace from '../../workspace/workspace.js';
 import {debugLog, isStructuredLogEnabled} from '../debug.js';
 
+const MAX_SUGGESTION_LENGTH = 200;
+
 export const enum ResponseType {
   CONTEXT = 'context',
   TITLE = 'title',
@@ -575,8 +577,7 @@ export abstract class AiAgent<T> {
       const trimmed = line.trim();
       if (trimmed.startsWith('SUGGESTIONS:')) {
         try {
-          // TODO: Do basic validation this is an array with strings
-          suggestions = JSON.parse(trimmed.substring('SUGGESTIONS:'.length).trim());
+          suggestions = sanitizeSuggestions(trimmed.substring('SUGGESTIONS:'.length).trim());
         } catch {
         }
       } else {
@@ -589,8 +590,7 @@ export abstract class AiAgent<T> {
     if (!suggestions && answerLines.at(-1)?.includes('SUGGESTIONS:')) {
       const [answer, suggestionsText] = answerLines[answerLines.length - 1].split('SUGGESTIONS:', 2);
       try {
-        // TODO: Do basic validation this is an array with strings
-        suggestions = JSON.parse(suggestionsText.trim().substring('SUGGESTIONS:'.length).trim());
+        suggestions = sanitizeSuggestions(suggestionsText.trim());
       } catch {
       }
       answerLines[answerLines.length - 1] = answer;
@@ -997,3 +997,26 @@ export abstract class AiAgent<T> {
     };
   }
 }
+
+function sanitizeSuggestions(suggestions: string): [string, ...string[]]|undefined {
+  const parsed = JSON.parse(suggestions);
+  if (!Array.isArray(parsed)) {
+    return undefined;
+  }
+  const sanitized: string[] = [];
+  for (const item of parsed) {
+    if (typeof item !== 'string') {
+      continue;
+    }
+    // Collapse multiple whitespace/newlines into a single space.
+    const noExtraWhitespace = item.replace(/\s+/g, ' ').trim();
+    if (noExtraWhitespace.length === 0) {
+      continue;
+    }
+    sanitized.push(noExtraWhitespace.substring(0, MAX_SUGGESTION_LENGTH));
+  }
+  if (sanitized.length === 0) {
+    return undefined;
+  }
+  return sanitized as [string, ...string[]];
+}

front_end/panels/ai_assistance/components/ChatInput.test.ts

@@ -69,6 +69,17 @@ describeWithEnvironment('ChatInput', () => {
     assert.isTrue(view.input.isReadOnly);
   });
 
+  it('should truncate input value to maxlength in setInputValue', async () => {
+    const [view, component] = createComponent();
+    const mockTextArea = document.createElement('textarea');
+    mockTextArea.maxLength = 10;
+    assert.isDefined(view.input.textAreaRef);
+    (view.input.textAreaRef as {value: HTMLTextAreaElement}).value = mockTextArea;
+
+    component.setInputValue('a'.repeat(20));
+    assert.strictEqual(mockTextArea.value, 'a'.repeat(10));
+  });
+
   describe('multimodal input', () => {
     let target: SDK.Target.Target;
     let model: SDK.ScreenCaptureModel.ScreenCaptureModel;

front_end/panels/ai_assistance/components/ChatInput.ts

@@ -530,9 +530,11 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
 
   setInputValue(text: string): void {
     if (this.#textAreaRef.value) {
-      this.#textAreaRef.value.value = text;
+      const maxLength = this.#textAreaRef.value.maxLength;
+      const truncatedText = (maxLength >= 0) ? text.substring(0, maxLength) : text;
+      this.#textAreaRef.value.value = truncatedText;
       // Place the cursor at the end of the new value.
-      this.#textAreaRef.value.setSelectionRange(text.length, text.length);
+      this.#textAreaRef.value.setSelectionRange(truncatedText.length, truncatedText.length);
     }
     this.performUpdate();
   }