On Day 9, we took our chatbot from a rough classroom prototype to something that feels like a real, modern web application. We had two major problems to solve: conversation memory and the annoying full-page reload.
1. Teaching the Bot to Remember (Session State)
Standard web requests are stateless—every time you send a message, the server forgets who you are. If you tell the bot 'my name is Sagar' and then ask 'what's my name?', it has no idea. We fixed this using Flask sessions (encrypted cookies). Now, each user gets their own private chat history stored in their session, and we send the last few messages along with every new prompt.
2. Multiple AI Personalities
We also built a personality switcher. With a simple dropdown, the user can change the system prompt: StudyBot (helpful student tutor), CodeBot (strict senior developer who only writes clean code), or CasualBot (chill, friendly conversationalist). The backend dynamically swaps the system instructions on the fly.
3. Ditching the Clunky Page Reload with AJAX
The official assignment had students submitting an HTML form that caused the entire browser tab to reload every time you hit send. It felt laggy and flickered. I refused to ship that. Instead, I set up an asynchronous API endpoint (/api/chat) and wrote a quick JavaScript controller using the browser's native fetch() API.
Now, when you press Enter, the user message appears instantly, a subtle 'thinking...' bubble pops up, and the AI answer smoothly fades in without the page reloading once. When I demoed it to the room, the whole cohort was impressed. Rashmi loved it and pointed out to the class that asynchronous fetch requests are the exact industry standard for modern web apps.