It's quite simple to add a button for resend but it need a mechanism to trigger it parent to resend this failed message. There's multiple ways to do this.
Attach a function to resend to the message itself. When user click the button we can directly call this function.
Propagate event back with failed message so the ancestor container that responsible for sending message know that user want to send this message again.
Both of it will need some mechanism to update a failed message status. For the first approach, this will be easy as message itself know when the resend is requested and the status of current request.
The second approach will be a bit troublesome. It need almost entire message object back to ancestor so it can update the object status. However, by React architecture, ancestor object need to be the one to update the state, otherwise, the state/props will be out of sync. This can be inefficient to scan through ancestor message array.
Shall user able to hit up/down button to navigate through the recent user input ?
The current design is to have single array contains both user side and response from server side. If user hit up arrow, it need to scan back in array to find one previous user message. If user hit down, it shall find next user message in array. This will require one extra state variable to track where user is navigating in history. Whenever use edit the message, what shall this state be ? If user choose to edit one old message before send then user hit up/down to drop the editing message, would it make more sense to continue from previous navigating state ? If user hit send, shall the state reset ?
Main question
Shall user able to resend a failed message ?
It's quite simple to add a button for resend but it need a mechanism to trigger it parent to resend this failed message. There's multiple ways to do this.
Both of it will need some mechanism to update a failed message status. For the first approach, this will be easy as message itself know when the resend is requested and the status of current request.
The second approach will be a bit troublesome. It need almost entire message object back to ancestor so it can update the object status. However, by React architecture, ancestor object need to be the one to update the state, otherwise, the state/props will be out of sync. This can be inefficient to scan through ancestor message array.
Shall user able to hit up/down button to navigate through the recent user input ?
The current design is to have single array contains both user side and response from server side. If user hit up arrow, it need to scan back in array to find one previous user message. If user hit down, it shall find next user message in array. This will require one extra state variable to track where user is navigating in history. Whenever use edit the message, what shall this state be ? If user choose to edit one old message before send then user hit up/down to drop the editing message, would it make more sense to continue from previous navigating state ? If user hit send, shall the state reset ?
Potential affected code
For resend failed message approach 1:
For resend failed message approach 2: ???
For history navigation: