chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

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

@@ -10,7 +10,12 @@ 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 SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
+import * as ElementsPanel from '../../../panels/elements/elements.js';
+import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
+import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
@@ -39,41 +44,41 @@ const UIStrings = {
    */
   settingsLink: 'AI assistance in Settings',
   /**
-   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   *@example {AI assistance in Settings} PH1
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
    */
   turnOnForStyles: 'Turn on {PH1} to get help with understanding CSS styles',
   /**
-   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   *@example {AI assistance in Settings} PH1
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
    */
   turnOnForStylesAndRequests: 'Turn on {PH1} to get help with styles and network requests',
   /**
-   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   *@example {AI assistance in Settings} PH1
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
    */
   turnOnForStylesRequestsAndFiles: 'Turn on {PH1} to get help with styles, network requests, and files',
   /**
-   *@description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
-   *@example {AI assistance in Settings} PH1
+   * @description Text for asking the user to turn the AI assistance feature in settings first before they are able to use it.
+   * @example {AI assistance in Settings} PH1
    */
   turnOnForStylesRequestsPerformanceAndFiles:
       'Turn on {PH1} to get help with styles, network requests, performance, and files',
   /**
-   *@description The footer disclaimer that links to more information about the AI feature.
+   * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
   /**
-   *@description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
+   * @description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
    */
   notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode',
 
   /**
-   *@description Label added to the text input to describe the context for screen readers. Not shown visibly on screen.
+   * @description Label added to the text input to describe the context for screen readers. Not shown visibly on screen.
    */
   inputTextAriaDescription: 'You can also use one of the suggested prompts above to start your conversation',
   /**
-   *@description Label added to the button that reveals the selected context item in DevTools
+   * @description Label added to the button that reveals the selected context item in DevTools
    */
   revealContextDescription: 'Reveal the selected context item in DevTools',
 } as const;
