[AI assistance] Add read-only mode for history

Provides a view for when the chat is restored from history.
Updates the `Ask AI` to open new conversation when needed.
Remove the delete button when in empty state.

Bug: 351752761
Change-Id: I06fc732ab2469bac3275dc5f8002211a189f3912
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5999258
Reviewed-by: Alex Rudenko <[email protected]>
Auto-Submit: Nikolay Vitkov <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/panels/freestyler/AiAgent.ts

@@ -160,6 +160,7 @@ export abstract class AiAgent<T> {
   abstract readonly clientFeature: Host.AidaClient.ClientFeature;
   abstract readonly userTier: string|undefined;
   abstract handleContextDetails(select: ConversationContext<T>|null): AsyncGenerator<ContextResponse, void, void>;
+  #generatedFromHistory = false;
 
   /**
    * Mapping between the unique request id and
@@ -203,6 +204,10 @@ export abstract class AiAgent<T> {
         ?.query;
   }
 
+  get isHistoryEntry(): boolean {
+    return this.#generatedFromHistory;
+  }
+
   #structuredLog: Array<{
     request: Host.AidaClient.AidaRequest,
     response: string,
@@ -389,6 +394,10 @@ STOP`;
   async * run(query: string, options: {
     signal?: AbortSignal, selected: ConversationContext<T>|null,
   }): AsyncGenerator<ResponseData, void, void> {
+    if (this.#generatedFromHistory) {
+      throw new Error('History entries are read-only.');
+    }
+
     // First context set on the agent determines its origin from now on.
     if (options.selected && this.#origin === undefined && options.selected) {
       this.#origin = options.selected.getOrigin();
@@ -532,6 +541,11 @@ STOP`;
   }
 
   async * runFromHistory(): AsyncGenerator<ResponseData, void, void> {
+    if (this.isEmpty) {
+      return;
+    }
+
+    this.#generatedFromHistory = true;
     for (const historyChunk of this.#history.values()) {
       for (const entry of historyChunk) {
         yield entry;

front_end/panels/freestyler/FreestylerPanel.test.ts

@@ -735,7 +735,7 @@ describeWithEnvironment('FreestylerPanel', () => {
       },
     ]);
     const toolbar = panel.contentElement.querySelector('.freestyler-left-toolbar');
-    const button = toolbar!.shadowRoot!.querySelector('devtools-button[aria-label=\'Clear chat\']');
+    const button = toolbar!.shadowRoot!.querySelector('devtools-button[aria-label=\'Delete chat\']');
     assert.instanceOf(button, HTMLElement);
     dispatchClickEvent(button);
     assert.deepEqual(mockView.lastCall.args[0].messages, []);

front_end/panels/freestyler/FreestylerPanel.ts

@@ -72,9 +72,9 @@ const UIStrings = {
    */
   history: 'History',
   /**
-   *@description AI assistance UI text clearing the current chat session.
+   *@description AI assistance UI text deleting the current chat session.
    */
-  clearChat: 'Clear chat',
+  deleteChat: 'Delete chat',
   /**
    *@description AI assistance UI text that deletes all history entries.
    */
@@ -173,7 +173,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
   #historyEntriesButton =
       new UI.Toolbar.ToolbarButton(i18nString(UIStrings.history), 'history', undefined, 'freestyler.history');
   #deleteHistoryEntryButton =
-      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearChat), 'bin', undefined, 'freestyler.delete');
+      new UI.Toolbar.ToolbarButton(i18nString(UIStrings.deleteChat), 'bin', undefined, 'freestyler.delete');
 
   #agents = new Set<AiAgent<unknown>>();
   #currentAgent?: AiAgent<unknown>;
@@ -219,6 +219,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       },
       selectedContext: null,
       blockedByCrossOrigin: false,
+      isReadOnly: false,
     };
   }
 
@@ -293,6 +294,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
 
   #updateToolbarState(): void {
     this.#historyEntriesButton.applyEnabledState([...this.#agents].some(agent => !agent.isEmpty));
