refactor: Move the message list to its own component

[wheval]

Fixes Issue

My PR closes #663

👨‍💻 Changes proposed(What did you do ?)

1. Fixed change the span to a button for the is bads words element #666
2. Fixed use the logical AND operator to display the message when the user tries to show a bad word #667
3. Created a component for BadWordsMessage
4. Created a component for MessagesList

✔️ Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.

Note to reviewers

📷 Screenshots

[vercel]

@wheval is attempting to deploy a commit to the dunsin's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

PR Compliance Checks Passed!

[Dun-sin]

looks like alot of things can be moved to their respective new components and don't need to be props, find those things and move them accordingly.

Also you weren't assigned to these issues therefore you shouldn't work on them, revert to the previous code for this two:
Fixed https://github.com/Dun-sin/Whisper/issues/666 Fixed https://github.com/Dun-sin/Whisper/issues/667

[Dun-sin]

@wheval also screenshots should be of the working code, i.e website being up and runing with the area where your change was done as a screen recording if it's not a basic UI change

[Dun-sin]

hi @wheval the time assigned to this Issue is over, your PR is now closed. Thanks for trying to contribute, you're free to ask to work on other issues, if you can meet up with the time assigned.