chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -100,10 +100,6 @@ const UIStrings = {
    * @description AI assistance UI text for deleting all local history entries.
    */
   clearChatHistory: 'Clear local chats',
-  /**
-   * @description AI assistance UI text for the export conversation button.
-   */
-  exportConversation: 'Export conversation',
   /**
    * @description AI assistance UI text explaining that the user has no past conversations.
    */
@@ -190,56 +186,6 @@ const UIStringsNotTranslate = {
    * @description Placeholder text for the chat UI input when AIAgent2 is enabled.
    */
   inputPlaceholderForV2: 'Ask a question (AIAgent2 enabled)',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForStyling:
-      'Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForStylingEnterpriseNoLogging:
-      'Chat messages and any data the inspected page can access via Web APIs are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForNetwork:
-      'Chat messages and the selected network request are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForNetworkEnterpriseNoLogging:
-      'Chat messages and the selected network request are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForFile:
-      'Chat messages and the selected file are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForFileEnterpriseNoLogging:
-      'Chat messages and the selected file are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForPerformance:
-      'Chat messages and trace data from your performance trace are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForPerformanceEnterpriseNoLogging:
-      'Chat messages and data from your performance trace are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForNoContext:
-      'Chat messages, any data the inspected page can see using Web APIs, and the items you select such as files, network requests, and performance traces are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForNoContextEnterpriseNoLogging:
-      'Chat messages, any data the inspected page can see using Web APIs, and the items you select such as files, network requests, and performance traces are sent to Google. This data will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
    * @description Placeholder text for the chat UI input.
    */
@@ -251,22 +197,12 @@ const UIStringsNotTranslate = {
   /**
    * @description Disclaimer text right after the chat input.
    */
-  inputDisclaimerForAccessibility:
-      'Chat messages and the selected Lighthouse report are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input.
-   */
-  inputDisclaimerForAccessibilityEnterpriseNoLogging:
-      'Chat messages and the selected Lighthouse report are sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
-  /**
-   * @description Disclaimer text right after the chat input when V2 is enabled.
-   */
-  inputDisclaimerV2:
+  inputDisclaimer:
       'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won’t always get it right.',
   /**
-   * @description Disclaimer text right after the chat input when V2 is enabled and enterprise logging is off.
+   * @description Disclaimer text right after the chat input when enterprise logging is off.
    */
-  inputDisclaimerEnterpriseNoLoggingV2:
+  inputDisclaimerEnterpriseNoLogging:
       'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
 } as const;
 
@@ -442,7 +378,6 @@ export interface PanelViewOutput {
 type View = (input: ViewInput, output: PanelViewOutput, target: HTMLElement) => void;
 
 function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
-  const hasAiV2 = Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
   // clang-format off
   return html`
     <div class="toolbar-container" role="toolbar" jslog=${VisualLogging.toolbar()}>
@@ -472,19 +407,7 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
               .jslogContext=${'freestyler.delete'}
               .variant=${Buttons.Button.Variant.TOOLBAR}
               @click=${input.onDeleteClick}>
-          </devtools-button>
-          ${hasAiV2 ? Lit.nothing : html`
-            <devtools-button
-              title=${i18nString(UIStrings.exportConversation)}
-              aria-label=${i18nString(UIStrings.exportConversation)}
-              .iconName=${'download'}
-              .disabled=${input.isLoading}
-              .jslogContext=${'export-ai-conversation'}
-              .variant=${Buttons.Button.Variant.TOOLBAR}
-              @click=${input.onExportConversationClick}>
-            </devtools-button>
-            `
-          }` : Lit.nothing}
+          </devtools-button>` : Lit.nothing}
       </devtools-toolbar>
       <devtools-toolbar class="freestyler-right-toolbar" role="presentation">
         <devtools-link
@@ -540,51 +463,43 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     }
   }
 
-  if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
-
-    const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.props.walkthrough.isExpanded;
-    /**
-     * We want to mark the walkthrough as loading only if it's showing the last
-     * message. Otherwise, a previous walkthrough will show as loading if we
-     * rely only on the isLoading flag.
-     */
-    let walkthroughIsForLastMessage = false;
-    if(input.state === ViewState.CHAT_VIEW) {
-      const lastMessage = input.props.messages.at(-1);
-      if(lastMessage && input.props.walkthrough.activeSidebarMessage?.id === lastMessage.id) {
-        walkthroughIsForLastMessage = true;
-      }
+  const shouldShowWalkthrough = input.state === ViewState.CHAT_VIEW && input.props.walkthrough.isExpanded;
+  /**
+   * We want to mark the walkthrough as loading only if it's showing the last
+   * message. Otherwise, a previous walkthrough will show as loading if we
+   * rely only on the isLoading flag.
+   */
+  let walkthroughIsForLastMessage = false;
+  if(input.state === ViewState.CHAT_VIEW) {
+    const lastMessage = input.props.messages.at(-1);
+    if(lastMessage && input.props.walkthrough.activeSidebarMessage?.id === lastMessage.id) {
+      walkthroughIsForLastMessage = true;
     }
-
-    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.props.walkthrough.isInlined ? 'visible' : 'hidden'}
-          sidebar-initial-size=${WALKTHROUGH_SIDEBAR_INITIAL_WIDTH}
-        >
-          <div slot="main" class="main-view">
-            ${renderState()}
-          </div>
-          ${shouldShowWalkthrough ? html`
-            <devtools-widget slot="sidebar" ${widget(WalkthroughView, {
-              message: input.props.walkthrough.activeSidebarMessage,
-              isLoading: input.props.isLoading && walkthroughIsForLastMessage,
-              markdownRenderer: input.props.markdownRenderer,
-              onToggle: input.props.walkthrough.onToggle,
-            })}></devtools-widget>` : Lit.nothing}
-        </devtools-split-view>
-      </div>
-    `, target);
-  } else {
-    Lit.render(html`
-      ${toolbarView(input)}
-      <div class="ai-assistance-view-container">${renderState()}</div>
-    `, target);
   }