+    this.#deleteHistoryEntryButton.setVisible(Boolean(this.#currentAgent));
     this.#deleteHistoryEntryButton.applyEnabledState(Boolean(this.#currentAgent && !this.#currentAgent.isEmpty));
     /*
     * If there is no agent disable new chat button
@@ -577,7 +579,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
 
     if (!this.#currentAgent) {
       this.#currentAgent = this.#createAgent(targetAgentType);
-    } else if (this.#currentAgent.type !== targetAgentType) {
+    } else if (this.#currentAgent.type !== targetAgentType || this.#currentAgent.isHistoryEntry) {
       this.#currentAgent = this.#createAgent(targetAgentType);
     }
     this.#viewProps.agentType = this.#currentAgent.type;
@@ -586,6 +588,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#viewProps.messages = [];
     this.#onContextSelectionChanged();
     this.doUpdate();
+    this.#viewProps.isReadOnly = false;
     void this.#doConversation(this.#currentAgent.runFromHistory());
   }
 
@@ -644,6 +647,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
     this.#viewProps.messages = [];
     this.#viewProps.agentType = agent.type;
     this.#onContextSelectionChanged();
+    this.#viewProps.isReadOnly = true;
     await this.#doConversation(agent.runFromHistory());
   }
 
@@ -680,6 +684,7 @@ export class FreestylerPanel extends UI.Panel.Panel {
       return;
     }
     this.#viewProps.blockedByCrossOrigin = !currentContext.isOriginAllowed(this.#currentAgent.origin);
+    this.#viewProps.isReadOnly = this.#currentAgent.isHistoryEntry;
     this.doUpdate();
   }
 

front_end/panels/freestyler/components/FreestylerChatUi.test.ts

@@ -57,6 +57,7 @@ css
       canShowFeedbackForm: false,
       userInfo: {},
       blockedByCrossOrigin: false,
+      isReadOnly: false,
       ...options,
     };
   }

front_end/panels/freestyler/components/FreestylerChatUi.ts

@@ -122,7 +122,7 @@ const UIStringsNotTranslate = {
   /**
    *@description Title for the start new chat
    */
-  startNewChatButtonTitle: 'Start new chat',
+  startNewChat: 'Start new chat',
   /**
    *@description Title for the cancel icon button.
    */
@@ -208,6 +208,10 @@ const UIStringsNotTranslate = {
    *@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.
+   */
+  pastConversation: 'You\'re viewing a past conversation.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/freestyler/components/FreestylerChatUi.ts', UIStrings);
@@ -270,6 +274,7 @@ export interface Props {
   canShowFeedbackForm: boolean;
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
   agentType?: AgentType;
+  isReadOnly: boolean;
   blockedByCrossOrigin: boolean;
 }
 
@@ -900,6 +905,26 @@ export class FreestylerChatUi extends HTMLElement {
     }
   }
 
