React Component
Below are the screenshots of the React Component that we created to display the possible visual aspects of this chatbot. This includes the different methods of answering questions, as well as additional UI components which assist the user in interacting with the chatbot.
The screenshots display an example conversation with a patient:
|
This is the start of the conversation, where the chatbot initialises the conversation with the default opening question. |  |
This is the selection interface, showing when an option has been selected, and listing multiple options if applicable. |
 |
This screenshot shows the chatbot generating questions which are appropriate for the selected options by the user. The question displayed is an extension of the selected option 'Spiritual Concerns'. |  |
This is displaying further extension of the conversation based on the selections of the user. This time, the user indicates they want to speak more about 'Regrets about the past' through a selection on the Yes/No option block. Therefore, we extend the conversation to suit this. |
 |
This screenshot shows how the user can enter textual input to explain more about a certain issue which troubles them. |
Command Line Interface
The screenshots below capture the same interaction with the Chatbot as shown in the screenshots above. However, this time the focus was on testing the API functionality, rather that UI components, as clearly demonstrated.
|
The start of the conversation. In the CLI, a message needs to be sent from the client in order to 'trigger' the bot to start a conversation. We then ask the same default question to start the conversation and gather user response. |  |
Again, we expand on the selected option(s) from the first question, and ask related questions. The user then has the opportunity to input a multiple choice answer again. |
 |
This screenshot captures further questioning the user about selected options, and asking if the user would like to talk further about this problem. We have a single-choice option for this question. |  |
This is displaying the option for textual input for the user if they indicate they would like to expand on the selected concern. |
Chatbot API
The chatbot API is our main deliverable. We developed an API with 2 endpoints: messaging and summary. The messaging endpoint handles the conversation structure, and receiving/delivering questions to the user.
|
This screenshot shows a key part of the messaging API. This is displaying the get_next_question function, which contains the logic for getting the next appropriate question for the user in the correct format to be sent back. |  |
This is from our models.py file. This is where we define key objects, or Models, which will be used in our conversational flow. These 2 models shown are Question and Option, both key parts of the logic of the conversation, and contain key data about the user/session. |
 |
Get_current_state is a function in charge of updating the session for the current user, or creating a new one if appropriate. The status of the user is updated, and the answer to the previous question (if applicable) is saved to the database. |  |
This screenshot is our get_next_response method, which is responsible for checking for the use of keywords in the user's response so we can handle appropriately, and also for getting the ID of the next question to be asked to the user. |
We have created a React chat prototype that showcases the different types of messages being sent. However, after creating the component and actually creating a sample dialogue, we came to realize that we would need a 'slider' component, similar to the jQuery slider .
This is a screenshot of the React component with the names of each subcomponent.