As there are new UI/UX emerging in the market for the modern AI apps, so are the frontend interview questions changing especially for the companies that are completely agentic.
I got an opportunity to interview for EmergentLabs which is one of the AI-Native companies that allows to create applications through prompt.
In the interview I was asked to code the chat UI interface of ChatGPT/Claude where the multiple chats can be queued and each chat can run multiple sub-operations (async) only when the sub-operations are completed, we have to mark the parent chat as completed and move to the next chat.
The problem statement reads as:
- A chat will go through multiple sub asynchronous operations and only when all sub operations are finished we move to next chat in queue.
- Multiple chats can be added, but they will be queued and executed in sequence one after the other.
- We can abort any ongoing chat operation (all its sub-operations will be aborted too).
- We can retry any failed or completed chat operation.
To solve this question, I first created the high-level design of it and then coded the design to functionality.
This is a large problem statement and to implement we break it down into three different parts:
- Add chat flow (core) – When we type a prompt and submit it, it gets added to chat state and to the queue, from there it moves to processing. Any subsequent chat/prompt will be added to state and to the queue.
- After a chat is added to queue, we trigger the processing. This is an asynchronous method and executes each chat one by one in sequence using while loop as long as there are chat in queue. We add a safety guard to start the processing only when it is not ongoing.
- In each processing we create a parent promise representing chat and 3 child promises representing its sub-operations, these will be mocked promises that randomly resolve or reject between 1 to 10s representing a network call. We will pass an single Abort controller to the parent promise that will forward it to the child promises and we will use it to abort all the ongoing promises.
- We will also pass an callback method to the promises that will help us to update the chat status of all the child as well as it’s immediately.
- On the retry, we push the existing chat back to the queue and execution continues in the normal flow from step 2.
This is the high-level flow diagram of the app (I have used mock promises to represent the network calls.)
This question covers different interview questions that we have on the platform:
- Queue promises (Asked in Meta, Tekion, Uber, Flipkart) and execute them in sequence (Asked in Phonepe) – Whole queue processing logic.
- Retry promises (Asked in Google, Impact Analytics).
- Accordion group (Asked in Tekion) – Each chat card can be collapsed or expanded.
Checkout the low-level design implementation of it out on my course along with 60+ machine coding questions.
People think frontend is easy and I think these are the people who have not done the frontend enough. Enroll today into alpha.learnersbucket.com and start the journey of real frontend engineering.