+  #renderReadOnlySection(): LitHtml.TemplateResult {
+    // clang-format off
+    return html`<div
+      class="chat-readonly-container"
+      jslog=${VisualLogging.section('read-only')}
+    >
+      <span>${lockedString(UIStringsNotTranslate.pastConversation)}</span>
+      <devtools-button
+        aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
+        @click=${this.#onNewConversation}
+        .data=${{
+          variant: Buttons.Button.Variant.TEXT,
+          title: lockedString(UIStringsNotTranslate.startNewChat),
+          jslogContext: 'start-new-chat',
+        } as Buttons.Button.ButtonData}
+      >${lockedString(UIStringsNotTranslate.startNewChat)}</devtools-button>
+    </div>`;
+    // clang-format on
+  }
+
   #renderChatInputButton(): LitHtml.TemplateResult {
     if (this.#props.isLoading) {
       // clang-format off
@@ -923,17 +948,17 @@ export class FreestylerChatUi extends HTMLElement {
       // clang-format off
       return html`<devtools-button
         class="chat-input-button"
-        aria-label=${lockedString(UIStringsNotTranslate.startNewChatButtonTitle)}
+        aria-label=${lockedString(UIStringsNotTranslate.startNewChat)}
         @click=${this.#onNewConversation}
         .data=${
           {
             variant: Buttons.Button.Variant.PRIMARY,
             size: Buttons.Button.Size.REGULAR,
-            title: lockedString(UIStringsNotTranslate.startNewChatButtonTitle),
+            title: lockedString(UIStringsNotTranslate.startNewChat),
             jslogContext: 'start-new-chat',
           } as Buttons.Button.ButtonData
         }
-      >${lockedString(UIStringsNotTranslate.startNewChatButtonTitle)}</devtools-button>`;
+      >${lockedString(UIStringsNotTranslate.startNewChat)}</devtools-button>`;
       // clang-format on
     }
     // clang-format off
@@ -952,7 +977,6 @@ export class FreestylerChatUi extends HTMLElement {
         } as Buttons.Button.ButtonData
       }
     ></devtools-button>`;
-    // clang-format on
   }
 
   #renderChatInput = (): LitHtml.LitTemplate => {
@@ -962,15 +986,25 @@ export class FreestylerChatUi extends HTMLElement {
 
     // clang-format off
     return html`
+    <form class="input-form" @submit=${this.#handleSubmit}>
+      ${this.#props.state !== State.CONSENT_VIEW ? html`
+        <div class="input-header">
+          <div class="header-link-container">
+            ${this.#renderSelection()}
+          </div>
+        </div>
+      ` : LitHtml.nothing}
       <div class="chat-input-container">
         <textarea class="chat-input"
           .disabled=${this.#isTextInputDisabled()}
           wrap="hard"
           @keydown=${this.#handleTextAreaKeyDown}
           placeholder=${this.#getInputPlaceholderString()}
-          jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}></textarea>
-          ${this.#renderChatInputButton()}
-      </div>`;
+          jslog=${VisualLogging.textField('query').track({ keydown: 'Enter' })}
+        ></textarea>
+        ${this.#renderChatInputButton()}
+      </div>
+    </form>`;
     // clang-format on
   };
 
@@ -1153,16 +1187,10 @@ export class FreestylerChatUi extends HTMLElement {
       <div class="chat-ui">
         <main @scroll=${this.#handleScroll}>
           ${this.#renderMainContents()}
-          <form class="input-form" @submit=${this.#handleSubmit}>
-            ${this.#props.state !== State.CONSENT_VIEW ? html`
-              <div class="input-header">
-                <div class="header-link-container">
-                  ${this.#renderSelection()}
-                </div>
-              </div>
-            ` : LitHtml.nothing}
-            ${this.#renderChatInput()}
-          </form>
+          ${this.#props.isReadOnly ?
+              this.#renderReadOnlySection() :
+              this.#renderChatInput()
+          }
         </main>
         <footer class="disclaimer">
           <p class="disclaimer-text">

front_end/panels/freestyler/components/freestylerChatUi.css

@@ -47,7 +47,8 @@
   /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (width > 688px) {
-    --half-scrollbar-width: calc((100cqw - 100%) / 2); /* stylelint-disable-line unit-no-unknown */
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
 
     margin-left: var(--half-scrollbar-width);
     margin-right: calc(-1 * var(--half-scrollbar-width));
@@ -62,6 +63,19 @@
   }
 }
 
+.chat-readonly-container {
+  display: flex;
+  width: 100%;
+  max-width: var(--sys-size-36);
+  justify-content: center;
+  align-items: center;
+  background-color: var(--sys-color-surface3);
+  font: var(--sys-typescale-body4-regular);
+  padding: var(--sys-size-5) 0;
+  border-radius: var(--sys-shape-corner-medium-small);
+  margin-bottom: var(--sys-size-5);
+}
+
 .chat-input-container {
   margin: var(--sys-size-4) 0;
   width: 100%;
@@ -138,7 +152,8 @@
   /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (width > 688px) {
-    --half-scrollbar-width: calc((100cqw - 100%) / 2); /* stylelint-disable-line unit-no-unknown */
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
 
     margin-left: var(--half-scrollbar-width);
     margin-right: calc(-1 * var(--half-scrollbar-width));
@@ -466,7 +481,8 @@ main {
   /* 688px is the max width of the input form + left and right paddings: var(--sys-size-36) + 2 * var(--sys-size-5)  */
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (width > 688px) {
-    --half-scrollbar-width: calc((100cqw - 100%) / 2); /* stylelint-disable-line unit-no-unknown */
+    /* stylelint-disable-next-line unit-no-unknown */
+    --half-scrollbar-width: calc((100cqw - 100%) / 2);
 
     margin-left: var(--half-scrollbar-width);
     margin-right: calc(-1 * var(--half-scrollbar-width));

front_end/ui/components/docs/freestyler/basic.ts

@@ -55,6 +55,7 @@ const component = new Freestyler.FreestylerChatUi({
   canShowFeedbackForm: false,
   userInfo: {},
   blockedByCrossOrigin: false,
+  isReadOnly: false,
 });
 
 document.getElementById('container')?.appendChild(component);

front_end/ui/components/docs/freestyler/empty_state.ts

@@ -30,6 +30,7 @@ const component = new Freestyler.FreestylerChatUi({
   canShowFeedbackForm: false,
   userInfo: {},
   blockedByCrossOrigin: false,
+  isReadOnly: false,
 });
 
 document.getElementById('container')?.appendChild(component);