Set Profile component

llm-meditators/webapp/src/app/exp-profile/exp-profile.component.html

@@ -1 +1,47 @@
-<p>exp-profile works!</p>
+@if (error() == null) {
+<div class="main">
+    <h2>Profile Setting</h2>
+    <p>
+        Please select your preferred pronouns. This will be used to refer to you in the app.
+    </p>
+
+    <mat-radio-group class="pronouns-radio-group" (change)="updatePronouns($event)">
+        <mat-radio-button class="pronouns-radio-button" value="She/Her">She/Her</mat-radio-button>
+        <mat-radio-button class="pronouns-radio-button" value="They/Them">They/Them</mat-radio-button>
+        <mat-radio-button class="pronouns-radio-button" value="He/Him">He/Him</mat-radio-button>
+    </mat-radio-group>
+
+    <p>
+        <br>
+        <br>
+        Please select your pseudo. This will be used to refer to you in the app.
+    </p>
+
+    <form class="settings-form">
+        <mat-form-field class="full-width">
+          <mat-label>My Name</mat-label>
+          <input matInput placeholder="Write your response" [formControl]="responseControl">
+        </mat-form-field>
+    </form>
+
+    <p>
+        <br>
+        <br>
+        Please select your avatar. This will be used to refer to you in the app.
+    </p>
+
+    <mat-radio-group class="avatar-radio-group" (change)="updateAvatarUrl($event)">
+        <mat-radio-button class="avatar-radio-button" value="/assets/avatars/she.png"><img src="/assets/avatars/she.png" alt="Avatar Female" width="72" height="77" /></mat-radio-button> 
+        <mat-radio-button class="avatar-radio-button" value="/assets/avatars/they.png"><img src="/assets/avatars/they.png" alt="Avatar Neutral" width="72" height="77" /></mat-radio-button>
+        <mat-radio-button class="avatar-radio-button" value="/assets/avatars/he.png"><img src="/assets/avatars/he.png" alt="Avatar Male" width="72" height="77" /></mat-radio-button>
+    </mat-radio-group>
+
+
+
+
+</div>
+} @else {
+  <div class="error">
+    {{error()}}
+  </div>
+}

llm-meditators/webapp/src/app/exp-profile/exp-profile.component.scss

@@ -0,0 +1,31 @@
+.main {
+    padding: 2rem 1rem;
+  }
+
+  label {
+    font-weight: bold;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .pronouns-radio-group {
+    display: flex;
+    align-items: center;
+
+    .pronouns-radio-button {
+      margin: 5px;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+
+  .avatar-radio-group {
+    display: flex;
+    flex-direction: column;
+    margin: 15px 0;
+    align-items: flex-start;
+  }
+
+  .avatar-radio-button {
+    margin: 5px;
+  }

llm-meditators/webapp/src/app/exp-profile/exp-profile.component.ts

@@ -6,13 +6,83 @@
  * found in the LICENSE file and http://www.apache.org/licenses/LICENSE-2.0
 ==============================================================================*/
 
-import { Component } from '@angular/core';
+import { Component, Signal, computed } from '@angular/core';
+import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { SavedDataService } from '../services/saved-data.service';
+import { User, UserProfile } from '../../lib/staged-exp/data-model';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+const dummyProfileData: UserProfile = {
+  pronouns: "They/Them",
+  avatarUrl: '/assets/avatars/they.png',
+  name: 'John Doe',
+};
 
 @Component({
   selector: 'app-exp-profile',
   standalone: true,
-  imports: [],
+  imports: [MatRadioModule, MatButtonModule, MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule],
   templateUrl: './exp-profile.component.html',
   styleUrl: './exp-profile.component.scss',
 })
-export class ExpProfileComponent {}
+export class ExpProfileComponent {
+  public responseControl: FormControl<string | null>;
+  public stageData: Signal<UserProfile>;
+  public error: Signal<string | null>;
+
+  constructor(private dataService: SavedDataService) {
+    this.error = computed(() => {
+      const currentStage = this.dataService.user().currentStage;
+      if (!currentStage) {
+        return `currentStage is undefined`;
+      }
+      if (currentStage.kind !== 'set-profile') {
+        return `currentStage is kind is not right: ${JSON.stringify(currentStage, null, 2)}`;
+      }
+      return null;
+    });
+
+    // Assumption: this is only ever constructed when
+    // `this.dataService.data().experiment.currentStage` references a
+    // ExpStageUserProfile.
+
+    this.stageData = computed(() => {
+      if (this.dataService.data().user.currentStage.kind !== 'set-profile') {
+        return dummyProfileData;
+      }
+      return this.dataService.data().user.currentStage.config as UserProfile;
+    });
+
+    this.responseControl = new FormControl<string>('');
+    this.responseControl.valueChanges.forEach((n) => {
+      if (n) {
+        const curStageData = this.stageData();
+        curStageData.name = n;
+        this.updateStageAndUser(curStageData);
+      }
+      console.log(this.stageData());
+    });
+
+  }
+
+  updatePronouns(updatedValue: MatRadioChange){
+    const curStageData = this.stageData();
+    curStageData.pronouns = updatedValue.value;
+    this.updateStageAndUser(curStageData);
+  }
+
+  updateAvatarUrl(updatedValue: MatRadioChange){
+    const curStageData = this.stageData();
+    curStageData.avatarUrl = updatedValue.value;
+    this.updateStageAndUser(curStageData);
+  }
+
+  updateStageAndUser(curStageData: UserProfile){
+    this.dataService.updateExpStage(curStageData);
+    this.dataService.updateUser(curStageData);
+  }
+
+}

llm-meditators/webapp/src/app/services/saved-data.service.ts

@@ -8,7 +8,7 @@
 
 import { computed, effect, Injectable, Signal, signal, untracked, WritableSignal } from '@angular/core';
 import { LmApiService } from './lm-api.service';
-import { Experiment, ExpStage, User, ExpDataKinds, END_STAGE } from '../../lib/staged-exp/data-model';
+import { Experiment, ExpStage, User, ExpDataKinds, END_STAGE, UserProfile } from '../../lib/staged-exp/data-model';
 import { initialExperimentSetup, initUserData } from '../../lib/staged-exp/example-experiment';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as _ from 'underscore';
@@ -192,6 +192,12 @@ export class SavedDataService {
     this.data.set({ ...data });
   }
 
+  updateUser(newUserProfile: UserProfile) {
+    const data = this.data();
+    Object.assign(this.user().profile, newUserProfile);
+    this.data.set({ ...data });
+  }
+
   reset() {
     this.data.set(initialAppData());
   }