Reversing message order / upside down widget

[AdbC99]

Hi, I've found myself in the boat where it is much better for me to do the widget upside down, so that the messages are written at the top of the screen in a full screen mode. I've got that done by editing the css; but I don't know how to go about getting the message order to reverse so new messages appear at top of the screen rather than the bottom of the screen. Do you have any ideas that don't involve editing the source code?

[AdbC99]

Started to answer my own question, just need to get widgets supplied with messages below the messages now:

.react-chatbot-kit-chat-message-container { padding: 0 17.5px 10px 17.5px; overflow: auto; position: relative; display: flex; flex-direction: column-reverse; background-color: #f8f3f0; min-height: 100%; height: 100%; width: 100%; }

[AdbC99]

Actually it's not as good an answer as hoped as widgets that normally come with messages are displayed above messages, any ideas?

[AdbC99]

Removing the last fix and changing the actual message order has done it, emergency over

addMessageToState = (message) => {
    this.setState((prevState) => ({
        ...prevState,
        messages: [...prevState.messages, message].reverse(),
    }));
};