SUSI botbuilder enables users to make their own private skill and deploy a chatbot widget in their websites. While creating the private skill and designing the bot, the user can see a live preview of the chatbot including its designs in a component on the right side. This component is made in react for updating the theme on the fly. It looks exactly similar to the actual chatbot widget which will be deployed on the user’s website. This blog explains how the preview component is made and how the theme is updated instantly.
Passing skill and design data to preview
The skill’s data is stored in the skill language in text format. This skill data needs to be passed to the preview component so that it can use it. Also the design settings are stored as state variables. These data are passed to the preview component as props. These data are passed as designData and skill props. Inside the Preview component, they are used for applying the private skill in the preview chat and applying the design.
<Preview
designData={this.state.designData}
skill={this.state.buildCode}
/>
Fetching chat response
The preview component needs to fetch response from the server for the latest private skill typed by the user. For this, we use the instant feature of the SUSI chat API. We pass the entire text of the skill code inside this instant parameter and also the query parameter. The server applies this skill and sends the appropriate response.
// Send request to SUSI API send = text => { let url = urls.API_URL + '/susi/chat.json?q=' + encodeURIComponent(text); url += '&instant=' + encodeURIComponent(this.props.skill); var thisMsgNumber = this.msgNumber; this.msgNumber++; this.setLoadingMessage(thisMsgNumber); $.ajax({ type: 'GET', url: url, contentType: 'application/json', dataType: 'json', success: function(data) { this.main(data, thisMsgNumber); }.bind(this), error: function(e) { console.log(e); this.main(null, thisMsgNumber); }.bind(this), }); };
Applying theme dynamically
The preview component has to update the theme of the chatbot dynamically based on user’s settings. The applyTheme function updates the theme of the chatbot by changing the CSS of the chatbot elements dynamically.
// to apply custom theme applyTheme = () => { // user message container $('.susi-comment-by-user .susi-comment-body-container').css( 'background-color', this.state.botbuilderUserMessageBackground, ); $('head').append( $( `<style>.susi-comment-body-container-user:after { border-color: transparent transparent ${ this.state.botbuilderUserMessageBackground } ${this.state.botbuilderUserMessageBackground} !important}</style>`, ), ); $('.susi-comment-by-user .susi-comment-body-container').css( 'color', this.state.botbuilderUserMessageTextColor, ); // bot message container $('.susi-comment-by-susi .susi-comment-body-container').css( 'background-color', this.state.botbuilderBotMessageBackground, ); $('.susi-comment-by-susi .susi-comment-body-container').css( 'color', this.state.botbuilderBotMessageTextColor, ); $('.susi-comment-avatar').css( 'background-image', "url('" + this.state.botbuilderIconImg + "')", ); };
Resources
- Set State usage in React: https://reactjs.org/docs/state-and-lifecycle.html
- Props in React: https://reactjs.org/docs/render-props.html