hubtype
Add event listener to <Message> component that tells when it is rendered
In my specific implementation, I am sending audio over the chatbot. After the audio is done playing, I want to display options to choose from.
It would be nice if Botonic has a pointer to the latest message, which is updated with the state of the message (e.g. 'typing', or 'sent').
Currently, i need to continuously check if the message element has already been rendered by passing it a checkable ID and checking if the document has such an ID every 100 ms, and if so, check the state of the audio component, and depending on that state render the options.
So currently I still have the previous workaround in place:
i render with
render(){
<div>
<CustomAudio id={this.context.session.messageId} src={"data:audio/mp3;base64," + this.context.session.resp.response} />
{this.context.session.resp.options ? <DisplayClickables audioId={this.context.session.messageId} options={this.context.session.resp.options} /> : null}
</div>
}
with the DisplayClickables class being
class DisplayClickables extends React.Component{
// React component that will display clickables after the audio has stopped playing
constructor(props){
super(props)
if (props.alwaysShow) {
this.state = {showOptions: false}
setTimeout(() => {
this.setState({showOptions: true})
}, 2500);
} else{
this.state = {showOptions: false,
audioId: props.audioId,
audioOptionsId: props.audioId + '_options'
}
let return_el = null
let startTime = new Date()
let timerId = setInterval(() => {
if (document.querySelector('#' + this.state.audioId + ' #myAudio')){
if(Math.floor((Date() - startTime/1000)/60) > 300){ // Stop checking the audio element after 5 minutes.
clearInterval(timerId)
}
let audio_el = document.querySelector('#' + this.state.audioId + ' #myAudio') // get the latest posted audio element
if (audio_el.ended){ // check if it has ended playing, this is a property of the html audio dom element
clearInterval(timerId) // then, stop checking
this.setState({showOptions: true}) // change state to show the clickable options
}
}
}, 800)
}
}
where the messageId is manually defined as
session.messageId = 'a' + uuidv1().split("-").join("") // used to set id, id needs to start with character and can't have '-'
within the botonicInit.
I'm using
@botonic/cli/0.18.3 darwin-x64 node-v13.2.0
Ok, I will attempt something. I will get back to you if I am able to solve the issue.
Hello, I would like to ask this question, is there a solution in the future?
we'll consider adding this but it is not a priority. feel free to create a PR for this 🤗
Hey ,is it possible for me to work on this? Or if its closed that means it doesn't need to be done?
