Implement vote and reveal & other improvements (#8)

* stage as parameter for stage components reactivity * update dockerfile * make the docker config more flexible * rename angular project to llm-mediation-experiments * switch from hardcoded firebase configs to shareable examples * refactor UI for leader vote component * finish leader vote stage * finish scaffold for leader reveal * fix automatic routing from home page * remove mentions of EPFL (& small cleanups) * replace seeders (DB & Auth) with local scripts * remove old seeders * remove participants from Firebase Authentication - use uid as auth key * update readme for participant authentication * add default profiles for auth emulator * fix bugs in chat * rename firebase emulator test config & clarify production instructions * clarify webapp development server instructions * trim down emulator test accounts config to minimal working example * clarify admin script target firebase connection * better naming for incoming chat messages * better message merge * refactor types and utils into a shared "utils" package
PAIR-code · May 16, 2024 · 144591f · 144591f
1 parent d26dc6c
commit 144591f
Show file tree

Hide file tree

Showing 94 changed files with 4,316 additions and 793 deletions.
diff --git a/.firebaserc b/.firebaserc
diff --git a/.firebaserc.example b/.firebaserc.example
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "your-project-id-here"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,3 @@
 *.log
+.firebaserc
+node_modules/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,11 +19,22 @@
         }
       ]
     },
