chrome-devtools-frontend 1.0.1548980 → 1.0.1549484

package/front_end/models/source_map_scopes/FunctionCodeResolver.ts

@@ -0,0 +1,270 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../bindings/bindings.js';
+import * as Formatter from '../formatter/formatter.js';
+import * as TextUtils from '../text_utils/text_utils.js';
+import * as Workspace from '../workspace/workspace.js';
+
+/** Represents the source code for a given function, including additional context of surrounding lines. */
+export interface FunctionCode {
+  functionBounds: Workspace.UISourceCode.UIFunctionBounds;
+  /** The text of `uiSourceCode`. */
+  text: TextUtils.Text.Text;
+  /** The function text. */
+  code: string;
+  /** The range of `code` within `text`. */
+  range: TextUtils.TextRange.TextRange;
+  /** The function text, plus some additional context before and after. The actual function is wrapped in <FUNCTION_START>...<FUNCTION_END> */
+  codeWithContext: string;
+  /** The range of `codeWithContext` within `text`. */
+  rangeWithContext: TextUtils.TextRange.TextRange;
+}
+
+export interface CreateFunctionCodeOptions {
+  /** Number of characters to include before and after the function. Stacks with `contextLineLength`. */
+  contextLength?: number;
+  /** Number of lines to include before and after the function. Stacks with `contextLength`. */
+  contextLineLength?: number;
+  /** If true, appends profile data from the trace at the end of every line of the function in `codeWithContext`. This should match what is seen in the formatted view in the Sources panel. */
+  appendProfileData?: boolean;
+}
+
+interface InputData {
+  text: TextUtils.Text.Text;
+  formattedContent: Formatter.ScriptFormatter.FormattedContent|null;
+  performanceData: Workspace.UISourceCode.LineColumnProfileMap|undefined;
+}
+
+const inputCache = new WeakMap<Workspace.UISourceCode.UISourceCode, Promise<InputData>>();
+
+async function prepareInput(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string): Promise<InputData> {
+  const formattedContent = await format(uiSourceCode, content);
+  const text = new TextUtils.Text.Text(formattedContent ? formattedContent.formattedContent : content);
+  let performanceData = uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE) as
+          Workspace.UISourceCode.LineColumnProfileMap |
+      undefined;
+
+  // Map profile data to the formatted view of the text.
+  if (formattedContent && performanceData) {
+    performanceData = Workspace.UISourceCode.createMappedProfileData(performanceData, (line, column) => {
+      return formattedContent.formattedMapping.originalToFormatted(line, column);
+    });
+  }
+
+  return {text, formattedContent, performanceData};
+}
+
+/** Formatting and parsing line endings for Text is expensive, so cache it. */
+async function prepareInputAndCache(
+    uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string): Promise<InputData> {
+  let cachedPromise = inputCache.get(uiSourceCode);
+  if (cachedPromise) {
+    return await cachedPromise;
+  }
+
+  cachedPromise = prepareInput(uiSourceCode, content);
+  inputCache.set(uiSourceCode, cachedPromise);
+  return await cachedPromise;
+}
+
+function extractPerformanceDataByLine(
+    textRange: TextUtils.TextRange.TextRange, performanceData: Workspace.UISourceCode.LineColumnProfileMap): number[] {
+  const {startLine, startColumn, endLine, endColumn} = textRange;
+  const byLine = new Array(endLine - startLine + 1).fill(0);
+
+  for (let line = startLine; line <= endLine; line++) {
+    const lineData = performanceData.get(line + 1);
+    if (!lineData) {
+      continue;
+    }
+
+    // Fast-path for when the entire line's data is relevant.
+    if (line !== startLine && line !== endLine) {
+      byLine[line - startLine] = lineData.values().reduce((acc, cur) => acc + cur);
+      continue;
+    }
+
+    const column0 = line === startLine ? startColumn + 1 : 0;
+    const column1 = line === endLine ? endColumn + 1 : Number.POSITIVE_INFINITY;
+
+    let totalData = 0;
+    for (const [column, data] of lineData) {
+      if (column >= column0 && column <= column1) {
+        totalData += data;
+      }
+    }
+
+    byLine[line - startLine] = totalData;
+  }
+
+  return byLine.map(data => Math.round(data * 10) / 10);
+}
+
+function createFunctionCode(
+    inputData: InputData, functionBounds: Workspace.UISourceCode.UIFunctionBounds,
+    options?: CreateFunctionCodeOptions): FunctionCode {
+  let {startLine, startColumn, endLine, endColumn} = functionBounds.range;
+  if (inputData.formattedContent) {
+    const startMapped = inputData.formattedContent.formattedMapping.originalToFormatted(startLine, startColumn);
+    startLine = startMapped[0];
+    startColumn = startMapped[1];
+
+    const endMapped = inputData.formattedContent.formattedMapping.originalToFormatted(endLine, endColumn);
+    endLine = endMapped[0];
+    endColumn = endMapped[1];
+  }
+
+  const text = inputData.text;
+  const content = text.value();
+
+  // Define two ranges - the first is just the function bounds, the second includes
+  // that plus some surrounding context as dictated by the options.
+  const range = new TextUtils.TextRange.TextRange(startLine, startColumn, endLine, endColumn);
+
+  const functionStartOffset = text.offsetFromPosition(startLine, startColumn);
+  const functionEndOffset = text.offsetFromPosition(endLine, endColumn);
+
+  let contextStartOffset = 0;
+  if (options?.contextLength !== undefined) {
+    const contextLength = options.contextLength;
+    contextStartOffset = Math.max(contextStartOffset, functionStartOffset - contextLength);
+  }
+  if (options?.contextLineLength !== undefined) {
+    const contextLineLength = options.contextLineLength;
+    const position = text.offsetFromPosition(Math.max(startLine - contextLineLength, 0), 0);
+    contextStartOffset = Math.max(contextStartOffset, position);
+  }
+
+  let contextEndOffset = content.length;
+  if (options?.contextLength !== undefined) {
+    const contextLength = options.contextLength;
+    contextEndOffset = Math.min(contextEndOffset, functionEndOffset + contextLength);
+  }
+  if (options?.contextLineLength !== undefined) {
+    const contextLineLength = options.contextLineLength;
+    const position =
+        text.offsetFromPosition(Math.min(endLine + contextLineLength, text.lineCount() - 1), Number.POSITIVE_INFINITY);
+    contextEndOffset = Math.min(contextEndOffset, position);
+  }
+
+  const contextStart = text.positionFromOffset(contextStartOffset);
+  const contextEnd = text.positionFromOffset(contextEndOffset);
+  const rangeWithContext = new TextUtils.TextRange.TextRange(
+      contextStart.lineNumber, contextStart.columnNumber, contextEnd.lineNumber, contextEnd.columnNumber);
+
+  // Grab substrings for the function range, and for the context range.
+  const code = content.substring(functionStartOffset, functionEndOffset);
+  const before = content.substring(contextStartOffset, functionStartOffset);
+  const after = content.substring(functionEndOffset, contextEndOffset);
+
+  let codeWithContext;
+  if (options?.appendProfileData && inputData.performanceData) {
+    const performanceDataByLine = extractPerformanceDataByLine(range, inputData.performanceData);
+    const lines = performanceDataByLine.map((data, i) => {
+      let line = text.lineAt(startLine + i);
+
+      const isLastLine = i === performanceDataByLine.length - 1;
+      if (i === 0) {
+        if (isLastLine) {
+          line = line.substring(startColumn, endColumn);
+        } else {
+          line = line.substring(startColumn);
+        }
+      } else if (isLastLine) {
+        line = line.substring(0, endColumn);
+      }
+
+      if (isLastLine) {
+        // Don't ever annotate the last line - it could make the rest of the code on
+        // that line get commented out.
+        data = 0;
+      }
+
+      return data ? `${line} // ${data} ms` : line;
+    });
+    const annotatedCode = lines.join('\n');
+    codeWithContext = before + `<FUNCTION_START>${annotatedCode}<FUNCTION_END>` + after;
+  } else {
+    codeWithContext = before + `<FUNCTION_START>${code}<FUNCTION_END>` + after;
+  }
+
+  return {
+    functionBounds,
+    text,
+    code,
+    range,
+    codeWithContext,
+    rangeWithContext,
+  };
+}
+
+/**
+ * The input location may be a source mapped location or a raw location.
+ */
+export async function getFunctionCodeFromLocation(
+    target: SDK.Target.Target, url: Platform.DevToolsPath.UrlString, line: number, column: number,
+    options?: CreateFunctionCodeOptions): Promise<FunctionCode|null> {
+  const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+  if (!debuggerModel) {
+    throw new Error('missing debugger model');
+  }
+
+  let uiSourceCode;
+  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+  const projects = debuggerWorkspaceBinding.workspace.projectsForType(Workspace.Workspace.projectTypes.Network);
+  for (const project of projects) {
+    uiSourceCode = project.uiSourceCodeForURL(url);
+    if (uiSourceCode) {
+      break;
+    }
+  }
+
+  if (!uiSourceCode) {
+    return null;
+  }
+
+  const rawLocations = await debuggerWorkspaceBinding.uiLocationToRawLocations(uiSourceCode, line, column);
+  const rawLocation = rawLocations.at(-1);
+  if (!rawLocation) {
+    return null;
+  }
+
+  return await getFunctionCodeFromRawLocation(rawLocation, options);
+}
+
+async function format(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string):
+    Promise<Formatter.ScriptFormatter.FormattedContent|null> {
+  const contentType = uiSourceCode.contentType();
+  const shouldFormat = !contentType.isFromSourceMap() && (contentType.isDocument() || contentType.isScript()) &&
+      TextUtils.TextUtils.isMinified(content);
+  if (!shouldFormat) {
+    return null;
+  }
+
+  return await Formatter.ScriptFormatter.formatScriptContent(contentType.canonicalMimeType(), content, '\t');
+}
+
+/**
+ * Returns a {@link FunctionCode} for the given raw location.
+ */
+export async function getFunctionCodeFromRawLocation(
+    rawLocation: SDK.DebuggerModel.Location, options?: CreateFunctionCodeOptions): Promise<FunctionCode|null> {
+  const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
+  const functionBounds = await debuggerWorkspaceBinding.functionBoundsAtRawLocation(rawLocation);
+  if (!functionBounds) {
+    return null;
+  }
+
+  await functionBounds.uiSourceCode.requestContentData();
+  const content = functionBounds.uiSourceCode.content();
+  if (!content) {
+    return null;
+  }
+
+  const inputData = await prepareInputAndCache(functionBounds.uiSourceCode, content);
+  return createFunctionCode(inputData, functionBounds, options);
+}

