Merge remote-tracking branch 'pair-recommendation-rudders/master' int…

…o try-merge-pair-master-into-lsir-repo

.gitignore

@@ -47,3 +47,5 @@ testem.log
 .DS_Store
 Thumbs.db
 17.0.6/*
+
+llm-recs/*

.vscode/settings.json

@@ -3,14 +3,14 @@
   "[html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     },
     "editor.formatOnSave": true
   },
   "[typescript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": "explicit"
     },
     "editor.formatOnSave": true
   },

src/app/app-routing.module.ts

@@ -21,6 +21,7 @@ import { ExperimentSettingsComponent } from './experimenter-view/experiment-sett
 import { experimenterAuthGuard } from './experimenter-auth.guard';
 import { validParticipantGuard } from './valid-participant.guard';
 import { CreateExperimentComponent } from './experimenter-view/create-experiment/create-experiment.component';
+import { LlmApiConfigComponent } from './experimenter-view/llm-api-config/llm-api-config.component';
 
 const routes: Routes = [
   {
@@ -54,6 +55,10 @@ const routes: Routes = [
         component: AppSettingsComponent,
         pathMatch: 'full',
       },
+      { path: 'llm-settings',
+      component: LlmApiConfigComponent,
+      pathMatch: 'full',
+      },
     ],
   },
   { path: '', component: AppHomeComponent, pathMatch: 'full' },

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { ExpTosAndProfileComponent } from './participant-view/participant-stage-
 import { ExpTosComponent } from './participant-view/participant-stage-view/exp-tos/exp-tos.component';
 import { GoogleAuthService } from './services/google-auth.service';
 import { GoogleSheetsService } from './services/google-sheets.service';
+import { LlmApiConfigComponent } from './experimenter-view/llm-api-config/llm-api-config.component';
 import { LmApiService } from './services/lm-api.service';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
@@ -77,6 +78,7 @@ import { ExperimenterViewComponent } from './experimenter-view/experimenter-view
     CodemirrorConfigEditorModule,
     AppHomeComponent,
     AppSettingsComponent,
+    LlmApiConfigComponent,
     ExpSurveyComponent,
     ExpLeaderVoteComponent,
     ExpProfileComponent,

src/app/experimenter-view/experiment-monitor/experiment-monitor.component.html

@@ -52,3 +52,9 @@ <h2>Experiment stages:</h2>
     }
   </div>
 }
+
+<h2>Experiment settings:</h2>
+
+<button mat-raised-button color="warn" aria-label="Delete" (click)="deleteExperiment()">
+  <mat-icon>delete</mat-icon> Delete this experiment
+</button>

src/app/experimenter-view/experiment-monitor/experiment-monitor.component.ts

@@ -1,7 +1,10 @@
 import { Component, Input, Signal, WritableSignal, computed, signal } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { AppStateService } from 'src/app/services/app-state.service';
+import { deleteExperiment } from 'src/lib/staged-exp/app';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { StageKinds, UserData, UserProfile } from 'src/lib/staged-exp/data-model';
 import { MediatorChatComponent } from '../mediator-chat/mediator-chat.component';
@@ -18,7 +21,7 @@ export interface StageState {
 @Component({
   selector: 'app-experiment-monitor',
   standalone: true,
-  imports: [RouterModule, RouterLink, RouterLinkActive, MediatorChatComponent, MatExpansionModule],
+  imports: [RouterModule, RouterLink, RouterLinkActive, MediatorChatComponent, MatButtonModule, MatExpansionModule, MatIconModule],
   templateUrl: './experiment-monitor.component.html',
   styleUrl: './experiment-monitor.component.scss',
 })
@@ -37,7 +40,7 @@ export class ExperimentMonitorComponent {
   isOfKind = isOfKind;
   readonly StageKinds = StageKinds;
 
-  constructor(public stateService: AppStateService) {
+  constructor(public stateService: AppStateService, public router: Router) {
     this.participants = computed(() => {
       console.log('experimentName:', this.experimentName());
       if (!(this.experimentName() in this.stateService.data().experiments)) {
@@ -74,4 +77,15 @@ export class ExperimentMonitorComponent {
       return stageStates;
     });
   }
+
+  deleteExperiment() {
+    if (confirm("⚠️ This will delete the experiment! Are you sure?")) {
+      this.stateService.editData((data) =>
+        deleteExperiment(this.experimentName(), data),
+      );
+
+      // Redirect to settings page.
+      this.router.navigate(['/experimenter', 'settings']);
+    }
+  }
 }

src/app/experimenter-view/experimenter-view.component.html

@@ -40,6 +40,14 @@
         >
           <mat-icon fontIcon="settings"></mat-icon> Settings
         </mat-list-item>
+        <mat-list-item
+          matListItemTitle
+          [routerLink]="['llm-settings']"
+          ariaCurrentWhenActive="page"
+          class="menu-item"
+        >
+          <mat-icon fontIcon="settings"></mat-icon> LLM Settings
+        </mat-list-item>
       </mat-nav-list>
     </mat-sidenav>
 

src/app/experimenter-view/llm-api-config/llm-api-config.component.html

@@ -0,0 +1,37 @@
+<div class="main">
+
+    <p>
+    You can this on the command line to get your parameters:
+    </p>
+    <pre>
+    echo "Project: $(gcloud config get-value project)"
+    echo "AccessToken: $(gcloud auth print-access-token)"
+    </pre>
+    <p>
+    Note: the access token generally works for <b>1 hour</b>. After that, you'll need to
+    renew it.
+    </p>
+    <p>
+    And then copy/paste them here:
+    </p>
+    <form class="cloud-info-form">
+      <mat-form-field class="full-width"  >
+        <mat-label>Project</mat-label>
+        <input type="text" matInput [formControl]="projectControl">
+      </mat-form-field>
+
+      <mat-form-field class="full-width">
+        <mat-label>AccessToken</mat-label>
+        <textarea matInput [formControl]="tokenControl"></textarea>
+      </mat-form-field>
+    </form>
+    <p>
+      These values are saved in your local browser storage, you can clear them
+      by simply editing the above fields (local browser storage is updated as you
+      type).
+    </p>
+    </div>
+
+    <button color="primary" mat-button (click)="sendRequest()">
+        <span>Send</span>
+      </button>

src/app/experimenter-view/llm-api-config/llm-api-config.component.scss

@@ -0,0 +1,9 @@
+.cloud-info-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}

src/app/experimenter-view/llm-api-config/llm-api-config.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LlmApiConfigComponent } from './llm-api-config.component';
+
+describe('LlmApiConfigComponent', () => {
+  let component: LlmApiConfigComponent;
+  let fixture: ComponentFixture<LlmApiConfigComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LlmApiConfigComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LlmApiConfigComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/experimenter-view/llm-api-config/llm-api-config.component.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an Apache2 license that can be
+ * found in the LICENSE file and http://www.apache.org/licenses/LICENSE-2.0
+==============================================================================*/
+
+import { Component, effect } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { VertexApiService } from '../../services/vertex-api.service';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule } from '@angular/forms';
+import { preparePalm2Request, sendPalm2Request } from 'src/lib/text-templates/llm_vertexapi_palm2';
+
+@Component({
+  selector: 'app-llm-api-config',
+  templateUrl: './llm-api-config.component.html',
+  styleUrls: ['./llm-api-config.component.scss'],
+  standalone: true,
+  imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule],
+})
+export class LlmApiConfigComponent {
+  public tokenControl: FormControl<string | null>;
+  public projectControl: FormControl<string | null>;
+
+  constructor(private llmService: VertexApiService) {
+    this.tokenControl = new FormControl<string | null>(this.llmService.accessToken);
+    this.projectControl = new FormControl<string | null>(this.llmService.projectId);
+
+    this.tokenControl.valueChanges.forEach(update => {
+      if (update && this.llmService.accessToken !== update) {
+        this.llmService.accessToken = update
+      }
+    });
+    this.projectControl.valueChanges.forEach(update => {
+      if (update && this.llmService.projectId !== update) {
+        this.llmService.projectId = update
+      }
+    });
+  }
+  // The Token is valid for 1 hour! Don't forget to renew it!
+  async sendRequest() {
+    const prompt = `Hello word`;
+    const request = preparePalm2Request(prompt);
+    console.log(JSON.stringify(request));
+    console.log(this.llmService.projectId);
+    console.log(this.llmService.accessToken);
+    const response = await sendPalm2Request(
+      this.llmService.projectId, this.llmService.accessToken, request);
+    console.log(JSON.stringify(response));
+  };
+}

