chrome-devtools-frontend 1.0.1589336 → 1.0.1590494

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -42,12 +42,18 @@ import {DisabledWidget} from './components/DisabledWidget.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
 import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
+import {
+  WalkthroughView,
+} from './components/WalkthroughView.js';
 import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
 const {html} = Lit;
 
 const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
-const AI_ASSISTANCE_HELP = 'https://developer.chrome.com/docs/devtools/ai-assistance';
+const AI_ASSISTANCE_HELP =
+    'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString;
+const WALKTHROUGH_SIDEBAR_BREAKPOINT = 700;
+const WALKTHROUGH_SIDEBAR_INITIAL_WIDTH = 400;
 
 const UIStrings = {
   /**
@@ -311,9 +317,16 @@ interface ToolbarViewInput {
   onExportConversationClick: () => void;
   onHelpClick: () => void;
   onSettingsClick: () => void;
-  isLoading: boolean;
+
   showChatActions: boolean;
   showActiveConversationActions: boolean;
+  isLoading: boolean;
+
+  walkthrough: {
+    isExpanded: boolean,
+    isInlined: boolean,
+    onToggle: (isOpen: boolean) => void,
+  };
 }
 
 export const enum ViewState {
@@ -414,8 +427,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   function renderState(): Lit.TemplateResult {
     switch (input.state) {
       case ViewState.CHAT_VIEW: {
-      return html`
-        <devtools-ai-chat-view
+        return html`<devtools-ai-chat-view
           .props=${input.props}
           ${Lit.Directives.ref(el => {
             if (!el || !(el instanceof ChatView)) {
@@ -440,13 +452,40 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     }
   }
 
-  Lit.render(
-    html`
+  const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.walkthrough.isExpanded;
+
+  if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+    Lit.render(html`
+      ${toolbarView(input)}
+      <div class="ai-assistance-view-container">
+        <devtools-split-view
+          name="ai-assistance-split-view-state"
+          direction="column"
+          sidebar-position="second"
+          sidebar-visibility=${shouldShowWalkthrough && !input.walkthrough.isInlined ? 'visible' : 'hidden'}
+          sidebar-initial-size=${WALKTHROUGH_SIDEBAR_INITIAL_WIDTH}
+        >
+          <div slot="main" class="main-view">
+            ${renderState()}
+          </div>
+          <div slot="sidebar" class="sidebar-view">
+            ${shouldShowWalkthrough ? html`
+              <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(WalkthroughView, {
+                message: input.props.walkthrough.activeMessage,
+                isLoading: input.props.isLoading,
+                markdownRenderer: input.props.markdownRenderer,
+                onToggle: input.props.walkthrough.onToggle,
+              })}></devtools-widget>` : Lit.nothing}
+          </div>
+        </devtools-split-view>
+      </div>
+    `, target);
+  } else {
+    Lit.render(html`
       ${toolbarView(input)}
       <div class="ai-assistance-view-container">${renderState()}</div>
-    `,
-    target
-  );
+    `, target);
+  }
   // clang-format on
 }
 
@@ -482,6 +521,30 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
   return new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
 }
 
+/**
+ * State relating to the visibility of the Walkthrough.
+ * Note that we have to track the active message and the visibility as distinct
+ * state, because you can toggle the walkthrough via the sidebar, in which case
+ * we need to make it visible/hidden but keep track of the active message for
+ * when the user expands it again.
+ */
+interface WalkthroughState {
+  /**
+   * Whether to show the walkthrough inline (done at narrow widths) or in a side panel.
+   */
+  isInlined: boolean;
+  /**
+   * If the walkthrough UI is currently visible (either in the sidebar, or inlined)
+   */
+  isExpanded: boolean;
+  /**
+   * The message that the walkthrough is showing all the steps for. A
+   * conversation can have many Model messages (1 per each user prompt) so we
+   * need to track which one we are showing for the walkthrough.
+   */
+  activeMessage: ModelChatMessage|null;
+}
+
 let panelInstance: AiAssistancePanel;
 export class AiAssistancePanel extends UI.Panel.Panel {
   static panelName = 'freestyler';
@@ -516,6 +579,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   };
   #timelinePanelInstance: TimelinePanel.TimelinePanel.TimelinePanel|null = null;
   #runAbortController = new AbortController();
+  #walkthrough: WalkthroughState = {
+    isInlined: false,
+    isExpanded: false,
+    activeMessage: null,
+  };
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability, syncInfo}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -542,6 +610,29 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
   }
 
