AI: make walkthrough CTA differ based on widgets

Fixed: 490348776
Change-Id: Idb36632c66ea633afdf76d130456239c4f1fdb11
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7642854
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Kateryna Prokopenko <kprokopenko@chromium.org>

Author: jackfranklin

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

@@ -4,6 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
+import type * as AIAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import {assertScreenshot, querySelectorErrorOnMissing, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {
   describeWithEnvironment,
@@ -291,6 +292,58 @@ describeWithEnvironment('ChatMessage', () => {
       assert.isNull(target.querySelector('[data-show-walkthrough]'));
     });
 
+    it('makes the walkthrough button "Show thinking" if there are no widgets', async () => {
+      const messageNoWidgets: AiAssistance.ChatMessage.ModelChatMessage = {
+        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
+        parts: [{
+          type: 'step',
+          step: {
+            isLoading: false,
+            title: 'Investigating XYZ',
+            code: 'console.log("test")',
+          },
+        }],
+        rpcId: 99,
+      };
+      const target = renderView({
+        isLoading: false,
+        message: messageNoWidgets,
+        walkthrough: {
+          ...DEFAULT_WALKTHROUGH,
+          isInlined: false,
+        }
+      });
+      const button = querySelectorErrorOnMissing(target, '[data-show-walkthrough]');
+      assert.strictEqual(button.innerText, 'Show thinking');
+    });
+
+    it('makes the walkthrough button "Show agent walkthrough" if there are widgets', async () => {
+      const messageWithWidget: AiAssistance.ChatMessage.ModelChatMessage = {
+        entity: AiAssistance.ChatMessage.ChatMessageEntity.MODEL,
+        parts: [{
+          type: 'step',
+          step: {
+            isLoading: false,
+            title: 'Investigating XYZ',
+            code: 'console.log("test")',
+            // Don't need a proper widget for this test
+            widgets: [{} as AIAssistanceModel.AiAgent.ComputedStyleAiWidget],
+          },
+        }],
+        rpcId: 99,
+      };
+      const target = renderView({
+        isLoading: false,
+        message: messageWithWidget,
+        walkthrough: {
+          ...DEFAULT_WALKTHROUGH,
+          isInlined: false,
+        }
+      });
+      const button = querySelectorErrorOnMissing(target, '[data-show-walkthrough]');
+      assert.strictEqual(button.innerText, 'Show agent walkthrough');
+    });
+
     it('renders inline walkthrough when inline', () => {
       const target = renderView({
         message: stepMessage,

front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -485,14 +485,18 @@ function renderStepDetails({
 
 function renderWalkthroughSidebarButton(
     input: ChatMessageViewInput,
-    lastStep: Step,
+    steps: Step[],
     ): Lit.LitTemplate {
   const {message, walkthrough} = input;
-  if (walkthrough.isInlined) {
+  const lastStep = steps.at(-1);
+  if (walkthrough.isInlined || !lastStep) {
     return Lit.nothing;
   }
+
+  const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
   const title = walkthroughTitle({
     isLoading: input.isLoading,
+    hasWidgets: hasOneStepWithWidget,
     lastStep,
   });
 
@@ -537,7 +541,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
   const openWalkThroughSidebarButton =
-      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, lastStep) : Lit.nothing;
+      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, steps) : Lit.nothing;
 
   // If there are side-effect steps, and the walkthrough is not open, we render
   // those inline so that the user can see them and approve them.

front_end/panels/ai_assistance/components/WalkthroughView.ts

@@ -27,9 +27,13 @@ const UIStrings = {
    */
   title: 'Investigation steps',
   /**
-   * @description Title for the button that shows the thinking process (walkthrough).
+   * @description Title for the button that shows the walkthrough when there are no widgets in the walkthrough.
    */
   showThinking: 'Show thinking',
+  /**
+   * @description Title for the button that shows the walkthrough when there are widgets in the walkthrough.
+   */
+  showAgentWalkthrough: 'Show agent walkthrough',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -46,10 +50,16 @@ export interface ViewInput {
 
 export function walkthroughTitle(input: {
   isLoading: boolean,
+  hasWidgets: boolean,
   lastStep: Step,
 }): string {
-  const title = input.isLoading ? titleForStep(input.lastStep) : lockedString(UIStrings.showThinking);
-  return title;
+  if (input.isLoading) {
+    return titleForStep(input.lastStep);
+  }
+  if (input.hasWidgets) {
+    return lockedString(UIStrings.showAgentWalkthrough);
+  }
+  return lockedString(UIStrings.showThinking);
 }
 
 function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
@@ -62,12 +72,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     input.onToggle((event.target as HTMLDetailsElement).open);
   }
 
+  const hasWidgets = steps.some(s => s.widgets?.length);
+
   // clang-format off
   return html`
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary>
         ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
-        ${walkthroughTitle({isLoading: input.isLoading, lastStep,})}
+        ${walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
         <devtools-icon name="chevron-down"></devtools-icon>
       </summary>
       ${stepsOutput}