Configuration workflow
Validated name, description and personality controls support create, update, restore and delete operations.
Case study 04 · Additional project
Chatbot Builder & Simulator
An Angular prototype for configuring a chatbot, managing mock knowledge-base files and testing the experience through a persistent simulated chat widget.
The challenge
The task combined three pieces of one product journey without a backend: chatbot personality configuration, mock knowledge-base uploads and a delayed conversation simulation. The state needed to remain useful after refresh and the chat had to feel like an embedded product widget.
Product interface
The approach
I built validated Reactive Forms for configuration, a dedicated storage service for chatbot data, file metadata and chat history, and a floating Angular Material widget that simulates keyword-based bot replies with delayed responses.
Core implementation
Knowledge-base mock
Multiple text files can be selected, listed, persisted and removed with user feedback.
Embedded chat widget
The simulator opens as a floating product widget with message bubbles, timestamps and chat clearing.
Persistent prototype
Configuration, uploaded file metadata and conversation history survive browser refreshes.
Key decisions
- Kept browser persistence behind one service instead of spreading localStorage calls across components.
- Added update and delete flows, timestamps, toasts and chat-history clearing beyond the required scope.
- Used a delayed keyword-based response to keep the assessment deterministic without presenting it as real AI.
- Documented WebSockets for full-duplex chat while recognizing that SSE or fetch streaming can be simpler for one-way LLM token streams.
What I would improve
Let’s talk
Interested in how I approach product and engineering problems?
malkocmuhamed9@gmail.com