package/front_end/models/source_map_scopes/source_map_scopes.ts

@@ -2,10 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as FunctionCodeResolver from './FunctionCodeResolver.js';
 import * as NamesResolver from './NamesResolver.js';
 import * as ScopeChainModel from './ScopeChainModel.js';
 
 export {
+  FunctionCodeResolver,
   NamesResolver,
   ScopeChainModel,
 };

package/front_end/models/workspace/UISourceCode.ts

@@ -35,9 +35,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #contentType: Common.ResourceType.ResourceType;
   #requestContentPromise: Promise<TextUtils.ContentData.ContentDataOrError>|null = null;
   #decorations = new Map<string, any>();
-  #formattedDecorations = new Map<string, any>();
   #hasCommits = false;
-  #prettied = false;
   #messages: Set<Message>|null = null;
   #content: TextUtils.ContentData.ContentDataOrError|null = null;
   #forceLoadOnCheckContent = false;
@@ -499,9 +497,6 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   getDecorationData(type: string): any {
-    if (this.#prettied && this.#formattedDecorations.get(type)) {
-      return this.#formattedDecorations.get(type);
-    }
     return this.#decorations.get(type);
   }
 
@@ -513,45 +508,6 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#disableEdit;
   }
 
-  formatChanged(format: {originalToFormatted(lineNumber: number, columnNumber?: number): number[]}|null): void {
-    if (this.#prettied === Boolean(format)) {
-      return;
-    }
-    this.#prettied = Boolean(format);
-    if (!format) {
-      this.dispatchEventToListeners(Events.DecorationChanged, DecoratorType.PERFORMANCE);
-      return;
-    }
-    const performanceDecorations = this.#decorations.get(DecoratorType.PERFORMANCE);
-    if (!performanceDecorations) {
-      return;
-    }
-    let formattedPerformanceDecorations: Map<number, Map<number, number>> =
-        this.#formattedDecorations.get(DecoratorType.PERFORMANCE);
-    if (!formattedPerformanceDecorations) {
-      formattedPerformanceDecorations = new Map<number, Map<number, number>>();
-      this.#formattedDecorations.set(DecoratorType.PERFORMANCE, formattedPerformanceDecorations);
-    } else {
-      formattedPerformanceDecorations.clear();
-    }
-
-    for (const [lineNumber, columnData] of performanceDecorations) {
-      for (const [columnNumber, data] of columnData) {
-        const [formattedLineNumber, formattedColumnNumber] =
-            format.originalToFormatted(lineNumber - 1, columnNumber - 1);
-        const oneBasedFormattedLineNumber = formattedLineNumber + 1;
-        const oneBasedFormattedColumnNumber = formattedColumnNumber + 1;
-        let lineData = formattedPerformanceDecorations.get(oneBasedFormattedLineNumber);
-        if (!lineData) {
-          lineData = new Map();
-          formattedPerformanceDecorations.set(oneBasedFormattedLineNumber, lineData);
-        }
-        lineData.set(oneBasedFormattedColumnNumber, (lineData.get(oneBasedFormattedColumnNumber) || 0) + data);
-      }
-    }
-    this.dispatchEventToListeners(Events.DecorationChanged, 'performance');
-  }
-
   isIgnoreListed(): boolean {
     return IgnoreListManager.instance().isUserOrSourceMapIgnoreListedUISourceCode(this);
   }
