Configuration workflow
Validated name, description and personality controls support create, update, restore and delete operations.
Muhamed Malkoč
04 / More 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.
- Angular 17
- TypeScript
- Angular Material
- RxJS
- LocalStorage
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
From workflow to detail
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.
What I built
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.
Engineering judgment
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.
Next iteration
What I would improve
Interested in how I approach product and engineering problems?
Let’s talk →