+
+  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.props.walkthrough.isInlined ? 'visible' : 'hidden'}
+        sidebar-initial-size=${WALKTHROUGH_SIDEBAR_INITIAL_WIDTH}
+      >
+        <div slot="main" class="main-view">
+          ${renderState()}
+        </div>
+        ${shouldShowWalkthrough ? html`
+          <devtools-widget slot="sidebar" ${widget(WalkthroughView, {
+            message: input.props.walkthrough.activeSidebarMessage,
+            isLoading: input.props.isLoading && walkthroughIsForLastMessage,
+            markdownRenderer: input.props.markdownRenderer,
+            onToggle: input.props.walkthrough.onToggle,
+          })}></devtools-widget>` : Lit.nothing}
+      </devtools-split-view>
+    </div>
+  `, target);
   // clang-format on
 }
 
@@ -709,6 +624,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     activeSidebarMessage: null,
     inlineExpandedMessages: [],
   };
+  #textInputValue = '';
 
   constructor(private view: View = defaultView, {aidaClient, aidaAvailability}: {
     aidaClient: Host.AidaClient.AidaClient,
@@ -725,8 +641,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#toggleSearchElementAction =
           UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-element-search');
     }
-    AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().addEventListener(
-        AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
   }
 
   #getToolbarInput(): ToolbarViewInput {
@@ -795,6 +709,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           emptyStateSuggestions,
           inputPlaceholder: this.#getChatInputPlaceholder(),
           disclaimerText: this.#getDisclaimerText(),
+          textInputValue: this.#textInputValue,
+          onTextChange: (text: string) => {
+            this.#textInputValue = text;
+          },
           onExportConversation: this.#onExportConversationClick.bind(this),
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
@@ -816,10 +734,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               void this.#startConversation(text, imageInput, multimodalInputType);
             };
 
-            const isAIV2Enabled = Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled;
             const seenSetting =
                 Common.Settings.Settings.instance().moduleSetting('ai-assistance-v2-opt-in-change-dialog-seen');
-            if (isAIV2Enabled && !seenSetting.get()) {
+            if (!seenSetting.get()) {
               OptInChangeDialog.show({
                 onGotIt: () => {
                   seenSetting.set(true);
@@ -864,9 +781,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   // Responsive logic for Walkthrough
   override onResize(): void {
     super.onResize();
-    if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
-      this.#updateWalkthroughResponsiveness();
-    }
+    this.#updateWalkthroughResponsiveness();
   }
 
   #updateWalkthroughResponsiveness(): void {
@@ -1144,6 +1059,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         createStorageContext(UI.Context.Context.instance().flavor(AiAssistanceModel.StorageItem.StorageItem));
     this.#updateConversationState(this.#conversation);
 
+    AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().addEventListener(
+        AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
     this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
@@ -1188,6 +1105,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   override willHide(): void {
     super.willHide();
+    AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().removeEventListener(
+        AiAssistanceModel.AiHistoryStorage.Events.HISTORY_DELETED, this.#onHistoryDeleted, this);
     this.#aiAssistanceEnabledSetting?.removeChangeListener(this.requestUpdate, this);
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#handleAidaAvailabilityChange);
@@ -1271,12 +1190,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       };
 
   #handleNetworkRequestFlavorChange =
-      (ev: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest>): void => {
+      (ev: Common.EventTarget.EventTargetEvent<SDK.NetworkRequest.NetworkRequest|null>): void => {
         if (this.#selectedRequest?.getItem() === ev.data) {
           return;
         }
 
-        if (Boolean(ev.data)) {
+        if (ev.data) {
           const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
           this.#selectedRequest = new AiAssistanceModel.RequestContext.RequestContext(ev.data, calculator);
         } else {
@@ -1379,14 +1298,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return i18nString(UIStrings.followTheSteps);
     }
 
-    if (Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled) {
-      return lockedString(UIStringsNotTranslate.inputPlaceholderForV2);
-    }
-
     if (this.#conversation && this.#conversation.isBlockedByOrigin) {
       return lockedString(UIStringsNotTranslate.crossOriginError);
     }
 
+    if (Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled) {
+      return lockedString(UIStringsNotTranslate.inputPlaceholderForV2);
+    }
+
     switch (this.#conversation.type) {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING:
         return this.#conversation.selectedContext ?
@@ -1434,51 +1353,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const loggingEnabled = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue !==
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
 
-    if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
-      if (loggingEnabled) {
-        return lockedString(UIStringsNotTranslate.inputDisclaimerV2);
-      }
-      return lockedString(UIStringsNotTranslate.inputDisclaimerEnterpriseNoLoggingV2);
-    }
-
-    switch (this.#conversation.type) {
-      case AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING:
-        if (loggingEnabled) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForStyling);
-        }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForStylingEnterpriseNoLogging);
-      case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
-        if (loggingEnabled) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForFile);
-        }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForFileEnterpriseNoLogging);
-      case AiAssistanceModel.AiHistoryStorage.ConversationType.NETWORK:
-        if (loggingEnabled) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForNetwork);
-        }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForNetworkEnterpriseNoLogging);
-
-      // It is deliberate that both Performance agents use the same disclaimer
-      // text and this has been approved by Privacy.
-      case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE:
-        if (loggingEnabled) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformance);
-        }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForPerformanceEnterpriseNoLogging);
-
-      case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
-        if (loggingEnabled) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibility);
-        }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForAccessibilityEnterpriseNoLogging);
-
-      case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE:
-      case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
-        if (loggingEnabled) {
-          return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContext);
-        }
-        return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContextEnterpriseNoLogging);
+    if (loggingEnabled) {
+      return lockedString(UIStringsNotTranslate.inputDisclaimer);
     }
+    return lockedString(UIStringsNotTranslate.inputDisclaimerEnterpriseNoLogging);
   }
 
   #handleFeedbackSubmit(rpcId: Host.AidaClient.RpcGlobalId, rating: Host.AidaClient.Rating, feedback?: string): void {
@@ -1713,6 +1591,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #handleNewChatRequest(): void {
+    this.#textInputValue = '';
     this.#updateConversationState();
     this.#resetWalkthrough();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.newChatCreated));
@@ -2000,7 +1879,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               systemMessage.parts.push(newPart);
             }
 
-            if (data.widgets && Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
+            if (data.widgets) {
               systemMessage.parts.push({
                 type: 'widget',
                 widgets: data.widgets,

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

@@ -158,6 +158,7 @@ export interface ViewInput {
   imageInput?: ImageInputData;
   uploadImageInputEnabled: boolean;
   isReadOnly: boolean;
+  textInputValue: string;
   textAreaRef: Lit.Directives.Ref<HTMLTextAreaElement>;
 
   onContextClick: () => void;
@@ -302,6 +303,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
               .disabled=${input.isTextInputDisabled}
               wrap="hard"
               maxlength="10000"
+              .value=${input.textInputValue}
               @keydown=${input.onTextAreaKeyDown}
               @paste=${input.onImagePaste}
               @dragover=${input.onImageDragOver}
@@ -523,6 +525,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   multimodalInputEnabled = false;
   uploadImageInputEnabled = false;
   isReadOnly = false;
+  textInputValue = '';
 
   #textAreaRef = createRef<HTMLTextAreaElement>();
   #imageInput?: ImageInputData;
@@ -542,21 +545,30 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   setInputValue(text: string): void {
     if (this.#textAreaRef.value) {
       const maxLength = this.#textAreaRef.value.maxLength;
-      const truncatedText = (maxLength >= 0) ? text.substring(0, maxLength) : text;
+      const truncatedText = maxLength >= 0 ? text.substring(0, maxLength) : text;
       this.#textAreaRef.value.value = truncatedText;
       // Place the cursor at the end of the new value.
-      this.#textAreaRef.value.setSelectionRange(truncatedText.length, truncatedText.length);
+      this.#textAreaRef.value.setSelectionRange(
+          truncatedText.length,
+          truncatedText.length,
+      );
+      this.textInputValue = truncatedText;
+      this.onTextChange(truncatedText);
     }
     this.performUpdate();
   }
 
   #isTextInputEmpty(): boolean {
-    return !this.#textAreaRef.value?.value?.trim();
+    const text = this.#textAreaRef?.value?.value ?? this.textInputValue;
+    return !text.trim();
   }
 
-  onTextSubmit:
-      (text: string, imageInput?: Host.AidaClient.Part,
-       multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => void = () => {};
+  onTextSubmit: (
+      text: string,
+      imageInput?: Host.AidaClient.Part,
+      multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType,
+      ) => void = () => {};
+  onTextChange: (text: string) => void = () => {};
   onContextClick = (): void => {};
   onInspectElementClick = (): void => {};
   onCancelClick = (): void => {};
@@ -751,12 +763,15 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           imageInput: this.#imageInput,
           uploadImageInputEnabled: this.uploadImageInputEnabled,
           isReadOnly: this.isReadOnly,
+          textInputValue: this.textInputValue,
           textAreaRef: this.#textAreaRef,
           onContextClick: this.onContextClick,
           onInspectElementClick: this.onInspectElementClick,
           onImagePaste: this.#handleImagePaste,
           onNewConversation: this.onNewConversation,
-          onTextInputChange: () => {
+          onTextInputChange: (text: string) => {
+            this.textInputValue = text;
+            this.onTextChange(text);
             this.requestUpdate();
           },
           onTakeScreenshot: this.#handleTakeScreenshot.bind(this),
@@ -770,7 +785,9 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           onContextRemoved: this.onContextRemoved,
           onContextAdd: this.onContextAdd,
         },
-        undefined, this.contentElement);
+        undefined,
+        this.contentElement,
+    );
   }
 
   focusTextInput(): void {