@@ -677,6 +633,21 @@ export class UILocationRange {
   }
 }
 
+/**
+ * A text range inside a specific {@link UISourceCode}, representing a function.
+ */
+export class UIFunctionBounds {
+  readonly uiSourceCode: UISourceCode;
+  readonly range: TextUtils.TextRange.TextRange;
+  readonly name: string;
+
+  constructor(uiSourceCode: UISourceCode, range: TextUtils.TextRange.TextRange, name: string) {
+    this.uiSourceCode = uiSourceCode;
+    this.range = range;
+    this.name = name;
+  }
+}
+
 /**
  * A message associated with a range in a `UISourceCode`. The range will be
  * underlined starting at the range's start and ending at the line end (the
@@ -746,3 +717,39 @@ export const enum DecoratorType {
   MEMORY = 'memory',
   COVERAGE = 'coverage',
 }
+
+/** 1-based. line => column => value */
+export type LineColumnProfileMap = Map<number, Map<number, number>>;
+/** Used by ProfilePlugin to track runtime/memory costs. */
+export type ProfileDataMap = Map<UISourceCode, LineColumnProfileMap>;
+
+/**
+ * Converts an existing LineColumnProfileMap to a new one using the provided mapping.
+ *
+ * The input and output line/column of originalToMappedLocation is 0-indexed.
+ */
+export function createMappedProfileData(
+    profileData: LineColumnProfileMap,
+    originalToMappedLocation: (line: number, column: number) => number[] | null): LineColumnProfileMap {
+  const mappedProfileData: LineColumnProfileMap = new Map();
+  for (const [lineNumber, columnData] of profileData) {
+    for (const [columnNumber, data] of columnData) {
+      const mappedLocation = originalToMappedLocation(lineNumber - 1, columnNumber - 1);
+      if (!mappedLocation) {
+        continue;
+      }
+
+      const oneBasedFormattedLineNumber = mappedLocation[0] + 1;
+      const oneBasedFormattedColumnNumber = mappedLocation[1] + 1;
+      let mappedColumnData = mappedProfileData.get(oneBasedFormattedLineNumber);
+      if (!mappedColumnData) {
+        mappedColumnData = new Map();
+        mappedProfileData.set(oneBasedFormattedLineNumber, mappedColumnData);
+      }
+      mappedColumnData.set(
+          oneBasedFormattedColumnNumber, (mappedColumnData.get(oneBasedFormattedColumnNumber) || 0) + data);
+    }
+  }
+
+  return mappedProfileData;
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -27,6 +27,7 @@ import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
 import {
+  type AnswerPart,
   type ChatMessage,
   ChatMessageEntity,
   ChatView,
@@ -1420,7 +1421,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     try {
       let systemMessage: ModelChatMessage = {
         entity: ChatMessageEntity.MODEL,
-        steps: [],
+        parts: [],
       };
       let step: Step = {isLoading: true};
 
@@ -1428,9 +1429,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
        * Commits the step to props only if necessary.
        */
       function commitStep(): void {
-        if (systemMessage.steps.at(-1) !== step) {
-          systemMessage.steps.push(step);
+        const lastPart = systemMessage.parts.at(-1);
+        if (lastPart?.type === 'step' && lastPart.step === step) {
+          return;
         }
+        systemMessage.parts.push({
+          type: 'step',
+          step,
+        });
       }
 
       this.#isLoading = true;
@@ -1447,15 +1453,15 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             });
             systemMessage = {
               entity: ChatMessageEntity.MODEL,
-              steps: [],
+              parts: [],
             };
             this.#messages.push(systemMessage);
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.QUERYING: {
             step = {isLoading: true};
-            if (!systemMessage.steps.length) {
-              systemMessage.steps.push(step);
+            if (!systemMessage.parts.length) {
+              commitStep();
             }
 
             break;
@@ -1479,7 +1485,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.SUGGESTIONS: {
-            systemMessage.suggestions = data.suggestions;
+            const lastPart = systemMessage.parts.at(-1);
+            if (lastPart?.type === 'answer') {
+              lastPart.suggestions = data.suggestions;
+            } else {
+              systemMessage.parts.push({
+                type: 'answer',
+                text: '',
+                suggestions: data.suggestions,
+              });
+            }
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.SIDE_EFFECT: {
@@ -1504,32 +1519,57 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.ANSWER: {
-            systemMessage.suggestions ??= data.suggestions;
-            systemMessage.answer = data.text;
             systemMessage.rpcId = data.rpcId;
+            const lastPart = systemMessage.parts.at(-1);
+            if (lastPart?.type === 'answer') {
+              lastPart.text = data.text;
+              if (data.suggestions) {
+                lastPart.suggestions = data.suggestions;
+              }
+            } else {
+              const newPart: AnswerPart = {
+                type: 'answer',
+                text: data.text,
+              };
+              if (data.suggestions) {
+                newPart.suggestions = data.suggestions;
+              }
+              systemMessage.parts.push(newPart);
+            }
+
             // When there is an answer without any thinking steps, we don't want to show the thinking step.
-            if (systemMessage.steps.length === 1 && systemMessage.steps[0].isLoading) {
-              systemMessage.steps.pop();
+            // TODO(crbug.com/463323934): Remove specially handling this case.
+            if (systemMessage.parts.length > 1) {
+              const firstPart = systemMessage.parts[0];
+              if (firstPart.type === 'step' && firstPart.step.isLoading && !firstPart.step.thought &&
+                  !firstPart.step.code && !firstPart.step.contextDetails) {
+                systemMessage.parts.shift();
+              }
             }
             step.isLoading = false;
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.ERROR: {
             systemMessage.error = data.error;
-            systemMessage.rpcId = undefined;
-            const lastStep = systemMessage.steps.at(-1);
-            if (lastStep) {
+            const lastPart = systemMessage.parts.at(-1);
+            if (lastPart?.type === 'step') {
+              const lastStep = lastPart.step;
               // Mark the last step as cancelled to make the UI feel better.
               if (data.error === AiAssistanceModel.AiAgent.ErrorType.ABORT) {
                 lastStep.canceled = true;
                 // If error happens while the step is still loading remove it.
               } else if (lastStep.isLoading) {
-                systemMessage.steps.pop();
+                systemMessage.parts.pop();
               }
             }
+
             if (data.error === AiAssistanceModel.AiAgent.ErrorType.BLOCK) {
-              systemMessage.answer = undefined;
+              const lastPart = systemMessage.parts.at(-1);
+              if (lastPart?.type === 'answer') {
+                systemMessage.parts.pop();
+              }
             }
+            break;
           }
         }
 
@@ -1578,26 +1618,28 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 export function getResponseMarkdown(message: ModelChatMessage): string {
   const contentParts = ['## AI'];
 
-  for (const step of message.steps) {
-    if (step.title) {
-      contentParts.push(`### ${step.title}`);
-    }
-    if (step.contextDetails) {
-      contentParts.push(AiAssistanceModel.AiConversation.generateContextDetailsMarkdown(step.contextDetails));
-    }
-    if (step.thought) {
-      contentParts.push(step.thought);
-    }
-    if (step.code) {
-      contentParts.push(`**Code executed:**\n\`\`\`\n${step.code.trim()}\n\`\`\``);
-    }
-    if (step.output) {
-      contentParts.push(`**Data returned:**\n\`\`\`\n${step.output}\n\`\`\``);
+  for (const part of message.parts) {
+    if (part.type === 'answer') {
+      contentParts.push(`### Answer\n\n${part.text}`);
+    } else {
+      const step = part.step;
+      if (step.title) {
+        contentParts.push(`### ${step.title}`);
+      }
+      if (step.contextDetails) {
+        contentParts.push(AiAssistanceModel.AiConversation.generateContextDetailsMarkdown(step.contextDetails));
+      }
+      if (step.thought) {
+        contentParts.push(step.thought);
+      }
+      if (step.code) {
+        contentParts.push(`**Code executed:**\n\`\`\`\n${step.code.trim()}\n\`\`\``);
+      }
+      if (step.output) {
+        contentParts.push(`**Data returned:**\n\`\`\`\n${step.output}\n\`\`\``);
+      }
     }
   }
-  if (message.answer) {
-    contentParts.push(`### Answer\n\n${message.answer}`);
-  }
   return contentParts.join('\n\n');
 }
 

package/front_end/panels/ai_assistance/aiAssistancePanel.css

@@ -6,6 +6,7 @@
 
 .toolbar-container {
   display: flex;
+  flex-wrap: wrap;
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);
   flex: 0 0 auto;

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

@@ -204,6 +204,19 @@ export type ImageInputData = {
   inputType: AiAssistanceModel.AiAgent.MultimodalInputType,
 };
 
+export interface AnswerPart {
+  type: 'answer';
+  text: string;
+  suggestions?: [string, ...string[]];
+}
+
+export interface StepPart {
+  type: 'step';
+  step: Step;
+}
+
+export type ModelMessagePart = AnswerPart|StepPart;
+
 export interface UserChatMessage {
   entity: ChatMessageEntity.USER;
   text: string;
@@ -211,9 +224,7 @@ export interface UserChatMessage {
 }
 export interface ModelChatMessage {
   entity: ChatMessageEntity.MODEL;
-  steps: Step[];
-  suggestions?: [string, ...string[]];
-  answer?: string;
+  parts: ModelMessagePart[];
   error?: AiAssistanceModel.AiAgent.ErrorType;
   rpcId?: Host.AidaClient.RpcGlobalId;
 }
@@ -839,20 +850,21 @@ function renderChatMessage({
         </div>
       </div>
       ${Lit.Directives.repeat(
-        message.steps,
+        message.parts,
         (_, index) => index,
-        step => {
+        (part, index) => {
+          const isLastPart = index === message.parts.length - 1;
+          if (part.type === 'answer') {
+            return html`<p>${renderTextAsMarkdown(part.text, markdownRenderer, { animate: !isReadOnly && isLoading && isLast && isLastPart })}</p>`;
+          }
           return renderStep({
-            step,
+            step: part.step,
             isLoading,
             markdownRenderer,
-            isLast: [...message.steps.values()].at(-1) === step && isLast,
+            isLast: isLastPart && isLast,
           });
         },
       )}
-      ${message.answer
-        ? html`<p>${renderTextAsMarkdown(message.answer, markdownRenderer, { animate: !isReadOnly && isLoading && isLast })}</p>`
-        : Lit.nothing}
       ${renderError(message)}
       ${isLast && isLoading
         ? Lit.nothing
@@ -864,7 +876,7 @@ function renderChatMessage({
               }
               onFeedbackSubmit(message.rpcId, rating, feedback);
             },
-            suggestions: (isLast && !isReadOnly) ? message.suggestions : undefined,
+            suggestions: (isLast && !isReadOnly && message.parts.at(-1)?.type === 'answer') ? (message.parts.at(-1) as AnswerPart).suggestions : undefined,
             onSuggestionClick,
             onCopyResponseClick: () => onCopyResponseClick(message),
             canShowFeedbackForm,