Here is the modification of the example: https://perchance.org/gqp3r7gugk
On that one, you can see on Line 56 is where you can access the username of the person that sent the comment. My implementation is as follows:
- We can specify a pattern that the users can follow so the code can parse the URL that is provided.
- Since the nickname is only 50 characters long only, we can have them only specify the File ID of their avatar that is uploaded on the Perchance upload.
- The file id is the random string before the file extension e.g.
https://user-uploads.perchance.org/file/<file id>.<file extension>
which is about 32 characters + 4-5 characters due to file extension and the dot (.webp, .png, .jpeg etc) so only 13 characters are left for the nickname (at the minimum). - The pattern is as follows:
nickname|fileId.fileExtension
so on the code we can split them to the file ID and the nickname. - On Line 61 is where we create an Image element and pass the file id to the URL formatting for accessing files in the upload.
- On LIne 66, I just revamped the bubble format, so it is a little bit like the
ai-character-chat
message bubble. - We also prioritize the blue username, if available, over the provided nickname. So, if the person has a blue nickname, they can just pass through
|fileID.fileExtension
on the nickname.