diff --git a/web/components/chat/ChatContainer/ChatContainer.stories.tsx b/web/components/chat/ChatContainer/ChatContainer.stories.tsx index 1d3cee7b0..3ca706472 100644 --- a/web/components/chat/ChatContainer/ChatContainer.stories.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.stories.tsx @@ -21,8 +21,550 @@ export default { }, } as ComponentMeta; -const testMessages = - '[{"type":"CHAT","id":"wY-MEXwnR","timestamp":"2022-04-28T20:30:27.001762726Z","user":{"id":"h_5GQ6E7R","displayName":"UserDisplayName42","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"this is a test message"},{"type":"CHAT","id":"VhLGEXwnR","timestamp":"2022-04-28T20:30:28.806999545Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hit 3"},{"type":"CHAT","id":"GguMEuw7R","timestamp":"2022-04-28T20:30:34.500150601Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Jkjk"},{"type":"CHAT","id":"y_-VEXwnR","timestamp":"2022-04-28T20:31:32.695583044Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m doing alright. How about you Hatnix?"},{"type":"CHAT","id":"qAaKEuwng","timestamp":"2022-04-28T20:34:16.22275314Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Oh shiet I didn\u0026#39;t think you would kill him"},{"type":"CHAT","id":"8wUFEuwnR","timestamp":"2022-04-28T20:34:21.624898714Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hahaha, ruthless"},{"type":"CHAT","id":"onYcPuQnR","timestamp":"2022-04-28T20:34:50.671024312Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;ve never played it before"},{"type":"CHAT","id":"kORyEXQ7R","timestamp":"2022-04-28T20:40:29.761977233Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"brb real quick"},{"type":"CHAT","id":"F3DvsuQ7g","timestamp":"2022-04-28T20:50:29.451341783Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m back"},{"type":"CHAT","id":"AH2vsXwnR","timestamp":"2022-04-28T20:50:33.872156152Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Whoa what happened here?"},{"type":"CHAT","id":"xGkOsuw7R","timestamp":"2022-04-28T20:50:53.202147658Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Your dwarf was half naked."},{"type":"CHAT","id":"opIdsuw7g","timestamp":"2022-04-28T20:50:59.631595947Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"lol"},{"type":"CHAT","id":"JpwdsuQnR","timestamp":"2022-04-28T20:51:18.065535459Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"evening did i just see you running around in... nothing"},{"type":"CHAT","id":"R4WKsXw7R","timestamp":"2022-04-28T20:51:28.064914803Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"^^"},{"type":"CHAT","id":"g-PKyXw7g","timestamp":"2022-04-28T20:51:47.936500772Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Lol Starfarer, so my eyes didnt deceive me."},{"type":"CHAT","id":"fV8Ksuw7R","timestamp":"2022-04-28T20:51:49.588744112Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"hahahaha"},{"type":"CHAT","id":"TaStyuwnR","timestamp":"2022-04-28T20:52:38.127528579Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"lol sounds nice"},{"type":"CHAT","id":"JGposuwng","timestamp":"2022-04-28T20:53:49.329567087Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!hydrate"},{"type":"CHAT","id":"T4tTsuwng","timestamp":"2022-04-28T20:53:49.391636551Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"test 123"},{"type":"CHAT","id":"wUJTsuw7R","timestamp":"2022-04-28T20:53:54.073218761Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!stretch"},{"id":"xDHBYL4Vgz","timestamp":"2022-10-05T01:50:08.178863235Z","type":"USER_JOINED","user":{"id":"fg9tcCnVg","displayName":"brave-khorana","displayColor":293,"createdAt":"2022-09-25T15:27:35.444193966Z","previousNames":["brave-khorana"],"nameChangedAt":"0001-01-01T00:00:00Z","isBot":false,"authenticated":false}},{"type":"CHAT","id":"S_Joyuw7R","timestamp":"2022-04-28T20:53:54.119778013Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"blah blah"},{"body":"Bonjour gabe. What a pleasure to meet you.","id":"YZqhLYV4g","timestamp":"2022-10-05T01:47:13.909247665Z","type":"SYSTEM","user":{"displayName":"Owncast TV"}},{"type":"CHAT","id":"MtYTyXwnR","timestamp":"2022-04-28T20:53:57.796985761Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"heyy toudy"},{"type":"CHAT","id":"MtYTyXwnR","timestamp":"2022-04-28T20:53:57.796985761Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"how is everyone?"}]'; +const testMessages = `[ + { + "type": "CHAT", + "id": "wY-MEXwnR", + "timestamp": "2022-04-28T20:30:27.001762726Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "UserDisplayName42", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "this is a test message" + }, + { + "type": "CHAT", + "id": "VhLGEXwnR", + "timestamp": "2022-04-28T20:30:28.806999545Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "Hit 3" + }, + { + "type": "CHAT", + "id": "GguMEuw7R", + "timestamp": "2022-04-28T20:30:34.500150601Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "Jkjk" + }, + { + "type": "CHAT", + "id": "y_-VEXwnR", + "timestamp": "2022-04-28T20:31:32.695583044Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "I\\u0026#39;m doing alright. How about you Hatnix?" + }, + { + "type": "CHAT", + "id": "qAaKEuwng", + "timestamp": "2022-04-28T20:34:16.22275314Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "Oh shiet I didn\\u0026#39;t think you would kill him" + }, + { + "type": "CHAT", + "id": "8wUFEuwnR", + "timestamp": "2022-04-28T20:34:21.624898714Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "Hahaha, ruthless" + }, + { + "type": "CHAT", + "id": "onYcPuQnR", + "timestamp": "2022-04-28T20:34:50.671024312Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "I\\u0026#39;ve never played it before" + }, + { + "type": "CHAT", + "id": "kORyEXQ7R", + "timestamp": "2022-04-28T20:40:29.761977233Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "brb real quick" + }, + { + "type": "CHAT", + "id": "F3DvsuQ7g", + "timestamp": "2022-04-28T20:50:29.451341783Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "I\\u0026#39;m back" + }, + { + "type": "CHAT", + "id": "AH2vsXwnR", + "timestamp": "2022-04-28T20:50:33.872156152Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "Whoa what happened here?" + }, + { + "type": "CHAT", + "id": "xGkOsuw7R", + "timestamp": "2022-04-28T20:50:53.202147658Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "Your dwarf was half naked." + }, + { + "type": "CHAT", + "id": "opIdsuw7g", + "timestamp": "2022-04-28T20:50:59.631595947Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "lol" + }, + { + "type": "CHAT", + "id": "JpwdsuQnR", + "timestamp": "2022-04-28T20:51:18.065535459Z", + "user": { + "id": "vbh9gtPng", + "displayName": "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "displayColor": 276, + "createdAt": "2022-03-16T21:02:32.009965702Z", + "previousNames": [ + "goth-volhard", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’" + ], + "nameChangedAt": "2022-04-14T21:51:50.97992512Z", + "scopes": [ + "" + ] + }, + "body": "evening did i just see you running around in... nothing" + }, + { + "type": "CHAT", + "id": "R4WKsXw7R", + "timestamp": "2022-04-28T20:51:28.064914803Z", + "user": { + "id": "vbh9gtPng", + "displayName": "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "displayColor": 276, + "createdAt": "2022-03-16T21:02:32.009965702Z", + "previousNames": [ + "goth-volhard", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’" + ], + "nameChangedAt": "2022-04-14T21:51:50.97992512Z", + "scopes": [ + "" + ] + }, + "body": "^^" + }, + { + "type": "CHAT", + "id": "g-PKyXw7g", + "timestamp": "2022-04-28T20:51:47.936500772Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "Lol Starfarer, so my eyes didnt deceive me." + }, + { + "type": "CHAT", + "id": "fV8Ksuw7R", + "timestamp": "2022-04-28T20:51:49.588744112Z", + "user": { + "id": "h_5GQ6E7R", + "displayName": "EliteMooseTaskForce", + "displayColor": 329, + "createdAt": "2022-03-24T03:52:37.966584694Z", + "previousNames": [ + "gifted-nobel", + "EliteMooseTaskForce" + ], + "nameChangedAt": "2022-04-26T23:56:05.531287897Z", + "scopes": [ + "" + ] + }, + "body": "hahahaha" + }, + { + "type": "CHAT", + "id": "TaStyuwnR", + "timestamp": "2022-04-28T20:52:38.127528579Z", + "user": { + "id": "vbh9gtPng", + "displayName": "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "displayColor": 276, + "createdAt": "2022-03-16T21:02:32.009965702Z", + "previousNames": [ + "goth-volhard", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’" + ], + "nameChangedAt": "2022-04-14T21:51:50.97992512Z", + "scopes": [ + "" + ] + }, + "body": "lol sounds nice" + }, + { + "type": "CHAT", + "id": "JGposuwng", + "timestamp": "2022-04-28T20:53:49.329567087Z", + "user": { + "id": "GCa3J9P7R", + "displayName": "(ghost of)^10 * toudy49", + "displayColor": 147, + "createdAt": "2022-03-22T21:49:25.284237821Z", + "previousNames": [ + "lucid-pike", + "toudy49", + "ghost of toudy49", + "ghost of ghost of toudy49", + "ghost of ghost of ghost of toudy49", + "ghost of ghost of ghost of ghost of toudy49", + "ghost of ghost of ghost of ghost of ghost of toudy49", + "ghost ofghost of ghost of ghost of ghost of ghost of toudy49", + "ghostof ghost of ghost of ghost of ghost of ghost of toudy49", + "(ghost of)^6 * toudy49", + "(ghost of)^7 * toudy49", + "(ghost of)^8 * toudy49", + "(ghost of)^9 * toudy49", + "(ghost of)^10 * toudy49" + ], + "nameChangedAt": "2022-04-11T21:01:19.938445828Z", + "scopes": [ + "" + ] + }, + "body": "!hydrate" + }, + { + "type": "CHAT", + "id": "T4tTsuwng", + "timestamp": "2022-04-28T20:53:49.391636551Z", + "user": { + "id": "fKINHKpnR", + "displayName": "hatnixbot", + "displayColor": 325, + "createdAt": "2021-11-24T08:11:32Z", + "previousNames": [ + "hatnixbot" + ], + "scopes": [ + "CAN_SEND_SYSTEM_MESSAGES", + "CAN_SEND_MESSAGES", + "HAS_ADMIN_ACCESS" + ] + }, + "body": "test 123" + }, + { + "type": "CHAT", + "id": "wUJTsuw7R", + "timestamp": "2022-04-28T20:53:54.073218761Z", + "user": { + "id": "GCa3J9P7R", + "displayName": "(ghost of)^10 * toudy49", + "displayColor": 147, + "createdAt": "2022-03-22T21:49:25.284237821Z", + "previousNames": [ + "lucid-pike", + "toudy49", + "ghost of toudy49", + "ghost of ghost of toudy49", + "ghost of ghost of ghost of toudy49", + "ghost of ghost of ghost of ghost of toudy49", + "ghost of ghost of ghost of ghost of ghost of toudy49", + "ghost ofghost of ghost of ghost of ghost of ghost of toudy49", + "ghostof ghost of ghost of ghost of ghost of ghost of toudy49", + "(ghost of)^6 * toudy49", + "(ghost of)^7 * toudy49", + "(ghost of)^8 * toudy49", + "(ghost of)^9 * toudy49", + "(ghost of)^10 * toudy49" + ], + "nameChangedAt": "2022-04-11T21:01:19.938445828Z", + "scopes": [ + "" + ] + }, + "body": "!stretch" + }, + { + "id": "xDHBYL4Vgz", + "timestamp": "2022-10-05T01:50:08.178863235Z", + "type": "USER_JOINED", + "user": { + "id": "fg9tcCnVg", + "displayName": "brave-khorana", + "displayColor": 293, + "createdAt": "2022-09-25T15:27:35.444193966Z", + "previousNames": [ + "brave-khorana" + ], + "nameChangedAt": "0001-01-01T00:00:00Z", + "isBot": false, + "authenticated": false + } + }, + { + "type": "CHAT", + "id": "S_Joyuw7R", + "timestamp": "2022-04-28T20:53:54.119778013Z", + "user": { + "id": "fKINHKpnR", + "displayName": "hatnixbot", + "displayColor": 325, + "createdAt": "2021-11-24T08:11:32Z", + "previousNames": [ + "hatnixbot" + ], + "scopes": [ + "CAN_SEND_SYSTEM_MESSAGES", + "CAN_SEND_MESSAGES", + "HAS_ADMIN_ACCESS" + ] + }, + "body": "blah blah" + }, + { + "body": "Bonjour gabe. What a pleasure to meet you.", + "id": "YZqhLYV4g", + "timestamp": "2022-10-05T01:47:13.909247665Z", + "type": "SYSTEM", + "user": { + "displayName": "Owncast TV" + } + }, + { + "type": "CHAT", + "id": "MtYTyXwnR", + "timestamp": "2022-04-28T20:53:57.796985761Z", + "user": { + "id": "vbh9gtPng", + "displayName": "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "displayColor": 276, + "createdAt": "2022-03-16T21:02:32.009965702Z", + "previousNames": [ + "goth-volhard", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’" + ], + "nameChangedAt": "2022-04-14T21:51:50.97992512Z", + "scopes": [ + "" + ] + }, + "body": "heyy toudy" + }, + { + "type": "CHAT", + "id": "MtYTyXwnR", + "timestamp": "2022-04-28T20:53:57.796985761Z", + "user": { + "id": "vbh9gtPng", + "displayName": "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "displayColor": 276, + "createdAt": "2022-03-16T21:02:32.009965702Z", + "previousNames": [ + "goth-volhard", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’", + "π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’" + ], + "nameChangedAt": "2022-04-14T21:51:50.97992512Z", + "scopes": [ + "" + ] + }, + "body": "how is everyone?" + }, + { + "body": "Gabe Test liked that this stream went live.", + "id": "FTprqf0VR", + "image": "https://media.mastodon.cloud/accounts/avatars/000/463/008/original/d0bc0971a54ffc75.jpg", + "link": "https://mastodon.cloud/users/gabektest", + "timestamp": "2023-02-05T17:49:36.619470844-08:00", + "title": "gabektest@mastodon.cloud", + "type": "FEDIVERSE_ENGAGEMENT_LIKE", + "user": { + "displayName": "New Owncast Server" + } + } + ]`; const messages: ChatMessage[] = JSON.parse(testMessages); const AddMessagesChatExample = args => { diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx index 789ae924e..0d56cf0af 100644 --- a/web/components/chat/ChatContainer/ChatContainer.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.tsx @@ -3,6 +3,7 @@ import { useState, useMemo, useRef, CSSProperties, FC, useEffect } from 'react'; import dynamic from 'next/dynamic'; import { ConnectedClientInfoEvent, + FediverseEvent, MessageType, NameChangeEvent, } from '../../../interfaces/socket-events'; @@ -16,6 +17,7 @@ import { ChatSystemMessage } from '../ChatSystemMessage/ChatSystemMessage'; import { ChatJoinMessage } from '../ChatJoinMessage/ChatJoinMessage'; import { ScrollToBotBtn } from './ScrollToBotBtn'; import { ChatActionMessage } from '../ChatActionMessage/ChatActionMessage'; +import { ChatSocialMessage } from '../ChatSocialMessage/ChatSocialMessage'; // Lazy loaded components @@ -105,6 +107,8 @@ export const ChatContainer: FC = ({ ); }; + const getFediverseMessage = (message: FediverseEvent) => ; + const getUserJoinedMessage = (message: ChatMessage) => { const { user: { displayName, displayColor }, @@ -138,7 +142,7 @@ export const ChatContainer: FC = ({ const getViewForMessage = ( index: number, - message: ChatMessage | NameChangeEvent | ConnectedClientInfoEvent, + message: ChatMessage | NameChangeEvent | ConnectedClientInfoEvent | FediverseEvent, ) => { switch (message.type) { case MessageType.CHAT: @@ -147,18 +151,18 @@ export const ChatContainer: FC = ({ message={message as ChatMessage} showModeratorMenu={isModerator} // Moderators have access to an additional menu highlightString={usernameToHighlight} // What to highlight in the message - sentBySelf={message.user?.id === chatUserId} // The local user sent this message + sentBySelf={(message as ChatMessage).user?.id === chatUserId} // The local user sent this message sameUserAsLast={shouldCollapseMessages(messages, index)} isAuthorModerator={(message as ChatMessage).user.scopes?.includes('MODERATOR')} isAuthorBot={(message as ChatMessage).user.scopes?.includes('BOT')} - isAuthorAuthenticated={message.user?.authenticated} + isAuthorAuthenticated={(message as ChatMessage).user?.authenticated} key={message.id} /> ); case MessageType.NAME_CHANGE: return getNameChangeViewForMessage(message as NameChangeEvent); case MessageType.CONNECTED_USER_INFO: - return getConnectedInfoMessage(message); + return getConnectedInfoMessage(message as ConnectedClientInfoEvent); case MessageType.USER_JOINED: return getUserJoinedMessage(message as ChatMessage); case MessageType.CHAT_ACTION: @@ -171,6 +175,12 @@ export const ChatContainer: FC = ({ key={message.id} /> ); + case MessageType.FEDIVERSE_ENGAGEMENT_FOLLOW: + return getFediverseMessage(message as FediverseEvent); + case MessageType.FEDIVERSE_ENGAGEMENT_LIKE: + return getFediverseMessage(message as FediverseEvent); + case MessageType.FEDIVERSE_ENGAGEMENT_REPOST: + return getFediverseMessage(message as FediverseEvent); default: return null; diff --git a/web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss b/web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss index 23f1f150d..81c420839 100644 --- a/web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss +++ b/web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss @@ -7,6 +7,7 @@ height: 85px; width: 300px; overflow: hidden; + background-color: var(--theme-color-background-main); &:hover { border-color: var(--theme-text-link); @@ -23,6 +24,7 @@ .body { color: var(--theme-color-components-text-on-light); text-overflow: ellipsis; + line-height: 1.2rem; } .account { @@ -37,8 +39,8 @@ height: 25px; top: -20px; left: 40px; - border-color: white; - border-width: 1px; + border-color: var(--theme-color-background-main); + border-width: 2px; border-style: solid; border-radius: 50%; background-size: cover; diff --git a/web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx b/web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx index b1cd8f036..636b020f8 100644 --- a/web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx +++ b/web/components/chat/ChatSocialMessage/ChatSocialMessage.stories.tsx @@ -13,7 +13,7 @@ const Template: ComponentStory = args => = ({ message }) => { let Icon; switch (type.toString()) { - case 'follow': + case 'FEDIVERSE_ENGAGEMENT_FOLLOW': Icon = FollowIcon; break; - case 'like': + case 'FEDIVERSE_ENGAGEMENT_LIKE': Icon = LikeIcon; break; - case 'repost': + case 'FEDIVERSE_ENGAGEMENT_REPOST': Icon = RepostIcon; break; default: diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx index c71f15d9f..040bd1431 100644 --- a/web/components/stores/ClientConfigStore.tsx +++ b/web/components/stores/ClientConfigStore.tsx @@ -20,6 +20,7 @@ import { ChatEvent, MessageVisibilityEvent, SocketEvent, + FediverseEvent, } from '../../interfaces/socket-events'; import { mergeMeta } from '../../utils/helpers'; import handleConnectedClientInfoMessage from './eventhandlers/connected-client-info-handler'; @@ -160,7 +161,7 @@ export const ClientConfigStore: FC = () => { const [clientConfig, setClientConfig] = useRecoilState(clientConfigStateAtom); const [, setServerStatus] = useRecoilState(serverStatusState); const setClockSkew = useSetRecoilState(clockSkewAtom); - const [chatMessages, setChatMessages] = useRecoilState(chatMessagesAtom); + const [chatMessages, setChatMessages] = useRecoilState(chatMessagesAtom); const [accessToken, setAccessToken] = useRecoilState(accessTokenAtom); const setAppState = useSetRecoilState(appStateAtom); const setGlobalFatalErrorMessage = useSetRecoilState(fatalErrorStateAtom); @@ -307,6 +308,15 @@ export const ClientConfigStore: FC = () => { case MessageType.CHAT_ACTION: setChatMessages(currentState => [...currentState, message as ChatEvent]); break; + case MessageType.FEDIVERSE_ENGAGEMENT_FOLLOW: + setChatMessages(currentState => [...currentState, message as FediverseEvent]); + break; + case MessageType.FEDIVERSE_ENGAGEMENT_LIKE: + setChatMessages(currentState => [...currentState, message as FediverseEvent]); + break; + case MessageType.FEDIVERSE_ENGAGEMENT_REPOST: + setChatMessages(currentState => [...currentState, message as FediverseEvent]); + break; case MessageType.VISIBILITY_UPDATE: handleMessageVisibilityChange(message as MessageVisibilityEvent); break; diff --git a/web/interfaces/socket-events.ts b/web/interfaces/socket-events.ts index 783bb88c8..18d833fd8 100644 --- a/web/interfaces/socket-events.ts +++ b/web/interfaces/socket-events.ts @@ -42,3 +42,10 @@ export interface MessageVisibilityEvent extends SocketEvent { visible: boolean; ids: string[]; } + +export interface FediverseEvent extends SocketEvent { + title: string; + image: string; + link: string; + body: string; +}