+  #getToolbarInput(): ToolbarViewInput {
+    return {
+      isLoading: this.#isLoading,
+      showChatActions: this.#shouldShowChatActions(),
+      showActiveConversationActions: Boolean(this.#conversation && !this.#conversation.isEmpty),
+      onNewChatClick: this.#handleNewChatRequest.bind(this),
+      populateHistoryMenu: this.#populateHistoryMenu.bind(this),
+      onDeleteClick: this.#onDeleteClicked.bind(this),
+      onExportConversationClick: this.#onExportConversationClick.bind(this),
+      onHelpClick: () => {
+        UIHelpers.openInNewTab(AI_ASSISTANCE_HELP);
+      },
+      onSettingsClick: () => {
+        void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+      },
+      walkthrough: {
+        isExpanded: this.#walkthrough.isExpanded,
+        isInlined: this.#walkthrough.isInlined,
+        onToggle: this.#toggleWalkthrough.bind(this),
+      }
+    };
+  }
+
   async #getPanelViewInput(): Promise<PanelViewInput> {
     const blockedByAge = Root.Runtime.hostConfig.aidaAvailability?.blockedByAge === true;
 
@@ -602,6 +693,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onCopyResponseClick: this.#onCopyResponseClick.bind(this),
           onContextRemoved: isAiAssistanceContextSelectionAgentEnabled() ? this.#handleContextRemoved.bind(this) : null,
           onContextAdd,
+          walkthrough: {
+            onToggle: this.#toggleWalkthrough.bind(this),
+            onOpen: this.#openWalkthrough.bind(this),
+            isExpanded: this.#walkthrough.isExpanded,
+            isInlined: this.#walkthrough.isInlined,
+            activeMessage: this.#walkthrough.activeMessage,
+          },
         }
       };
     }
@@ -611,6 +709,34 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     };
   }
 
+  // Responsive logic for Walkthrough
+  override onResize(): void {
+    super.onResize();
+    if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+      this.#updateWalkthroughResponsiveness();
+    }
+  }
+
+  #updateWalkthroughResponsiveness(): void {
+    const isNarrow = this.contentElement.offsetWidth < WALKTHROUGH_SIDEBAR_BREAKPOINT;
+    if (isNarrow === this.#walkthrough.isInlined) {
+      return;
+    }
+    this.#walkthrough.isInlined = isNarrow;
+    this.requestUpdate();
+  }
+
+  #openWalkthrough(message: ModelChatMessage): void {
+    this.#walkthrough.activeMessage = message;
+    this.#walkthrough.isExpanded = true;
+    this.requestUpdate();
+  }
+
+  #toggleWalkthrough(isOpen: boolean): void {
+    this.#walkthrough.isExpanded = isOpen;
+    this.requestUpdate();
+  }
+
   #getAiAssistanceEnabledSetting(): Common.Settings.Setting<boolean>|undefined {
     try {
       return Common.Settings.moduleSetting('ai-assistance-enabled') as Common.Settings.Setting<boolean>;
@@ -932,31 +1058,13 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     return this.#changeManager.formatChangesForPatching(this.#conversation.id, /* includeSourceLocation= */ true);
   }
 
