Merge pull request #101 from PAIR-code/LeoLaugier-06-03-2024

Better control on prompts
PAIR-code · Apr 2, 2024 · 27e071c · 27e071c
2 parents 483b53e + ccd0986
commit 27e071c
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 148 deletions.
diff --git a/...itators/webapp/src/app/experimenter-view/create-experiment/create-experiment.component.ts b/...itators/webapp/src/app/experimenter-view/create-experiment/create-experiment.component.ts
@@ -25,7 +25,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router } from '@angular/router';
 
 import { LocalService } from 'src/app/services/local.service';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -81,7 +80,6 @@ export class CreateExperimentComponent {
   constructor(
     private appStateService: AppStateService,
     private localStore: LocalService,
-    public router: Router
   ) {
     // new stuff
     const existingStages = this.localStore.getData(EXISTING_STAGES_KEY) as ExpStage[];
@@ -262,9 +260,6 @@ export class CreateExperimentComponent {
     this.appStateService.editData((data) =>
       addExperiment(this.newExperimentName, this.existingStages as ExpStage[], data),
     );
-
-    // Redirect to the new experiment.
-    this.router.navigate(['/experimenter', 'experiment', this.newExperimentName]);
     // console.log(this.localStore.getData(EXISTING_STAGES_KEY));
     // this.appStateService.addExperiment()
     // this.appStateService.reset(this.localStore.getData(EXISTING_STAGES_KEY) as ExpStage[]);

diff --git a/llm-meditators/webapp/src/app/experimenter-view/mediator-chat/mediator-chat.component.html b/llm-meditators/webapp/src/app/experimenter-view/mediator-chat/mediator-chat.component.html
@@ -81,7 +81,27 @@ <h4> Send any message to the chat </h4>
 </div>
 
 <div>
-  <h4> Send automatic mediating intervention to the chat </h4>
+  <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>

diff --git a/llm-meditators/webapp/src/app/experimenter-view/mediator-chat/mediator-chat.component.ts b/llm-meditators/webapp/src/app/experimenter-view/mediator-chat/mediator-chat.component.ts
@@ -59,6 +59,11 @@ export class MediatorChatComponent {
   public itemPair: Signal<ItemPair>;
   public instructions: string = '';
 
+  public defaultPrefix: string = 'You are a mediator assistant guiding a conversation whose goal is to discuss and decide the best item to survive a sinking yacht lost in the South Pacific.'
+  public defaultSuffix: string = 'What is the best message to send to the chat participants at this stage of the discussion to keep it constructive, unbiased, and civil? Just write the message without the username. Do not use quotes.';
+  public prefix: string = this.defaultPrefix;
+  public suffix: string = this.defaultSuffix;
+
 
   constructor(private appStateService: AppStateService, private llmService: VertexApiService) {
     this.messages = computed(() => {
@@ -145,11 +150,11 @@ export class MediatorChatComponent {
       userMessageTempl, '\n\n');
 
     const mediationTempl = template
-      `Given the following discussion:
+      `${this.prefix}
       
 ${nv('conversation')}
       
-What would you say to mediate the discussion?`;
+${this.suffix}`;
 
     // Create empty list in conversation
     const conversation: { username: string; message: string; }[] = [];

diff --git a/...bapp/src/app/participant-view/participant-stage-view/exp-profile/exp-profile.component.ts b/...bapp/src/app/participant-view/participant-stage-view/exp-profile/exp-profile.component.ts
@@ -56,34 +56,28 @@ export class ExpProfileComponent {
   }
 
   updateName(updatedValue: string) {
+    console.log('updateName', updatedValue);
     this.participant.editStageData<UserProfile>((p) => {
       p.name = updatedValue;
       this.participant.setProfile(p);
     });
-    this.updateStageProgression();
   }
 
   updatePronouns(updatedValue: MatRadioChange) {
+    console.log('updatePronouns', updatedValue);
     if (updatedValue.value !== this.participant.userData().profile.pronouns) {
       this.participant.editStageData<UserProfile>((p) => {
         p.pronouns = updatedValue.value;
         this.participant.setProfile(p);
       });
     }
-    this.updateStageProgression();
   }
 
   updateAvatarUrl(updatedValue: MatRadioChange) {
+    console.log('updateAvatarUrl', updatedValue);
     this.participant.editStageData<UserProfile>((p) => {
       p.avatarUrl = updatedValue.value;
       this.participant.setProfile(p);
     });
-    this.updateStageProgression();
-  }
-
-  updateStageProgression() {
-    this.participant.edit((user) => {
-      user.allowedStageProgressionMap[user.workingOnStageName] = this.isComplete();
-    });
   }
 }
diff --git a/...ticipant-view/participant-stage-view/exp-tos-and-profile/exp-tos-and-profile.component.ts b/...ticipant-view/participant-stage-view/exp-tos-and-profile/exp-tos-and-profile.component.ts
@@ -42,7 +42,7 @@ enum Pronouns {
 export class ExpTosAndProfileComponent {
   public participant: Participant;
   public stageData: Signal<TosAndUserProfile>;
-  private tosIsChecked: boolean;
+
   readonly Pronouns = Pronouns;
 
   constructor(stateService: AppStateService) {
@@ -51,14 +51,11 @@ export class ExpTosAndProfileComponent {
     );
     this.stageData = stageData;
     this.participant = participant;
-    this.tosIsChecked = false;
   }
 
   canProceedToNextStep(user: UserData) {
-    return (user.profile.avatarUrl !== '') && 
-      (user.profile.name !== '') && 
-      (user.profile.pronouns !== '') &&
-      this.tosIsChecked;
+    // TODO(cjqian): Make sure TOS is accepted as well.
+    return (user.profile.avatarUrl !== '') && (user.profile.name !== '') && (user.profile.pronouns !== '');
   }
 
   isOtherPronoun(s: string) {
@@ -68,10 +65,7 @@ export class ExpTosAndProfileComponent {
   updateCheckboxValue(updatedValue: MatCheckboxChange) {
     this.participant.editStageData<TosAndUserProfile>((d) => {
       d.acceptedTosTimestamp = updatedValue.checked ? new Date() : null;
-      this.tosIsChecked = updatedValue.checked;
     });
-
-    this.updateProceedToNextStep();
   }
 
   updateName(name: string) {
@@ -102,19 +96,12 @@ export class ExpTosAndProfileComponent {
     this.updateUserProfile();
   }
 
-  updateProceedToNextStep() {
-    this.participant.edit((user) => {
-      user.allowedStageProgressionMap[user.workingOnStageName] = this.canProceedToNextStep(user);
-    })
-  }
-
   updateUserProfile() {
     this.participant.edit((user) => {
       user.profile.avatarUrl = this.stageData().avatarUrl;
       user.profile.name = this.stageData().name;
       user.profile.pronouns = this.stageData().pronouns;
+      user.allowedStageProgressionMap[user.workingOnStageName] = this.canProceedToNextStep(user);
     });
-
-    this.updateProceedToNextStep();
   }
 }
diff --git a/...ators/webapp/src/app/participant-view/participant-stage-view/exp-tos/exp-tos.component.ts b/...ators/webapp/src/app/participant-view/participant-stage-view/exp-tos/exp-tos.component.ts
@@ -27,26 +27,16 @@ export class ExpTosComponent {
   constructor(stateService: AppStateService) {
     const { participant, stageData } = stateService.getParticipantAndStage(StageKinds.acceptTos);
     this.stageData = stageData();
-
     this.participant = participant;
   }
 
   updateCheckboxValue(updatedValue: MatCheckboxChange) {
     const checked = updatedValue.checked;
     if (checked) {
       this.stageData.acceptedTosTimestamp = new Date();
-      this.updateStageProgression(true);
-
     } else {
       this.stageData.acceptedTosTimestamp = null;
-      this.updateStageProgression(false);
     }
     this.participant.editStageData(() => this.stageData);
   }
-
-  updateStageProgression(canProceed: boolean) {
-    this.participant.edit((user) => {
-      user.allowedStageProgressionMap[user.workingOnStageName] = canProceed;
-    });
-  }
 }
diff --git a/llm-meditators/webapp/src/app/participant-view/participant-view.component.html b/llm-meditators/webapp/src/app/participant-view/participant-view.component.html
@@ -12,7 +12,6 @@
   <mat-sidenav-container>
     <mat-sidenav #sidenav mode="side" opened="true">
       <mat-nav-list class="menu-buttons">
-        <!-- Previous stages. -->
         @for (stageName of participant.userData().completedStageNames; track stageName) {
           <mat-list-item
             matListItemTitle
@@ -24,12 +23,11 @@
           >
             <!-- (click)="updateCurrentStageName(stageName)" -->
             <div class="menu-item-inner">
-              {{ getStageIndex(stageName) }}. {{ stageName }}
+              {{ stageName }}
               <mat-icon class="icon completed" fontIcon="check"></mat-icon>
             </div>
           </mat-list-item>
         }
-        <!-- Current stage. -->
         <mat-list-item
           matListItemTitle
           [routerLink]="['./']"
@@ -44,20 +42,19 @@
           "
         >
           <div class="menu-item-inner">
-            {{ getStageIndex(participant.workingOnStage().name) }}. {{ participant.workingOnStage().name }}
+            {{ participant.workingOnStage().name }}
             <div class="ongoing-badge">ongoing</div>
           </div>
         </mat-list-item>
-        <!-- Future stages. -->
-        @for (stageName of participant.userData().futureStageNames; track stageName; let i = $index) {
+        @for (stageName of participant.userData().futureStageNames; track stageName) {
           <mat-list-item
             [disabled]="true"
             [activated]="false"
             matListItemTitle
             ariaCurrentWhenActive="page"
             class="menu-item future-stage"
           >
-            {{ getStageIndex(stageName) }}. {{ stageName }}
+            {{ stageName }}
           </mat-list-item>
         }
       </mat-nav-list>

diff --git a/llm-meditators/webapp/src/app/participant-view/participant-view.component.ts b/llm-meditators/webapp/src/app/participant-view/participant-view.component.ts
@@ -37,7 +37,7 @@ export class ParticipantViewComponent implements OnDestroy {
   @ViewChild('googleButton') googleButton!: ElementRef<HTMLElement>;
 
   participant: Participant;
-  ORDERED_STAGE_MAP: string[];
+
   constructor(
     private route: ActivatedRoute,
     public router: Router,
@@ -48,17 +48,8 @@ export class ParticipantViewComponent implements OnDestroy {
     if (this.participant) {
       stateService.state.set({ kind: AppStateEnum.Participant, particpant: this.participant });
     }
-
-    const userData = this.participant.userData();
-    this.ORDERED_STAGE_MAP = userData.completedStageNames.concat([userData.workingOnStageName], userData.futureStageNames);
   }
 
-  getStageIndex(stageName: string) {
-    if (this.participant) {
-      return this.ORDERED_STAGE_MAP.indexOf(stageName) + 1;
-    }
-    return '';
-  }
   updateCurrentStageName(stageName: string) {
     if (this.participant) {
       this.participant.setViewingStage(stageName);

diff --git a/llm-meditators/webapp/src/assets/items/blanket.png b/llm-meditators/webapp/src/assets/items/blanket.png
diff --git a/llm-meditators/webapp/src/assets/items/compass.png b/llm-meditators/webapp/src/assets/items/compass.png
diff --git a/llm-meditators/webapp/src/assets/items/lighter.png b/llm-meditators/webapp/src/assets/items/lighter.png
diff --git a/llm-meditators/webapp/src/lib/staged-exp/data-model.ts b/llm-meditators/webapp/src/lib/staged-exp/data-model.ts
@@ -12,7 +12,7 @@ import { uniqueId } from 'lodash';
 export enum StageKinds {
   acceptTos = 'acceptTos',
   setProfile = 'setProfile',
-  acceptTosAndSetProfile = 'acceptTosAndSetProfile',
+  acceptTosAndSetProfile = 'acceptTodAndSetProfile',
   groupChat = 'groupChat',
   voteForLeader = 'voteForLeader',
   revealVoted = 'leaderReveal',
@@ -179,24 +179,6 @@ export interface ExpStageVotes extends GenericExpStage<Votes> {
 }
 
 // -------------------------------------------------------------------------------------
-export interface UserProfile {
-  pronouns: string;
-  avatarUrl: string;
-  name: string;
-}
-
-export const getDefaulUserProfileConfig = (): UserProfile => {
-  return {
-    pronouns: '',
-    avatarUrl: '',
-    name: '',
-  };
-};
-
-export interface ExpStageUserProfile extends GenericExpStage<UserProfile> {
-  kind: StageKinds.setProfile;
-}
-
 export interface TosAndUserProfile {
   pronouns: string;
   avatarUrl: string;
@@ -325,7 +307,6 @@ export interface ExpStageSurvey extends GenericExpStage<Survey> {
 // -------------------------------------------------------------------------------------
 export interface TosAcceptance {
   acceptedTosTimestamp: Date | null;
-  tosLines: string[];
 }
 
 export interface ExpStageTosAcceptance extends GenericExpStage<TosAcceptance> {
@@ -361,7 +342,6 @@ export type ExpDataKinds =
 
 export type ExpStage =
   | ExpStageTosAcceptance
-  | ExpStageUserProfile
   | ExpStageTosAndUserProfile
   | ExpStageSurvey
   | ExpStageUserProfile
@@ -372,7 +352,7 @@ export type ExpStage =
 
 // -------------------------------------------------------------------------------------
 export interface UserData {
-  // immutable properties.
+  // immutale properties.
   readonly accessCode: string;
   readonly userId: string;
   // Their appearance.