[AiAssistance] Render "change summary" after messages and update styling

The remaining TODOs are:
* Adding the disclaimer icon next to the "stage to workspace" button.
* Updating project selection texts.
* Handling loading state as described in the mocks.

Bug: 396064984
Change-Id: I7ba67e014315855454474aa35807c32f288293be
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6257570
Auto-Submit: Ergün Erdoğmuş <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: ergunsh

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -651,7 +651,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onCancelCrossOriginChat: this.#blockedByCrossOrigin && this.#previousSameOriginContext ?
               this.#handleCrossOriginChatCancellation.bind(this) :
               undefined,
-          onStageToWorkspace: this.#onStageToWorkspace.bind(this)
+          onApplyToWorkspace: this.#onApplyToWorkspace.bind(this)
         },
         this.#viewOutput, this.#contentContainer);
   }
@@ -909,7 +909,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     UI.ARIAUtils.alert(lockedString(UIStringsNotTranslate.answerReady));
   }
 
-  async #onStageToWorkspace(): Promise<void> {
+  async #onApplyToWorkspace(): Promise<void> {
     if (!this.#project) {
       throw new Error('Project does not exist');
     }

front_end/panels/ai_assistance/components/ChatView.ts

@@ -263,7 +263,11 @@ const UIStringsNotTranslate = {
   /**
    *@description Text displayed for showing change summary view.
    */
-  changeSummary: 'Change summary',
+  changeSummary: 'Changes summary',
+  /**
+   *@description Button text for staging changes to workspace.
+   */
+  applyToWorkspace: 'Apply to workspace',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/ChatView.ts', UIStrings);
@@ -336,7 +340,7 @@ export interface Props {
   patchSuggestion?: string;
   patchSuggestionLoading?: boolean;
   projectName?: string;
-  onStageToWorkspace?: () => void;
+  onApplyToWorkspace?: () => void;
 }
 
 export class ChatView extends HTMLElement {
@@ -710,11 +714,16 @@ export class ChatView extends HTMLElement {
             userInfo: this.#props.userInfo,
             markdownRenderer: this.#markdownRenderer,
             agentType: this.#props.agentType,
+            changeSummary: this.#props.changeSummary,
+            patchSuggestion: this.#props.patchSuggestion,
+            patchSuggestionLoading: this.#props.patchSuggestionLoading,
+            projectName: this.#props.projectName,
             getUnavailableAidaAvailabilityContents: this.#getUnavailableAidaAvailabilityContents,
             onSuggestionClick: this.#handleSuggestionClick,
             onFeedbackSubmit: this.#props.onFeedbackSubmit,
             onLastAnswerMarkdownViewRef: this.#handleLastAnswerMarkdownViewRef,
             onMessageContainerRef: this.#handleMessageContainerRef,
+            onApplyToWorkspace: this.#props.onApplyToWorkspace,
           })}
           ${this.#props.isReadOnly
             ? renderReadOnlySection({
@@ -730,7 +739,6 @@ export class ChatView extends HTMLElement {
                 selectedContext: this.#props.selectedContext,
                 inspectElementToggled: this.#props.inspectElementToggled,
                 agentType: this.#props.agentType,
-                changeSummary: this.#props.changeSummary,
                 onContextClick: this.#props.onContextClick,
                 onInspectElementClick: this.#props.onInspectElementClick,
                 onSubmit: this.#handleSubmit,
@@ -767,47 +775,47 @@ function renderChangeSummary({
   patchSuggestion,
   patchSuggestionLoading,
   projectName,
-  onStageToWorkspace,
+  onApplyToWorkspace,
 }: {
-  changeSummary?: string,
+  changeSummary: string,
   patchSuggestion?: string,
   patchSuggestionLoading?: boolean,
   projectName?: string,
-  onStageToWorkspace?: () => void,
+  onApplyToWorkspace?: () => void,
 }): Lit.LitTemplate {
-  if (!changeSummary) {
-    return Lit.nothing;
-  }
-
+  // clang-format off
   return html`<details class="change-summary">
       <summary>
-        <devtools-icon class="difference-icon" .name=${'difference'}
+        <devtools-icon class="difference-icon" .name=${'pen-spark'}
         ></devtools-icon>
         <span class="header-text">
           ${lockedString(UIStringsNotTranslate.changeSummary)}
         </span>
         <devtools-icon
           class="arrow"
-          .name=${'chevron-up'}
+          .name=${'chevron-down'}
         ></devtools-icon>
       </summary>
       <devtools-code-block
         .code=${changeSummary}
         .codeLang=${'css'}
-        .displayNotice=${false}
+        .displayNotice=${true}
       ></devtools-code-block>
-      <div class="patch-tmp-message">
-          ${(patchSuggestion ? '\nI suggest changing these files\n' + patchSuggestion : '')}
-        </div>
-        <div class="workspace">
-          <devtools-button
-            @click=${onStageToWorkspace}
-            .jslogContext=${'stage-to-workspace'}
-            .variant=${Buttons.Button.Variant.PRIMARY}>${
-  !patchSuggestionLoading ? 'Stage to workspace' : 'Loading...'}</devtools-button>
-          <div>Selected folder: ${projectName}</div>
-        </div>
+      <div class="workspace">
+        <devtools-button
+          class='apply-to-workspace'
+          @click=${onApplyToWorkspace}
+          .jslogContext=${'stage-to-workspace'}
+          .variant=${Buttons.Button.Variant.OUTLINED}>
+            ${!patchSuggestionLoading ? lockedString(UIStringsNotTranslate.applyToWorkspace) : 'Loading...'}
+        </devtools-button>
+        <div>Selected folder: ${projectName}</div>
+      </div>
+      ${patchSuggestion ? html`<div class="patch-tmp-message">
+        I suggest changing these files ${patchSuggestion}
+      </div>` : Lit.nothing}
     </details>`;
+  // clang-format on
 }
 
 function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownRendererWithCodeBlock, {animate, ref: refFn}: {
@@ -1217,21 +1225,32 @@ function renderMessages({
   canShowFeedbackForm,
   userInfo,
   markdownRenderer,
+  changeSummary,
+  patchSuggestion,
+  patchSuggestionLoading,
+  projectName,
   onSuggestionClick,
   onFeedbackSubmit,
   onLastAnswerMarkdownViewRef,
   onMessageContainerRef,
+  onApplyToWorkspace,
 }: {
   messages: ChatMessage[],
   isLoading: boolean,
   isReadOnly: boolean,
   canShowFeedbackForm: boolean,
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
   markdownRenderer: MarkdownRendererWithCodeBlock,
-  onSuggestionClick: (suggestion: string) => void,
-  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
-  onLastAnswerMarkdownViewRef: (el: Element|undefined) => void,
-  onMessageContainerRef: (el: Element|undefined) => void,
+  changeSummary?: string,
+  patchSuggestion?: string,
+  patchSuggestionLoading?: boolean,
+  projectName?: string,
+  onApplyToWorkspace?: () => void,
+                    onSuggestionClick: (suggestion: string) => void,
+                    onFeedbackSubmit:
+                        (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
+                    onLastAnswerMarkdownViewRef: (el: Element|undefined) => void,
+                    onMessageContainerRef: (el: Element|undefined) => void,
 }): Lit.TemplateResult {
   // clang-format off
   return html`
@@ -1250,6 +1269,13 @@ function renderMessages({
           onLastAnswerMarkdownViewRef,
         }),
       )}
+      ${(changeSummary && !isLoading) ? renderChangeSummary({
+          changeSummary,
+          patchSuggestion,
+          patchSuggestionLoading,
+          projectName,
+          onApplyToWorkspace,
+        }) : Lit.nothing}
     </div>
   `;
   // clang-format on
@@ -1403,18 +1429,13 @@ function renderChatInput({
   selectedContext,
   inspectElementToggled,
   agentType,
-  changeSummary,
-  patchSuggestion,
-  patchSuggestionLoading,
-  projectName,
   onContextClick,
   onInspectElementClick,
   onSubmit,
   onTextAreaKeyDown,
   onCancel,
   onNewConversation,
   onCancelCrossOriginChat,
-  onStageToWorkspace,
 }: {
   isLoading: boolean,
   blockedByCrossOrigin: boolean,
@@ -1424,18 +1445,13 @@ function renderChatInput({
   selectedContext: ConversationContext<unknown> | null,
   inspectElementToggled: boolean,
   agentType?: AgentType,
-  changeSummary?: string,
-  patchSuggestion?: string,
-  patchSuggestionLoading?: boolean,
-  projectName?: string,
   onContextClick: () => void | Promise<void>,
   onInspectElementClick: () => void,
   onSubmit: (ev: SubmitEvent) => void,
   onTextAreaKeyDown: (ev: KeyboardEvent) => void,
   onCancel: (ev: SubmitEvent) => void,
   onNewConversation: () => void,
   onCancelCrossOriginChat?: () => void,
-  onStageToWorkspace?: () => void,
 }): Lit.LitTemplate {
   if (!agentType) {
     return Lit.nothing;
@@ -1463,13 +1479,6 @@ function renderChatInput({
             onInspectElementClick,
           })}
         </div>
-        ${renderChangeSummary({
-          changeSummary,
-          patchSuggestion,
-          patchSuggestionLoading,
-          projectName,
-          onStageToWorkspace,
-        })}
       </div>
     ` : Lit.nothing}
     <div class="chat-input-container">
@@ -1599,11 +1608,16 @@ function renderMainContents({
   userInfo,
   markdownRenderer,
   agentType,
+  changeSummary,
+  patchSuggestion,
+  patchSuggestionLoading,
+  projectName,
   getUnavailableAidaAvailabilityContents,
   onSuggestionClick,
   onFeedbackSubmit,
   onLastAnswerMarkdownViewRef,
   onMessageContainerRef,
+  onApplyToWorkspace,
 }: {
   state: State,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
@@ -1617,15 +1631,20 @@ function renderMainContents({
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
   markdownRenderer: MarkdownRendererWithCodeBlock,
   agentType?: AgentType,
-           getUnavailableAidaAvailabilityContents:
-               (aidaAvailability: Exclude<
-                   Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>) =>
-                   Lit.TemplateResult,
-           onSuggestionClick: (suggestion: string) => void,
-           onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) =>
-               void,
-           onLastAnswerMarkdownViewRef: (el: Element|undefined) => void,
-           onMessageContainerRef: (el: Element|undefined) => void,
+  changeSummary?: string,
+  patchSuggestion?: string,
+  patchSuggestionLoading?: boolean,
+  projectName?: string,
+             getUnavailableAidaAvailabilityContents:
+                 (aidaAvailability: Exclude<
+                     Host.AidaClient.AidaAccessPreconditions, Host.AidaClient.AidaAccessPreconditions.AVAILABLE>) =>
+                     Lit.TemplateResult,
+             onSuggestionClick: (suggestion: string) => void,
+             onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) =>
+                 void,
+             onLastAnswerMarkdownViewRef: (el: Element|undefined) => void,
+             onMessageContainerRef: (el: Element|undefined) => void,
+  onApplyToWorkspace?: () => void,
 }): Lit.TemplateResult {
   if (state === State.CONSENT_VIEW) {
     return renderDisabledState(consentViewContents);
@@ -1647,6 +1666,11 @@ function renderMainContents({
       canShowFeedbackForm,
       userInfo,
       markdownRenderer,
+      changeSummary,
+      patchSuggestion,
+      patchSuggestionLoading,
+      projectName,
+      onApplyToWorkspace,
       onSuggestionClick,
       onFeedbackSubmit,
       onLastAnswerMarkdownViewRef,

front_end/panels/ai_assistance/components/chatView.css

@@ -78,10 +78,6 @@
       animation-timeline: --scroll-timeline;
     }
   }
-
-  &:has(.change-summary) .input-form-shadow-container {
-    display: none;
-  }
 }
 
 .chat-readonly-container {
@@ -218,7 +214,7 @@
   word-break: break-word;
   border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
-  &:last-child {
+  &:last-of-type {
     border-bottom: 0;
   }
 
@@ -472,10 +468,6 @@
   gap: var(--sys-size-8);
   position: relative;
 
-  &:has(.change-summary) {
-    min-height: var(--sys-size-13);
-  }
-
   & .feedback-icon {
     width: var(--sys-size-8);
     height: var(--sys-size-8);
@@ -677,21 +669,18 @@ main {
 }
 
 .change-summary {
-  width: fit-content;
   background-color: var(--sys-color-surface3);
-  border-radius: var(--sys-size-6);
+  border-radius: var(--sys-shape-corner-medium-small);
   position: relative;
-  max-height: 80cqh;
-  overflow: auto;
-  scrollbar-width: none;
+  margin: 0 var(--sys-size-5);
+  padding: 0 var(--sys-size-5);
 
   summary {
-    padding-left: var(--sys-size-6);
-    padding-right: var(--sys-size-4);
     display: flex;
     align-items: center;
     gap: var(--sys-size-3);
-    height: var(--sys-size-13);
+    height: var(--sys-size-14);
+    padding-left: var(--sys-size-3);
 
     & .difference-icon {
       color: var(--sys-color-on-tonal-container);
@@ -700,8 +689,8 @@ main {
     }
 
     & .header-text {
-      font: var(--sys-typescale-body5-bold);
-      color: var(--sys-color-on-surface-subtle);
+      font: var(--sys-typescale-body4);
+      color: var(--sys-color-on-surface);
     }
 
     & .arrow {
@@ -726,12 +715,6 @@ main {
   }
 
   &[open] {
-    flex: 1;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-
     &::details-content {
       height: fit-content;
       padding: var(--sys-size-2) 0;
@@ -744,9 +727,9 @@ main {
   }
 
   devtools-code-block {
-    margin-top: calc(-1 * var(--sys-size-5));
+    margin-bottom: var(--sys-size-5);
 
-    --code-block-background-color: inherit;
+    --code-block-background-color: var(--sys-color-surface1);
   }
 
   .workspace {