Project article: Creating a project to practise the skills required for a support person
I am a frontend developer.
Motivation:
There are numerous resources available like Leetcode, hacker rank, and HackerEarth to help in practising Data structure and algorithm problems. On the other hand, few practising platforms are available(maybe) to practise non-technical role skills such as how to respond to a customer as a customer support person, drafting an email to address an issue, or rehearsing before making a sales pitch.
Hence, I wanted to create a minimal version of a web app which helps in practising non-technical skills. In this web app, as a part of the aws-amplify hackathon in hashnode, I developed interfaces which enable people to practise on "Responding to a customer as a customer support person" and "Drafting an outbound email apologizing for an inconvenience faced by a customer.
Tech stack used:
This is a full-stack app
Frontend -> Next JS(Page router)
Backend -> AWS Amplify
Auth -> AWS Cognito
AI chat completion and feedback evaluation -> Open AI(Chat GPT)
Express JS -> To create a wrapper around Open AI
The process:
The web app should allow end users to practise a particular scenario, allow them to submit the responses, and evaluate the responses for Language proficiency, Tone analysis, and provide overall feedback.
To start with, there are two kinds of problem categories supported by this web app.
Chat support
Email drafting
Chat support
Firstly, the user of the app assumes the role of a customer support person in an imaginative firm. An angry customer is reaching out to the support person with a problem. The role of a customer is assumed by an AI(Chat GPT). The user can chat with the customer to understand the problem and provide a resolution.
Once the chat is ended, the responses of the user will be evaluated for Tone and Language proficiency.
Email Drafting
A User can practise how to respond to an email as customer support or a technical support person.
Overall Modeling
Backend
Chat Conversation
Firstly, for chat support, we need to create a conversation-like experience. To do that I used OPEN AI's chat completion API. I signed up for an open AI account to retrieve an API key to make a successful API request.
Now that we have an API key, we must attach two important attributes, model and messages, in the request payload.
The supported values for the model attribute are provided here. Based on the model we choose, pricing changes. Checkout pricing
Next, we will discuss the "messages" attribute. The attribute needs to be passed with a list of messages from the start of a conversation to make the AI stay on the same page throughout an entire conversation.
For example, if we start a conversation with "Hi, I am a developer" and assume a sample response from the AI to be "How can I help you" while sending the next request to the API, we have to make sure that previous messages are also included as part of the request to make the bot to have a same context throughout a conversation.
Each message has a role associated. The role can be used to identify whether AI sent the message or the User posted the message. There are three different values for the Role parameter, "system", "assistant" and "user".
Each role parameter has a different purpose.
System -> To configure the chat-gpt model to work in a particular way. For example, we can pass the prompt "You are an angry customer who got delivered with a wrong pizza" with the role of "system" to make the AI act as an angry customer.
Assistant -> Denotes that the response is from Open AI.
User -> Denotes that the message is posted/sent by a user.
A separate express server is created to act as a wrapper for Open AI's API. This is needed to not expose my API keys to the external world. Though the server is isolated, all the request made to the server needs to be authenticated.
The request to the server needs to carry the access token which got generated when a user logs in. Once the request is made, the express server retrieves the token and validates it.
Finally, to make my chat experience, I configured the AI as an angry customer so that end users feel like they are having a conversation with a pissed-off customer.
Storing a submission
To store the response made by a user I created a model named SUBMISSIONS in Amplify Studio. A model is a blueprint which helps us understand the attributes which constitute a submission.
In this project, SUBMISSION model consists of
problemId -> ID of the problem against which a submission is made
languageFeedback -> Language feedback returned by AI after analysing the user response.
toneFeedback -> Tone feedback returned by AI after analysing the user response.
overallFeedback -> Overall feedback returned by AI after analysing the user response.
response -> Response submitted by a user.
Fortunately, AWS-Amplify creates all the possible Graphql queries such as retrieving a submission, creating a submission, deleting a submission, and listing all the submissions. Moreover, amplify does a terrific job to get the submissions corresponding to an owner(End-user) without a need for passing any external variables to filter.
Frontend
The web app consists of 5 pages in total.
Practice problems listing page
List all the problems available to practise
Practice problem details page
To practice a problem
Submission page
To view all the submissions made by a user
Submission details page
To view the detailed submission to a particular problem
Login/signup
Flow
A new user should initially sign up for an account with an email and a strong password. Once signed up, a verification code will be sent to the entered email. After entering the code and verification is done, a new user can log in to the web app.
After login, the user lands on the practice listing page, where a user can see all the available problems and choose any one of the problems for practising.
Once the user clicks a problem, the problem-details page will appear. Based on the category of the problem, either the section for answering will be like a chat conversational experience or Email writing.
After entering a response or ending a chat, the user-submitted response will be accumulated and sent to Open AI for evaluating the response on language proficiency and tone analysis.
Upon getting the feedback from Open AI, a submission for the user against the problem is created and listed under the submissions tab on the problem details page.
The same submission can be viewed under the submission listing page. To view the detailed submission, the user can go to the submission details page.
In the submission details page, along with the feedback, user submitted response is displayed as well.
Links:
Web app: Amplify app
GitHub Leetsupport: LeetSupport
GitHub Open AI API wrapper: Open AI wrapper