-  #getToolbarInput(): ToolbarViewInput {
-    return {
-      isLoading: this.#isLoading,
-      showChatActions: this.#shouldShowChatActions(),
-      showActiveConversationActions: Boolean(this.#conversation && !this.#conversation.isEmpty),
-      onNewChatClick: this.#handleNewChatRequest.bind(this),
-      populateHistoryMenu: this.#populateHistoryMenu.bind(this),
-      onDeleteClick: this.#onDeleteClicked.bind(this),
-      onExportConversationClick: this.#onExportConversationClick.bind(this),
-      onHelpClick: () => {
-        UIHelpers.openInNewTab(AI_ASSISTANCE_HELP);
-      },
-      onSettingsClick: () => {
-        void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-      },
+  override async performUpdate(): Promise<void> {
+    const viewInput: ViewInput = {
+      ...this.#getToolbarInput(),
+      ...await this.#getPanelViewInput(),
     };
-  }
 
-  override async performUpdate(): Promise<void> {
-    this.view(
-        {
-          ...this.#getToolbarInput(),
-          ...await this.#getPanelViewInput(),
-        },
-        this.#viewOutput, this.contentElement);
+    this.view(viewInput, this.#viewOutput, this.contentElement);
   }
 
   #onCopyResponseClick(message: ModelChatMessage): void {

package/front_end/panels/ai_assistance/README.md

@@ -0,0 +1,71 @@
+# AI Walkthrough: Data and UI Structure
+
+This document outlines the structure of the data and UI for the AI Walkthrough feature in DevTools.
+
+## UI Layers
+
+The UI is composed of several nested components, each with a specific responsibility.
+
+### 1. `AiAssistancePanel`
+
+This is the top-level UI component for the entire AI Assistance feature. It acts as the main container and controller.
+
+-   **Manages State:** It holds the state of the conversation, including the history of messages.
+-   **Renders Child Views:** It determines which of the main views to render: the `ChatView` for an active conversation, an `ExploreWidget` for discovering features, or a `DisabledWidget` if the feature is not enabled.
+-   **Orchestrates Walkthrough:** It manages the state of the `WalkthroughView`, including whether it is visible, whether it is rendered inline or in a sidebar, and which model message's steps are being displayed.
+
+### 2. `ChatView`
+
+This component is responsible for displaying the entire chat interface.
+
+-   **Renders Messages:** It takes the list of messages from the `AiAssistancePanel` and renders a `ChatMessage` component for each one.
+-   **Hosts Input:** It contains the `ChatInput` component where the user types their queries.
+
+### 3. `ChatMessage`
+
+This component displays a single message in the conversation, which can be either from the user or from the AI model.
+
+-   **User Message:** Renders the user's text query.
+-   **Model Message:** Renders the multi-part response from the model, which includes the thinking process (steps) and the final answer. It also contains the "Show thinking" button that triggers the `WalkthroughView`.
+
+### 4. `WalkthroughView`
+
+This component is dedicated to displaying the "Investigation steps" or the "thinking process" of the AI model for a given response.
+
+-   **Displays Steps:** It receives the list of `Step` objects from a `ModelChatMessage` and renders them in a readable format.
+-   **Flexible Rendering:** It can be displayed either as a separate sidebar view (managed by `AiAssistancePanel`) or inline within a `ChatMessage` component, depending on the available screen width.
+
+## Data Structure
+
+The conversation is built upon a clear data model that distinguishes between user input and the model's complex output.
+
+### The Message Model
+
+A conversation is an array of `Message` objects. There are two types of messages:
+
+-   **`UserChatMessage`**: Represents a query from the user. It has a simple structure:
+    -   `entity`: Always `ChatMessageEntity.USER`.
+    -   `text`: The user's query as a string.
+
+-   **`ModelChatMessage`**: Represents a response from the AI model. It has a more complex structure to accommodate the walkthrough feature:
+    -   `entity`: Always `ChatMessageEntity.MODEL`.
+    -   `parts`: An array of `ModelMessagePart` objects.
+
+### User and Model Message Relationship
+
+In a typical conversation flow, there is a one-to-one relationship between a `UserChatMessage` and the subsequent `ModelChatMessage`. The user asks a question, and the model provides a response that contains its reasoning and final answer.
+
+### `ModelChatMessage` Structure: Steps and Answer
+
+The key to the walkthrough feature lies in the `parts` array of a `ModelChatMessage`. A `ModelMessagePart` can be one of two types:
+
+1.  **`StepPart`**: Represents a single step in the model's reasoning process. It contains a `step` object with details like:
+    -   `title`: The title of the step (e.g., "Analyzing CSS").
+    -   `thought`: A textual description of what the model is thinking.
+    -   `code`: Any code that the model is executing.
+    -   `output`: The result of the executed code.
+
+2.  **`AnswerPart`**: Represents the final, conclusive answer from the model.
+    -   `text`: The markdown-formatted text of the answer.
+
+A single `ModelChatMessage` will typically have **zero or more `StepPart`s** followed by **one `AnswerPart`**. This structure allows the UI to first show the final answer and provide the option to progressively disclose the "thinking" steps that led to it via the `WalkthroughView`.

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -29,6 +29,11 @@
     align-items: center;
     justify-content: center;
   }
+
+  devtools-split-view {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .toolbar-feedback-link {

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -11,3 +11,4 @@ export * as ChatMessage from './components/ChatMessage.js';
 export * as ExploreWidget from './components/ExploreWidget.js';
 export * as PatchWidget from './PatchWidget.js';
 export * as DisabledWidget from './components/DisabledWidget.js';
+export * as WalkthroughView from './components/WalkthroughView.js';

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

@@ -9,6 +9,7 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -21,6 +22,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatMessageStyles from './chatMessage.css.js';
+import {WalkthroughView} from './WalkthroughView.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
@@ -162,6 +164,10 @@ const UIStringsNotTranslate = {
    * @description Alt text for image when it is not available.
    */
   imageUnavailable: 'Image unavailable',
+  /**
+   * @description Title for the button that shows the thinking process (walkthrough).
+   */
+  showThinking: 'Show thinking',
 } as const;
 
 export interface Step {
@@ -260,6 +266,12 @@ export interface MessageInput {
   onSuggestionClick: (suggestion: string) => void;
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
+  walkthrough: {
+    onOpen: (message: ModelChatMessage) => void,
+    isExpanded: boolean,
+    onToggle: (isOpen: boolean) => void,
+    isInlined: boolean,
+  };
 }
 
 export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, target: HTMLElement): void => {
@@ -298,7 +310,9 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
     return;
   }
 
+  const steps = message.parts.filter(part => part.type === 'step').map(part => part.step);
   const icon = AiAssistanceModel.AiUtils.getIconName();
+  const aiAssistanceV2 = Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled;
 
   // clang-format off
   Lit.render(html`
@@ -314,6 +328,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           <h2>${AiAssistanceModel.AiUtils.isGeminiBranding() ? lockedString(UIStringsNotTranslate.gemini) : lockedString(UIStringsNotTranslate.ai)}</h2>
         </div>
       </div>
+      ${aiAssistanceV2 ? renderWalkthroughUI(input, steps) : Lit.nothing}
       ${Lit.Directives.repeat(
         message.parts,
         (_, index) => index,
@@ -322,12 +337,15 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           if (part.type === 'answer') {
             return html`<p>${renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
           }
-          return renderStep({
-            step: part.step,
-            isLoading: input.isLoading,
-            markdownRenderer: input.markdownRenderer,
-            isLast: isLastPart,
-          });
+          if (!aiAssistanceV2 && part.type === 'step') {
+            return renderStep({
+              step: part.step,
+              isLoading: input.isLoading,
+              markdownRenderer: input.markdownRenderer,
+              isLast: isLastPart,
+            });
+          }
+          return Lit.nothing;
         },
       )}
       ${renderError(message)}
@@ -452,6 +470,84 @@ function renderStepDetails({
   // clang-format on
 }
 
+/**
+ * Responsible for rendering the AI Walkthrough UI. This can take different
+ * shapes and involve different parts depending on if the walkthrough is
+ * inlined, expanded, or if we have side-effect steps that need the user to
+ * view them.
+ */
+function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.LitTemplate {
+  if (steps.length === 0) {
+    return Lit.nothing;
+  }
+
+  const sideEffectSteps = steps.filter(s => s.sideEffect);
+
+  // If the walkthrough is in the sidebar, we render a button into the
+  // ChatView to open it.
+  // clang-format off
+  const openWalkThroughSidebarButton = !input.walkthrough.isInlined ? html`
+      <div class="walkthrough-toggle-container">
+        <devtools-button
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          .size=${Buttons.Button.Size.SMALL}
+          .title=${lockedString(UIStringsNotTranslate.showThinking)}
+          .jslogContext=${'ai-show-walkthrough'}
+          @click=${() => {
+            if(input.walkthrough.isExpanded) {
+              input.walkthrough.onToggle(false);
+            } else {
+              // Can't just toggle the visibility here; we need to ensure we
+              // update the state with this message as the user could have had
+              // the walkthrough open with an alternative message.
+              input.walkthrough.onOpen(input.message as ModelChatMessage);
+            }
+          }}
+        >${lockedString(UIStringsNotTranslate.showThinking)}</devtools-button>
+      </div>
+  ` : Lit.nothing;
+  // clang-format on
+
+  // 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.
+  // Note: this is a temporary approach and needs more UX discussion; b/487921578
+  // clang-format off
+  const sideEffectStepsUI = !input.walkthrough.isInlined && !input.walkthrough.isExpanded && sideEffectSteps.length > 0 ? sideEffectSteps.map(step => html`
+    <div class="side-effect-container">
+      ${renderStep({
+         step,
+         isLoading: input.isLoading,
+         markdownRenderer: input.markdownRenderer,
+         isLast: true
+      })}
+    </div> `) : Lit.nothing;
+  // clang-format on
+
+  // If the walkthrough is inlined (narrow width screens), render it here.
+  // Note that we force it open if there is a side-effect.
+  // clang-format off
+  const walkthroughInline = input.walkthrough.isInlined ? html`
+    <div class="walkthrough-container">
+      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(WalkthroughView, {
+        message: input.message as ModelChatMessage,
+        isLoading: input.isLoading && input.isLastMessage,
+        markdownRenderer: input.markdownRenderer,
+        isInlined: true,
+        isExpanded: input.isLastMessage &&
+            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.sideEffect))),
+        onToggle: input.walkthrough.onToggle,
+      })}></devtools-widget>
+    </div>
+  ` : Lit.nothing;
+
+  return html`
+    ${openWalkThroughSidebarButton}
+    ${sideEffectStepsUI}
+    ${walkthroughInline}
+  `;
+  // clang-format on
+}
+
 function renderStepBadge({step, isLoading, isLast}: {
   step: Step,
   isLoading: boolean,
@@ -481,7 +577,7 @@ function renderStepBadge({step, isLoading, isLast}: {
     ></devtools-icon>`;
 }
 
-function renderStep({step, isLoading, markdownRenderer, isLast}: {
+export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   step: Step,
   isLoading: boolean,
   markdownRenderer: MarkdownLitRenderer,
@@ -761,6 +857,12 @@ export class ChatMessage extends UI.Widget.Widget {
   onFeedbackSubmit:
       (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void = () => {};
   onCopyResponseClick: (message: ModelChatMessage) => void = () => {};
+  walkthrough: MessageInput['walkthrough'] = {
+    onOpen: () => {},
+    onToggle: () => {},
+    isInlined: false,
+    isExpanded: false,
+  };
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());
   #suggestionsEvaluateLayoutThrottler = new Common.Throttler.Throttler(50);
@@ -822,6 +924,7 @@ export class ChatMessage extends UI.Widget.Widget {
           currentRating: this.#currentRating,
           isShowingFeedbackForm: this.#isShowingFeedbackForm,
           onFeedbackSubmit: this.onFeedbackSubmit,
+          walkthrough: this.walkthrough,
         },
         this.#viewOutput, this.contentElement);
   }

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -76,6 +76,13 @@ export interface Props {
   disclaimerText: Platform.UIString.LocalizedString;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
+  walkthrough: {
+    onOpen: (message: ModelChatMessage) => void,
+    onToggle: (isOpen: boolean) => void,
+    isExpanded: boolean,
+    isInlined: boolean,
+    activeMessage: ModelChatMessage|null,
+  };
 }
 
 interface ChatWidgetInput extends Props {
@@ -115,6 +122,9 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   onSuggestionClick: input.handleSuggestionClick,
                   onFeedbackSubmit: input.onFeedbackSubmit,
                   onCopyResponseClick: input.onCopyResponseClick,
+                  walkthrough: {
+                    ...input.walkthrough,
+                  }
                 })}></devtools-widget>`
               )}
               ${input.isLoading ? nothing : html`<devtools-widget