[AI Assistance] Specific suggestion for Styling Agent

Based on the styling rule provide more specific suggestions.

Bug: 395828191
Change-Id: I22469767c178ad5162510536736bba18de708499
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6430027
Commit-Queue: Nikolay Vitkov <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

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

@@ -28,10 +28,6 @@ function mockConversationContext(): AiAssistance.ConversationContext<unknown> {
     override getTitle(): string {
       return 'title';
     }
-
-    override getSuggestions(): undefined {
-      return;
-    }
   })();
 }
 
@@ -375,10 +371,6 @@ describeWithEnvironment('AiAgent', () => {
         override getItem(): undefined {
           return undefined;
         }
-
-        override getSuggestions(): undefined {
-          return;
-        }
       }
       return new TestContext();
     }

front_end/models/ai_assistance/agents/AiAgent.ts

@@ -157,7 +157,7 @@ export abstract class ConversationContext<T> {
     return;
   }
 
-  getSuggestions(): [string, ...string[]]|undefined {
+  async getSuggestions(): Promise<[string, ...string[]]|undefined> {
     return;
   }
 }

front_end/models/ai_assistance/agents/PerformanceInsightsAgent.ts

@@ -116,7 +116,7 @@ export class InsightContext extends ConversationContext<TimelineUtils.InsightAIC
    * Presents the default suggestions that are shown when the user first clicks
    * "Ask AI" on an Insight.
    */
-  override getSuggestions(): [string, ...string[]] {
+  override async getSuggestions(): Promise<[string, ...string[]]> {
     switch (this.#insight.insight.insightKey) {
       case 'CLSCulprits':
         return [

front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -254,6 +254,52 @@ export class NodeContext extends ConversationContext<SDK.DOMModel.DOMNode> {
         ElementsPanel.DOMLinkifier.linkifyNodeReference(this.#node, {hiddenClassList}),
     );
   }
+
+  override async getSuggestions(): Promise<[string, ...string[]]|undefined> {
+    const layoutProps = await this.#node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.#node.id);
+
+    if (!layoutProps) {
+      return;
+    }
+
+    if (layoutProps.isFlex) {
+      return [
+        'How can I make flex items wrap?',
+        'How do I distribute flex items evenly?',
+        'What is flexbox?',
+      ];
+    }
+    if (layoutProps.isSubgrid) {
+      return [
+        'Where is this grid defined?',
+        'How to overwrite parent grid properties?',
+        'How do subgrids work? ',
+      ];
+    }
+    if (layoutProps.isGrid) {
+      return [
+        'How do I align items in a grid?',
+        'How to add spacing between grid items?',
+        'How does grid layout work?',
+      ];
+    }
+    if (layoutProps.hasScroll) {
+      return [
+        'How do I remove scrollbars for this element?',
+        'How can I style a scrollbar?',
+        'Why does this element scroll?',
+      ];
+    }
+    if (layoutProps.isContainer) {
+      return [
+        'What are container queries?',
+        'How do I use container-type?',
+        'What\'s the container context for this element?',
+      ];
+    }
+
+    return;
+  }
 }
 
 /**

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -217,6 +217,8 @@ describeWithMockConnection('AI Assistance Panel', () => {
           const node = sinon.createStubInstance(SDK.DOMModel.DOMNode, {
             nodeType: Node.ELEMENT_NODE,
           });
+          sinon.stub(AiAssistanceModel.NodeContext.prototype, 'getSuggestions')
+              .returns(Promise.resolve(['test suggestion']));
           return new AiAssistanceModel.NodeContext(node);
         },
         action: 'freestyler.elements-floating-button',
@@ -240,7 +242,8 @@ describeWithMockConnection('AI Assistance Panel', () => {
         createContext: () => {
           const context = new AiAssistanceModel.InsightContext(
               sinon.createStubInstance(TimelineUtils.InsightAIContext.ActiveInsight));
-          sinon.stub(AiAssistanceModel.InsightContext.prototype, 'getSuggestions').returns(['test suggestion']);
+          sinon.stub(AiAssistanceModel.InsightContext.prototype, 'getSuggestions')
+              .returns(Promise.resolve(['test suggestion']));
           return context;
         },
         action: 'drjones.performance-insight-context'

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -205,11 +205,11 @@ function selectedElementFilter(maybeNode: SDK.DOMModel.DOMNode|null): SDK.DOMMod
   return null;
 }
 
-function getEmptyStateSuggestions(
+async function getEmptyStateSuggestions(
     context: AiAssistanceModel.ConversationContext<unknown>|null,
-    conversationType?: AiAssistanceModel.ConversationType): string[] {
+    conversationType?: AiAssistanceModel.ConversationType): Promise<string[]> {
   if (context) {
-    const specialSuggestions = context.getSuggestions();
+    const specialSuggestions = await context.getSuggestions();
 
     if (specialSuggestions) {
       return specialSuggestions;
@@ -821,6 +821,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   override async performUpdate(): Promise<void> {
+    const emptyStateSuggestions = await getEmptyStateSuggestions(this.#selectedContext, this.#conversation?.type);
+
     this.view(
         {
           state: this.#getChatUiState(),
@@ -840,7 +842,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           imageInput: this.#imageInput,
           isDeleteHistoryButtonVisible: Boolean(this.#conversation && !this.#conversation.isEmpty),
           isTextInputDisabled: this.#isTextInputDisabled(),
-          emptyStateSuggestions: getEmptyStateSuggestions(this.#selectedContext, this.#conversation?.type),
+          emptyStateSuggestions,
           inputPlaceholder: this.#getChatInputPlaceholder(),
           disclaimerText: this.#getDisclaimerText(),
           isTextInputEmpty: this.#isTextInputEmpty,