src/app/experimenter-view/mediator-chat/mediator-chat.component.html

@@ -8,7 +8,7 @@
       } @else if (message.messageType === 'mediatorMessage') {
         <app-chat-mediator-message [message]="message"></app-chat-mediator-message>
       } @else if (message.messageType === 'discussItemsMessage') {
-        <app-chat-discuss-items-message></app-chat-discuss-items-message>
+        <app-chat-discuss-items-message [discussItemsMessage]="message"></app-chat-discuss-items-message>
       } @else {
         <div></div>
       }
@@ -17,6 +17,59 @@
 </div>
 
 <div class="message-form">
+  <h4> Select a pair of item to send to the chat participants </h4>
+
+  @if (itemPair().item1 == itemPair().item2){
+    <div class="error-message">
+      Please select two different items
+    </div>
+  }
+  <!-- select pair of items --> 
+  <mat-form-field>
+    <mat-label>Item 1</mat-label>
+    <mat-select [(value)]="itemPair().item1" (selectionChange)="updateItemPair($event, 1)" required>
+      @for (item of items(); track item) {
+        <!-- @if (item != itemPair().item2){ -->
+          <mat-option [value]="item">
+            <div class="item-pair">
+              <img src="{{item.imageUrl}}" alt="{{item.name}}" width="20px" /> {{item.name}}
+            </div>
+          </mat-option>
+        <!-- } -->
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Item 2</mat-label>
+    <mat-select [(value)]="itemPair().item2" (selectionChange)="updateItemPair($event, 2)" required>
+      @for (item of items(); track item) {
+        <!-- @if (item != itemPair().item1){ -->
+          <mat-option [value]="item">
+            <div class="item-pair">
+              <img src="{{item.imageUrl}}" alt="{{item.name}}" width="20px" /> {{item.name}}
+            </div>
+          </mat-option>
+        <!-- } -->
+      }
+    </mat-select>
+  </mat-form-field>
+
+
+  <mat-form-field class="full-width">
+    <mat-label>Instructions to send</mat-label>
+    <input matInput placeholder="Write your response" [(ngModel)]="instructions" />
+  </mat-form-field>
+
+
+  <button color="primary" mat-button (click)="sendRatingToDiscuss()" [disabled]="itemPair().item1 == itemPair().item2">
+    <!-- <mat-icon>redo</mat-icon> -->
+    <span>Send</span>
+  </button>
+</div>
+
+<div class="message-form">
+  <h4> Send any message to the chat </h4>
   <mat-form-field class="full-width">
     <mat-label>Message to send</mat-label>
     <input matInput placeholder="Write your response" [(ngModel)]="message" />
@@ -26,3 +79,30 @@
     <span>Send</span>
   </button>
 </div>
+
+<div>
+  <h4> Send automatic mediating intervention to the chat. 
+    The prompt will be made of: 
+    <ol>
+      <li>
+          <b>A prefix</b> - default: {{this.defaultPrefix}}
+      </li>
+      <li>
+        <b>The current discussion</b> - e.g.: <br>Username: "John Doe"<br> Message: "I think..."
+      </li>
+      <li>
+        <b>A suffix</b> - default: {{this.defaultSuffix}}
+    </ol>
+  </h4>
+  <mat-form-field class="full-width">
+    <mat-label>Write a custom prefix</mat-label>
+    <input matInput placeholder="Write your prefix" [(ngModel)]="prefix" />
+  </mat-form-field>
+  <mat-form-field class="full-width">
+    <mat-label>Write a custom suffix</mat-label>
+    <input matInput placeholder="Write your suffix" [(ngModel)]="suffix" />
+  </mat-form-field>
+  <button color="primary" mat-button (click)="sendLLMMessage()">
+    <span>Send</span>
+  </button>
+</div>

src/app/experimenter-view/mediator-chat/mediator-chat.component.scss

@@ -0,0 +1,10 @@
+.item-pair{
+  display: flex;
+  justify-content: space-between;
+}
+
+.error-message{
+  color: red;
+  font-size: 12px;
+  margin-top: 5px;
+}