Add a flag and a button for triggering AI Chat Screenshot https://imgur.com/a/7NrRGKC Also fix the self referencing css vars that break the side panel layout. Release-Notes: skip Google-Bug-Id: b/437944720 Change-Id: If66c73508630a599806bf87e49adfd327de99a28

diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.ts b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.ts
index 12e2715..54c1469 100644
--- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.ts

@@ -121,6 +121,7 @@
 import {commentsModelToken} from '../../../models/comments/comments-model';
 import {when} from 'lit/directives/when.js';
 import {ValidationOptionInfo} from '../../../api/rest-api';
+import {KnownExperimentId} from '../../../services/flags/flags';
 
 const ERR_BRANCH_EMPTY = 'The destination branch can’t be empty.';
 const ERR_COMMIT_EMPTY = 'The commit message can’t be empty.';
@@ -180,6 +181,13 @@
   method: HttpMethod.POST,
 };
 
+const AI_CHAT_ACTION: UIActionInfo = {
+  __key: 'chat',
+  __type: ActionType.CHANGE,
+  enabled: true,
+  label: 'AI Chat',
+};
+
 function isQuickApproveAction(
   action: UIActionInfo
 ): action is QuickApproveUIActionInfo {
@@ -268,6 +276,7 @@
   [ChangeActions.REVERT, {icon: 'undo'}],
   [ChangeActions.STOP_EDIT, {icon: 'stop', filled: true}],
   [QUICK_APPROVE_ACTION.key, {icon: 'check'}],
+  [AI_CHAT_ACTION.__key, {icon: 'stars'}],
   [RevisionActions.SUBMIT, {icon: 'done_all'}],
 ]);
 
@@ -487,12 +496,16 @@
 
   @state() pluginsLoaded = false;
 
+  @state() aiPluginsRegistered = false;
+
   @state() threadsWithUnappliedSuggestions?: CommentThread[];
 
   private readonly restApiService = getAppContext().restApiService;
 
   private readonly reporting = getAppContext().reportingService;
 
+  private readonly flagService = getAppContext().flagsService;
+
   private readonly getPluginLoader = resolve(this, pluginLoaderToken);
 
   private readonly getUserModel = resolve(this, userModelToken);
@@ -576,6 +589,11 @@
     );
     subscribe(
       this,
+      () => this.getPluginLoader().pluginsModel.aiCodeReviewPlugins$,
+      plugins => (this.aiPluginsRegistered = (plugins.length ?? 0) > 0)
+    );
+    subscribe(
+      this,
       () => this.getConfigModel().repoConfig$,
       config => (this.privateByDefault = config?.private_by_default)
     );
@@ -1219,6 +1237,16 @@
     this._hideQuickApproveAction = true;
   }
 
+  private getAiChatAction(): UIActionInfo | null {
+    if (!this.flagService.isEnabled(KnownExperimentId.ENABLE_AI_CHAT)) {
+      return null;
+    }
+    if (!this.aiPluginsRegistered) {
+      return null;
+    }
+    return AI_CHAT_ACTION;
+  }
+
   private getQuickApproveAction(): QuickApproveUIActionInfo | null {
     if (this._hideQuickApproveAction) {
       return null;
@@ -1488,6 +1516,10 @@
         this.fireAction(this.prependSlash(key), action, true, action.payload);
         break;
       }
+      case AI_CHAT_ACTION.__key: {
+        fire(this, 'ai-chat', {});
+        break;
+      }
       case ChangeActions.EDIT:
         this.handleEditTap();
         break;
@@ -2200,6 +2232,10 @@
     if (quickApprove) {
       changeActionValues.unshift(quickApprove);
     }
+    const aiChat = this.getAiChatAction();
+    if (aiChat) {
+      changeActionValues.unshift(aiChat);
+    }
 
     return revisionActionValues
       .concat(changeActionValues)
@@ -2327,6 +2363,7 @@
 
 declare global {
   interface HTMLElementEventMap {
+    'ai-chat': CustomEvent<{}>;
     'download-tap': CustomEvent<{}>;
     'edit-tap': CustomEvent<{}>;
     'included-tap': CustomEvent<{}>;

diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts
index 37e7ccf..d0e84ac 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts

@@ -1185,6 +1185,10 @@
     `;
   }
 
+  private toggleChat() {
+    this.showSidebarChat = !this.showSidebarChat;
+  }
+
   private renderSidebar() {
     if (!this.showSidebarChat) return;
     return html` <div>Hello, I am a fancy sidebar for AI Chat.</div> `;
@@ -1310,6 +1314,7 @@
       <div class="commitActions">
         <gr-change-actions
           id="actions"
+          @ai-chat=${() => this.toggleChat()}
           @edit-tap=${() => this.handleEditTap()}
           @stop-edit-tap=${() => this.handleStopEditTap()}
           @download-tap=${() => this.handleOpenDownloadDialog()}

diff --git a/polygerrit-ui/app/elements/shared/gr-content-with-sidebar/gr-content-with-sidebar.ts b/polygerrit-ui/app/elements/shared/gr-content-with-sidebar/gr-content-with-sidebar.ts
index b61a10a..f87914f 100644
--- a/polygerrit-ui/app/elements/shared/gr-content-with-sidebar/gr-content-with-sidebar.ts
+++ b/polygerrit-ui/app/elements/shared/gr-content-with-sidebar/gr-content-with-sidebar.ts

@@ -43,8 +43,6 @@
         :host {
           display: block;
           --sidebar-height: calc(100vh - var(--sidebar-top));
-          --sidebar-top: var(--sidebar-top, 0px);
-          --sidebar-bottom-overflow: var(--sidebar-bottom-overflow, 0px);
         }
         .sidebar-wrapper {
           z-index: 50;

diff --git a/polygerrit-ui/app/services/flags/flags.ts b/polygerrit-ui/app/services/flags/flags.ts
index 2c7993c..70d24aa 100644
--- a/polygerrit-ui/app/services/flags/flags.ts
+++ b/polygerrit-ui/app/services/flags/flags.ts

@@ -25,4 +25,5 @@
   ML_SUGGESTED_EDIT_EDITABLE_SUGGESTION = 'UiFeature__ml_suggested_edit_editable_suggestion',
   SHOW_FLOWS_TAB = 'UiFeature__show_flows_tab',
   ASYNC_SUBMIT_REQUIREMENTS = 'UiFeature__async_submit_requirements',
+  ENABLE_AI_CHAT = 'UiFeature__enable_ai_chat',
 }