Add showParticipantNumber option.

Author: rasmi

docs/assets/api/schemas.json

@@ -1450,6 +1450,9 @@
               "type": "string"
             }
           ]
+        },
+        "showParticipantNumber": {
+          "type": "boolean"
         }
       }
     },

frontend/src/components/stages/profile_stage_editor.ts

@@ -1,4 +1,5 @@
 import '../../pair-components/textarea';
+import '@material/web/checkbox/checkbox.js';
 import '@material/web/radio/radio';
 
 import {MobxLitElement} from '@adobe/lit-mobx';
@@ -8,11 +9,7 @@ import {customElement, property} from 'lit/decorators.js';
 import {core} from '../../core/core';
 import {ExperimentEditor} from '../../services/experiment.editor';
 
-import {
-  ProfileType,
-  ProfileStageConfig,
-  StageKind,
-} from '@deliberation-lab/utils';
+import {ProfileType, ProfileStageConfig} from '@deliberation-lab/utils';
 
 import {styles} from './profile_stage_editor.scss';
 
@@ -99,6 +96,29 @@ export class ProfileStageEditorComponent extends MobxLitElement {
           ></md-radio>
           <label>🐱 Generate anonymous animal-themed profiles</label>
         </div>
+        ${this.stage.profileType === ProfileType.ANONYMOUS_ANIMAL
+          ? html`
+              <label class="checkbox-wrapper">
+                <md-checkbox
+                  touch-target="wrapper"
+                  ?checked=${this.stage.showParticipantNumber}
+                  ?disabled=${!this.experimentEditor.canEditStages}
+                  @click=${() => {
+                    if (!this.stage) return;
+                    this.experimentEditor.updateStage({
+                      ...this.stage,
+                      showParticipantNumber: !this.stage.showParticipantNumber,
+                    });
+                  }}
+                >
+                </md-checkbox>
+                <span
+                  >Include numeric ID in name (e.g., Bear123 instead of
+                  Bear)</span
+                >
+              </label>
+            `
+          : nothing}
         <div class="profile-option">
           <md-radio
             name="profile-type"

functions/src/participant.endpoints.ts

@@ -140,8 +140,16 @@ export const createParticipant = onCall(async (request) => {
       ) as ProfileStageConfig | undefined;
       const profileType =
         profileStage?.profileType || ProfileType.ANONYMOUS_ANIMAL;
-
-      setProfile(numParticipants, participantConfig, true, profileType);
+      const showParticipantNumber =
+        profileStage?.showParticipantNumber ?? false;
+
+      setProfile(
+        numParticipants,
+        participantConfig,
+        true,
+        profileType,
+        showParticipantNumber,
+      );
     } else {
       setProfile(numParticipants, participantConfig, false);
     }

scripts/deliberate_lab/types.py

@@ -391,6 +391,7 @@ class ProfileStageConfig(BaseModel):
     descriptions: StageTextConfig
     progress: StageProgressConfig
     profileType: ProfileType
+    showParticipantNumber: bool | None = None
 
 
 class Strategy(StrEnum):

utils/src/participant.ts

@@ -191,6 +191,7 @@ export function setProfile(
   config: ParticipantProfileExtended,
   setAnonymousProfile = false,
   profileType: ProfileType = ProfileType.ANONYMOUS_ANIMAL,
+  showParticipantNumber = false,
 ) {
   const generateProfileFromSet = (
     profileSet: {name: string; avatar: string}[],
@@ -229,6 +230,13 @@ export function setProfile(
   const profileNature = generateProfileFromSet(PROFILE_SET_NATURE);
   const profileAnonymousParticipant = generateAnonymousParticipantProfile();
 
+  // Append random numerics to profile names (e.g., "Bear123" instead of "Bear")
+  if (showParticipantNumber) {
+    profileAnimal1.name = `${profileAnimal1.name}${randomNumber}`;
+    profileAnimal2.name = `${profileAnimal2.name}${randomNumber}`;
+    profileNature.name = `${profileNature.name}${randomNumber}`;
+  }
+
   config.anonymousProfiles[PROFILE_SET_ANIMALS_1_ID] = profileAnimal1;
   config.anonymousProfiles[PROFILE_SET_ANIMALS_2_ID] = profileAnimal2;
   config.anonymousProfiles[PROFILE_SET_NATURE_ID] = profileNature;
@@ -259,7 +267,12 @@ export function setProfile(
       config.avatar = participantProfile.avatar;
     } else if (profileType === ProfileType.ANONYMOUS_ANIMAL) {
       // Use animal profile (default)
-      config.name = `${mainProfile.name}${mainProfile.repeat === 0 ? '' : ` ${mainProfile.repeat + 1}`}`;
+      if (showParticipantNumber) {
+        // Name already has numeric suffix (e.g., "Bear1234")
+        config.name = mainProfile.name;
+      } else {
+        config.name = `${mainProfile.name}${mainProfile.repeat === 0 ? '' : ` ${mainProfile.repeat + 1}`}`;
+      }
       config.avatar = mainProfile.avatar;
     }
     // Note: ProfileType.DEFAULT should not reach here as setAnonymousProfile would be false

utils/src/stages/profile_stage.ts

@@ -22,6 +22,7 @@ export enum ProfileType {
 export interface ProfileStageConfig extends BaseStageConfig {
   kind: StageKind.PROFILE;
   profileType: ProfileType;
+  showParticipantNumber?: boolean; // e.g., "Bear123" instead of "Bear"
 }
 
 // ************************************************************************* //
@@ -39,5 +40,6 @@ export function createProfileStage(
     descriptions: config.descriptions ?? createStageTextConfig(),
     progress: config.progress ?? createStageProgressConfig(),
     profileType: config.profileType ?? ProfileType.DEFAULT,
+    showParticipantNumber: config.showParticipantNumber ?? true,
   };
 }

utils/src/stages/profile_stage.validation.ts

@@ -23,6 +23,7 @@ export const ProfileStageConfigData = Type.Composite(
           Type.Literal(ProfileType.ANONYMOUS_ANIMAL),
           Type.Literal(ProfileType.ANONYMOUS_PARTICIPANT),
         ]),
+        showParticipantNumber: Type.Optional(Type.Boolean()),
       },
       strict,
     ),