+    {
+      "splitTerminals": [
+        {
+          "name": "shared utilities",
+          "commands": ["cd utils && npm run build:watch"],
+          "icon": "🛠️"
+        }
+      ]
+    },
     {
       "splitTerminals": [
         {
           "name": "firebase",
-          "commands": ["firebase emulators:start"],
+          "commands": [
+            "firebase emulators:start --import ./emulator_test_config"
+          ],
           "icon": "🔥"
         }
       ]

diff --git a/EPFL.md b/EPFL.md
diff --git a/README.md b/README.md
@@ -10,8 +10,6 @@
 
 This is a repository to support collaboration on using LLMs in behavioral economics experiments. e.g. library of relevant UI components and a library for calling LLMs.
 
-[Instance deployed at EPFL](./EPFL.md)
-
 ## Project Structure
 
 ```bash
@@ -20,6 +18,8 @@ This is a repository to support collaboration on using LLMs in behavioral econom
 │
 ├── docs       # Documentation
 │
+├── emulator_test_config  # Firebase Authentication export with default google accounts for Auth emulator
+│
 ├── firestore  # Firestore rules and indexes
 │
 ├── functions  # Firebase Cloud Functions
@@ -33,6 +33,10 @@ This is a repository to support collaboration on using LLMs in behavioral econom
 │       ├── app.ts      # Firebase app initialization
 │       └── index.ts    # Cloud functions entrypoint
 │
+├── scripts    # Seeding scripts
+│
+├── utils      # Shared types, default values & utilities
+│
 └── webapp     # Webapp frontend source code
     ├── node_modules
     └── src               # Frontend source code
@@ -42,6 +46,17 @@ This is a repository to support collaboration on using LLMs in behavioral econom
         └── lib           # API, types & utilities
 ```
 
+## Shared Utilities
+
+The webapp, cloud functions, and seeding scripts share some utilities. These are located in the [`utils`](./utils) directory.
+
+To build the shared utilities and watch for changes, run the following command:
+
+```bash
+cd utils
+npm run build:watch
+```
+
 ## Firebase
 
 This project uses Firebase as its backend. The configuration can be found in the [`.firebaserc`](./.firebaserc) and [`firebase.json`](./firebase.json) files.
@@ -50,16 +65,29 @@ Install the firebase cli tools with the following commands:
 
 ```bash
 npm install -g firebase-tools
-firebase login  # Login to the Google account destined to manage the Firebase project
+firebase login  # Login to an account that has admin rights for the Firebase project
+```
+
+### Configuration
+
+Create the configuration files for a default firebase project:
+
+```bash
+cp .firebaserc.example .firebaserc
+cp webapp/src/lib/api/firebase-config.example.ts webapp/src/lib/api/firebase-config.ts
 ```
 
+This should be enough for local development with emulators. Before deploying to production, be sure to:
+
+- Update the project ID in the [`.firebaserc`](./.firebaserc) file.
+- Update the Firebase app configuration in the [`webapp/src/lib/api/firebase-config.ts`](./webapp/src/lib/api/firebase-config.ts) file.
+
 ### Emulators
 
 In order to run offline and for development purposes, we use Java Firebase emulators.
 
 ```bash
-export JAVA_TOOL_OPTIONS="-Xmx4g"  # Set your desired max RAM (here: 4GB)
-firebase emulators:start  # Start the emulators
+firebase emulators:start --import ./emulator_test_config  # Start the emulators and load the default Authentication configuration
 ```
 
 You will then be able to access the following UIs:
@@ -74,16 +102,14 @@ You will then be able to access the following UIs:
 We use Firestore as our database. The rules are located in the [`firestore.rules`](./firestore.rules) file.
 Basically, the database cannot be externally accessed, and must be interacted with through cloud functions.
 
-A database prototype schema can be found [here on dbdiagrams.io](https://dbdiagram.io/d/Firebase-LLM-Mediation-660d473a03593b6b61123f24) (readonly, change it with your own if you take-on the project).
+A database prototype schema can be found [here on dbdiagrams.io](https://dbdiagram.io/d/Firebase-LLM-Mediation-660d473a03593b6b61123f24) (readonly, change it with your own if you take over the project).
 
 You can seed the database with the default data by running the following command:
 
 ```bash
-curl "http://127.0.0.1:5001/friendlychat-d6dc5/us-central1/seedDatabase?seeder_password=seeder_password"
+cd scripts && npm run seed-db
 ```
 
-This calls a cloud functions that adds to the database the default data. You may want to clear it first.
-
 ### Cloud Functions
 
 We use Firebase Cloud Functions to run server-side code. The functions are located in the [`functions`](./functions) directory.
@@ -99,11 +125,8 @@ Upon running `npm run build`, if the emulator is running, it will automatically
 
 ### Authentication
 
-This project sets up Firebase Authentication with email/password and Google sign-in.
-
-#### Email - Password authentication
-
-By default, experiment participants log in using their `uid`. It is passed to the Firebase Authentication service as `email:{uid}@palabrate` and `password:{uid}`.
+This project sets up Firebase Authentication with Google sign-in.
+Note that participants are not tracked by Firebase Authentication. Their UID work as a unique identifier, nothing else is stored.
 
 #### Google sign-in
 
@@ -124,28 +147,44 @@ If you have everything installed, you can use the `restore terminals` extension
 ## Webapp
 
 The webapp is made using Angular JS 17.
-Run `npm run start` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
 ### Recommended editor setup
 
 This code is being developed using [Visual Studio Code](https://code.visualstudio.com/). Make sure to install the angular extension.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
-### Code scaffolding
+### Development server
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Run `npm run start` or `ng serve` to run the development server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
-### Build
+### Production deployment
 
 Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-### Running unit tests
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.7; it was then updated to Angular 17.
 
-Run `npm run test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+#### Deploying with Docker
 
-### Running end-to-end tests
+A Dockerfile is provided in order to serve the webapp through a container.
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+Build the webapp with the following command:
 
-### Further help
+```bash
+# Default build / test the image locally
+ng build --configuration=production
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.7; it was then updated to Angular 17.
+# Serve the app from the /myapp prefix if you use a k8s cluster that shares the same domain for multiple services.
+ng build --configuration=production --base-href /myapp/
+```
+
+You can then build the docker image with the following command:
+
+```bash
+docker build -t webapp . -t myapp
+```
+
+Test the container locally with the following command:
+
+```bash
+docker run -p 4200:4200 myapp
+```
diff --git a/emulator_test_config/auth_export/accounts.json b/emulator_test_config/auth_export/accounts.json
@@ -0,0 +1,37 @@
+{
+  "kind": "identitytoolkit#DownloadAccountResponse",
+  "users": [
+    {
+      "localId": "R7dWvQjkuhsCJgplJ3WtnUDsD9kR",
+      "displayName": "Experimenter",
+      "email": "experimenter@google.com",
+      "emailVerified": true,
+      "providerUserInfo": [
+        {
+          "providerId": "google.com",
+          "rawId": "1651642867512372825802162318175962691422",
+          "federatedId": "1651642867512372825802162318175962691422",
+          "displayName": "Experimenter",
+          "email": "experimenter@google.com"
+        }
+      ],
+      "photoUrl": "",
+      "customAttributes": "{\"role\": \"experimenter\"}"
+    },
+    {
+      "localId": "e5bXFO0SONUk6VYbiuThBLjrWUfL",
+      "displayName": "Not Experimenter",
+      "email": "not-experimenter@google.com",
+      "emailVerified": true,
+      "providerUserInfo": [
+        {
+          "providerId": "google.com",
+          "rawId": "5305811106632233234179828366493146036480",
+          "federatedId": "5305811106632233234179828366493146036480",
+          "displayName": "Not Experimenter",
+          "email": "not-experimenter@google.com"
+        }
+      ]
+    }
+  ]
+}
diff --git a/emulator_test_config/auth_export/config.json b/emulator_test_config/auth_export/config.json
@@ -0,0 +1,4 @@
+{
+  "signIn": { "allowDuplicateEmails": false },
+  "emailPrivacyConfig": { "enableImprovedEmailPrivacy": false }
+}
diff --git a/emulator_test_config/firebase-export-metadata.json b/emulator_test_config/firebase-export-metadata.json
@@ -0,0 +1,7 @@
+{
+  "version": "13.7.5",
+  "auth": {
+    "version": "13.7.5",
+    "path": "auth_export"
+  }
+}
diff --git a/firebase.json b/firebase.json
@@ -7,7 +7,12 @@
     {
       "source": "functions",
       "codebase": "default",
-      "ignore": ["node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log"],
+      "ignore": [
+        "node_modules",
+        ".git",
+        "firebase-debug.log",
+        "firebase-debug.*.log"
+      ],
       "predeploy": [
         "npm --prefix \"$RESOURCE_DIR\" run lint",
         "npm --prefix \"$RESOURCE_DIR\" run build"

diff --git a/firestore/firestore.rules b/firestore/firestore.rules
@@ -10,13 +10,13 @@ service cloud.firestore {
     // Rules for the participants_progressions collection
     match /participants_progressions/{progressionId} {
       // Allow single-document reads
-      allow read: if request.auth.token.role == 'experimenter' || request.auth.token.role == 'participant';
+      allow read: if true;
     }
 
     // Rules for the chat toggle collection
     match /participants_ready_to_end_chat/{chatId} {
       // Allow single document reads
-      allow read: if request.auth.token.role == 'experimenter' || request.auth.token.role == 'participant';
+      allow read: if true;
     }
 
     // Else: disallow everything (access via cloud functions only)

diff --git a/functions/.env.example b/functions/.env.example
diff --git a/functions/package-lock.json b/functions/package-lock.json
diff --git a/functions/package.json b/functions/package.json
@@ -15,6 +15,7 @@
   },
   "main": "lib/index.js",
   "dependencies": {
+    "@llm-mediation-experiments/utils": "file:../utils",
     "@sinclair/typebox": "^0.32.20",
     "firebase-admin": "^12.1.0",
     "firebase-functions": "^4.9.0",