@@ -83,27 +88,27 @@ const UIStrings = {
 */
 const UIStringsNotTranslate = {
   /**
-   *@description Title for the send icon button.
+   * @description Title for the send icon button.
    */
   sendButtonTitle: 'Send',
   /**
-   *@description Title for the start new chat
+   * @description Title for the start new chat
    */
   startNewChat: 'Start new chat',
   /**
-   *@description Title for the cancel icon button.
+   * @description Title for the cancel icon button.
    */
   cancelButtonTitle: 'Cancel',
   /**
-   *@description Label for the "select an element" button.
+   * @description Label for the "select an element" button.
    */
   selectAnElement: 'Select an element',
   /**
-   *@description Label for the "select an element" button.
+   * @description Label for the "select an element" button.
    */
   noElementSelected: 'No element selected',
   /**
-   *@description Text for the empty state of the AI assistance panel.
+   * @description Text for the empty state of the AI assistance panel.
    */
   emptyStateText: 'How can I help you?',
   /**
@@ -116,7 +121,7 @@ const UIStringsNotTranslate = {
    */
   maxStepsError: 'Seems like I am stuck with the investigation. It would be better if you start over.',
   /**
-   *@description Displayed when the user stop the response
+   * @description Displayed when the user stop the response
    */
   stoppedResponse: 'You stopped this response',
   /**
@@ -132,75 +137,75 @@ const UIStringsNotTranslate = {
    */
   negativeSideEffectConfirmation: 'Cancel',
   /**
-   *@description The generic name of the AI agent (do not translate)
+   * @description The generic name of the AI agent (do not translate)
    */
   ai: 'AI',
   /**
-   *@description The fallback text when we can't find the user full name
+   * @description The fallback text when we can't find the user full name
    */
   you: 'You',
   /**
-   *@description The fallback text when a step has no title yet
+   * @description The fallback text when a step has no title yet
    */
   investigating: 'Investigating',
   /**
-   *@description Prefix to the title of each thinking step of a user action is required to continue
+   * @description Prefix to the title of each thinking step of a user action is required to continue
    */
   paused: 'Paused',
   /**
-   *@description Heading text for the code block that shows the executed code.
+   * @description Heading text for the code block that shows the executed code.
    */
   codeExecuted: 'Code executed',
   /**
-   *@description Heading text for the code block that shows the code to be executed after side effect confirmation.
+   * @description Heading text for the code block that shows the code to be executed after side effect confirmation.
    */
   codeToExecute: 'Code to execute',
   /**
-   *@description Heading text for the code block that shows the returned data.
+   * @description Heading text for the code block that shows the returned data.
    */
   dataReturned: 'Data returned',
   /**
-   *@description Aria label for the check mark icon to be read by screen reader
+   * @description Aria label for the check mark icon to be read by screen reader
    */
   completed: 'Completed',
   /**
-   *@description Aria label for the cancel icon to be read by screen reader
+   * @description Aria label for the cancel icon to be read by screen reader
    */
   canceled: 'Canceled',
   /**
-   *@description Text displayed when the chat input is disabled due to reading past conversation.
+   * @description Text displayed when the chat input is disabled due to reading past conversation.
    */
   pastConversation: 'You\'re viewing a past conversation.',
   /**
-   *@description Title for the take screenshot button.
+   * @description Title for the take screenshot button.
    */
   takeScreenshotButtonTitle: 'Take screenshot',
   /**
-   *@description Title for the remove image input button.
+   * @description Title for the remove image input button.
    */
   removeImageInputButtonTitle: 'Remove image input',
   /**
-   *@description Alt text for the image input (displayed in the chat messages) that has been sent to the model.
+   * @description Alt text for the image input (displayed in the chat messages) that has been sent to the model.
    */
   imageInputSentToTheModel: 'Image input sent to the model',
   /**
-   *@description Alt text for the account avatar.
+   * @description Alt text for the account avatar.
    */
   accountAvatar: 'Account avatar',
   /**
-   *@description Title for the x-link which wraps the image input rendered in chat messages.
+   * @description Title for the x-link which wraps the image input rendered in chat messages.
    */
   openImageInNewTab: 'Open image in a new tab',
   /**
-   *@description Alt text for image when it is not available.
+   * @description Alt text for image when it is not available.
    */
   imageUnavailable: 'Image unavailable',
   /**
-   *@description Title for the add image button.
+   * @description Title for the add image button.
    */
   addImageButtonTitle: 'Add image',
   /**
-   *@description Disclaimer text right after the chat input.
+   * @description Disclaimer text right after the chat input.
    */
   inputDisclaimerForEmptyState: 'This is an experimental AI feature and won\'t always get it right.',
 } as const;
@@ -273,6 +278,7 @@ export interface Props {
   onCancelClick: () => void;
   onContextClick: () => void;
   onNewConversation: () => void;
+  onCopyResponseClick: (message: ModelChatMessage) => void;
   onTakeScreenshot?: () => void;
   onRemoveImageInput?: () => void;
   onTextInputChange: (input: string) => void;
@@ -529,8 +535,9 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    // Go to a new line only when Shift + Enter is pressed.
-    if (ev.key === 'Enter' && !ev.shiftKey) {
+    // Go to a new line on Shift+Enter. On Enter, submit unless the
+    // user is in IME composition.
+    if (ev.key === 'Enter' && !ev.shiftKey && !ev.isComposing) {
       ev.preventDefault();
       if (!ev.target?.value || this.#props.imageInput?.isLoading) {
         return;
@@ -625,6 +632,7 @@ export class ChatView extends HTMLElement {
             onSuggestionClick: this.#handleSuggestionClick,
             onFeedbackSubmit: this.#props.onFeedbackSubmit,
             onMessageContainerRef: this.#handleMessageContainerRef,
+            onCopyResponseClick: this.#props.onCopyResponseClick,
           })}
           ${this.#props.isReadOnly
             ? renderReadOnlySection({
@@ -830,7 +838,7 @@ function renderStep({step, isLoading, markdownRenderer, isLast}: {
           ${renderTitle(step)}
           <devtools-icon
             class="arrow"
-            .name=${'chevron-down'}
+            name="chevron-down"
           ></devtools-icon>
         </div>
       </summary>
@@ -911,6 +919,7 @@ function renderChatMessage({
   markdownRenderer,
   onSuggestionClick,
   onFeedbackSubmit,
+  onCopyResponseClick,
 }: {
   message: ChatMessage,
   isLoading: boolean,
@@ -921,13 +930,14 @@ function renderChatMessage({
   markdownRenderer: MarkdownRendererWithCodeBlock,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
+  onCopyResponseClick: (message: ModelChatMessage) => void,
 }): Lit.TemplateResult {
   if (message.entity === ChatMessageEntity.USER) {
     const name = userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
     const image = userInfo.accountImage ?
         html`<img src="data:image/png;base64, ${userInfo.accountImage}" alt=${UIStringsNotTranslate.accountAvatar} />` :
         html`<devtools-icon
-          .name=${'profile'}
+          name="profile"
         ></devtools-icon>`;
     const imageInput = message.imageInput && 'inlineData' in message.imageInput ?
         renderImageChatMessage(message.imageInput.inlineData) :
@@ -989,6 +999,7 @@ function renderChatMessage({
             },
             suggestions: (isLast && !isReadOnly) ? message.suggestions : undefined,
             onSuggestionClick,
+            onCopyResponseClick: () => onCopyResponseClick(message),
             canShowFeedbackForm,
           })}></devtools-widget>`
       }
@@ -1016,6 +1027,43 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
   // clang-format on
 }
 
+function renderContextIcon(context: AiAssistanceModel.ConversationContext<unknown>|null): Lit.LitTemplate {
+  if (!context) {
+    return Lit.nothing;
+  }
+  const item = context.getItem();
+  // FIXME: move this to presenter once PanelUtils are declarative. The instance
+  // checking should be in the presenter and the rendering in the view function.
+  if (item instanceof SDK.NetworkRequest.NetworkRequest) {
+    return PanelUtils.PanelUtils.getIconForNetworkRequest(item);
+  }
+  if (item instanceof Workspace.UISourceCode.UISourceCode) {
+    return PanelUtils.PanelUtils.getIconForSourceFile(item);
+  }
+  if (item instanceof TimelineUtils.AIContext.AgentFocus) {
+    return html`<devtools-icon name="performance" title="Performance"></devtools-icon>`;
+  }
+  if (item instanceof SDK.DOMModel.DOMNode) {
+    return Lit.nothing;
+  }
+  return Lit.nothing;
+}
+
+function renderContextTitle(
+    context: AiAssistanceModel.ConversationContext<unknown>, disabled: boolean): Lit.TemplateResult|string {
+  const item = context.getItem();
+  if (item instanceof SDK.DOMModel.DOMNode) {
+    // FIXME: move this to the model code.
+    const hiddenClassList =
+        item.classNames().filter(className => className.startsWith(AiAssistanceModel.AI_ASSISTANCE_CSS_CLASS_NAME));
+    return html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ElementsPanel.DOMLinkifier.DOMNodeLink, {
+      node: item,
+      options: {hiddenClassList, disabled}
+    })}></devtools-widget>`;
+  }
+  return context.getTitle();
+}
+
 function renderSelection({
   selectedContext,
   inspectElementToggled,
@@ -1083,8 +1131,8 @@ function renderSelection({
       @keydown=${handleKeyDown}
       aria-description=${i18nString(UIStrings.revealContextDescription)}
     >
-      ${selectedContext?.getIcon() ? html`${selectedContext?.getIcon()}` : Lit.nothing}
-      <span class="title">${selectedContext?.getTitle({ disabled: isTextInputDisabled }) ?? lockedString(UIStringsNotTranslate.noElementSelected)}</span>
+      ${renderContextIcon(selectedContext)}
+      <span class="title">${selectedContext ? renderContextTitle(selectedContext, isTextInputDisabled) : lockedString(UIStringsNotTranslate.noElementSelected)}</span>
     </div>
   </div>`;
   // clang-format on
@@ -1101,6 +1149,7 @@ function renderMessages({
   changeManager,
   onSuggestionClick,
   onFeedbackSubmit,
+  onCopyResponseClick,
   onMessageContainerRef,
 }: {
   messages: ChatMessage[],
@@ -1111,6 +1160,7 @@ function renderMessages({
   markdownRenderer: MarkdownRendererWithCodeBlock,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
+  onCopyResponseClick: (message: ModelChatMessage) => void,
   onMessageContainerRef: (el: Element|undefined) => void,
   changeSummary?: string,
   changeManager?: AiAssistanceModel.ChangeManager,
@@ -1144,6 +1194,7 @@ function renderMessages({
           markdownRenderer,
           onSuggestionClick,
           onFeedbackSubmit,
+          onCopyResponseClick,
         }),
       )}
       ${renderPatchWidget()}
@@ -1482,7 +1533,7 @@ function renderChatInput({
         @keydown=${onTextAreaKeyDown}
         @input=${(event: KeyboardEvent) => onTextInputChange((event.target as HTMLInputElement).value)}
         placeholder=${inputPlaceholder}
-        jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
+        jslog=${VisualLogging.textField('query').track({change: true, keydown: 'Enter'})}
         aria-description=${i18nString(UIStrings.inputTextAriaDescription)}
       ></textarea>
       <div class="chat-input-actions">
@@ -1567,7 +1618,7 @@ function renderDisabledState(contents: Lit.TemplateResult): Lit.TemplateResult {
       <div class="disabled-view">
         <div class="disabled-view-icon-container">
           <devtools-icon
-            .name=${'smart-assistant'}
+            name="smart-assistant"
           ></devtools-icon>
         </div>
         <div>
@@ -1595,6 +1646,7 @@ function renderMainContents({
   changeManager,
   onSuggestionClick,
   onFeedbackSubmit,
+  onCopyResponseClick,
   onMessageContainerRef,
 }: {
   state: State,
@@ -1610,6 +1662,7 @@ function renderMainContents({
   changeManager: AiAssistanceModel.ChangeManager,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
+  onCopyResponseClick: (message: ModelChatMessage) => void,
   onMessageContainerRef: (el: Element|undefined) => void,
   conversationType?: AiAssistanceModel.ConversationType,
   changeSummary?: string,
@@ -1639,7 +1692,7 @@ function renderMainContents({
       onSuggestionClick,
       onFeedbackSubmit,
       onMessageContainerRef,
-
+      onCopyResponseClick
     });
   }
 

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

@@ -17,17 +17,13 @@ import exploreWidgetStyles from './exploreWidget.css.js';
 */
 const UIStringsNotTranslate = {
   /**
-   *@description Text for the empty state of the AI assistance panel when there is no agent selected.
+   * @description Text for the empty state of the AI assistance panel when there is no agent selected.
    */
   Explore: 'Explore AI assistance',
   /**
-   *@description The footer disclaimer that links to more information about the AI feature.
+   * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
-  /**
-   *@description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForEmptyState: 'This is an experimental AI feature and won\'t always get it right.',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -82,6 +78,13 @@ export const DEFAULT_VIEW = (
           <p>
             To chat about an item, right-click and select${' '}
             <strong>Ask AI</strong>.
+            <button
+              class="link"
+              role="link"
+              jslog=${VisualLogging.link('open-ai-settings').track({click: true})}
+              @click=${() => { void UI.ViewManager.ViewManager.instance().showView('chrome-ai'); }}
+            >${lockedString(UIStringsNotTranslate.learnAbout)}
+            </button>
           </p>
         </div>
         <div class="content">
@@ -100,23 +103,6 @@ export const DEFAULT_VIEW = (
           )}
         </div>
       </div>
-      <footer class="ai-assistance-explore-footer" jslog=${VisualLogging.section('footer')}>
-        <p>
-          ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
-          <button
-            class="link"
-            role="link"
-            jslog=${VisualLogging.link('open-ai-settings').track({
-              click: true,
-            })}
-            @click=${() => {
-              void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-            }}
-          >
-            ${lockedString(UIStringsNotTranslate.learnAbout)}
-          </button>
-        </p>
-      </footer>
     `,
     target,
     { host: target },
@@ -129,7 +115,7 @@ export type View = typeof DEFAULT_VIEW;
 export class ExploreWidget extends UI.Widget.Widget {
   view: View;
   constructor(element?: HTMLElement, view?: View) {
-    super(false, false, element);
+    super(element);
     this.view = view ?? DEFAULT_VIEW;
   }
 

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

@@ -66,6 +66,10 @@ const UIStringsNotTranslate = {
    * @description The title of the button for scrolling to see previous suggestions
    */
   scrollToPrevious: 'Scroll to previous suggestions',
+  /**
+   * @description The title of the button that copies the AI-generated response to the clipboard.
+   */
+  copyResponse: 'Copy response',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -78,7 +82,11 @@ export interface RatingViewInput {
   currentRating?: Host.AidaClient.Rating;
   onRatingClick: (rating: Host.AidaClient.Rating) => void;
   showRateButtons: boolean;
+}
+
+export interface ActionViewInput {
   onReportClick: () => void;
+  onCopyResponseClick: () => void;
 }
 
 export interface SuggestionViewInput {
@@ -96,7 +104,7 @@ export interface FeedbackFormViewInput {
   isSubmitButtonDisabled: boolean;
 }
 
-export type UserActionRowViewInput = RatingViewInput&SuggestionViewInput&FeedbackFormViewInput;
+export type UserActionRowViewInput = RatingViewInput&ActionViewInput&SuggestionViewInput&FeedbackFormViewInput;
 
 export interface ViewOutput {
   suggestionsLeftScrollButtonContainer?: Element;
@@ -108,6 +116,7 @@ export interface UserActionRowWidgetParams {
   showRateButtons: boolean;
   onFeedbackSubmit: (rate: Host.AidaClient.Rating, feedback?: string) => void;
   suggestions?: [string, ...string[]];
+  onCopyResponseClick: () => void;
   onSuggestionClick: (suggestion: string) => void;
   canShowFeedbackForm: boolean;
 }
@@ -118,7 +127,7 @@ export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput,
     <style>${Input.textInputStyles}</style>
     <style>${userActionRowStyles}</style>
     <div class="ai-assistance-feedback-row">
-      <div class="rate-buttons">
+      <div class="action-buttons">
         ${input.showRateButtons ? html`
           <devtools-button
             .data=${{
@@ -160,6 +169,17 @@ export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput,
           }
           @click=${input.onReportClick}
         ></devtools-button>
+        <div class="vertical-separator"></div>
+          <devtools-button
+            .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              size: Buttons.Button.Size.SMALL,
+              title: lockedString(UIStringsNotTranslate.copyResponse),
+              iconName: 'copy',
+              jslogContext: 'copy-ai-response',
+            } as Buttons.Button.ButtonData}
+            aria-label=${lockedString(UIStringsNotTranslate.copyResponse)}
+            @click=${input.onCopyResponseClick}></devtools-button>
       </div>
       ${input.suggestions ? html`<div class="suggestions-container">
         <div class="scroll-button-container left hidden" ${ref(element => { output.suggestionsLeftScrollButtonContainer = element; } )}>
@@ -267,6 +287,7 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
   showRateButtons = false;
   onFeedbackSubmit: (rate: Host.AidaClient.Rating, feedback?: string) => void = () => {};
   suggestions: [string, ...string[]]|undefined;
+  onCopyResponseClick: () => void = () => {};
   onSuggestionClick: (suggestion: string) => void = () => {};
   canShowFeedbackForm = false;
 
@@ -282,7 +303,7 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
   #viewOutput: ViewOutput = {};
 
   constructor(element?: HTMLElement, view?: View) {
-    super(false, false, element);
+    super(element);
     this.#view = view ?? DEFAULT_VIEW;
   }
 
@@ -302,6 +323,7 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
           onReportClick: () => UI.UIUtils.openInNewTab(REPORT_URL),
+          onCopyResponseClick: this.onCopyResponseClick,
           scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
           onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),
           onSubmit: this.#handleSubmit.bind(this),

package/front_end/panels/ai_assistance/components/chatView.css

@@ -819,11 +819,6 @@ main {
     }
   }
 
-  /* TODO(b/412621009): Remove this once the bug is fixed on the VE logging side */
-  &:not(.saved-to-disk, &[open]) > *:not(summary) {
-    display: none;
-  }
-
   &:not(.saved-to-disk, &[open]):hover::after {
     content: '';
     height: 100%;
@@ -859,10 +854,6 @@ main {
     align-items: center;
     gap: var(--sys-size-3);
     color: var(--sys-color-error);
-
-    devtools-icon {
-      color: var(--sys-color-error);
-    }
   }
 
   .footer {