Wow, today was a busy day. I managed to componentize the application into three components: the main App component, the ChatPanel component, and the MessageForm component. I still feel like the code is rather terrible and messy, but I hope to patch it up with time.
I didn’t spend my entire day just making two components, no, most of my day was on quality of life and educating myself of the wonders of Vue 3. (This is my first Vue project, and my first ever web project that uses a frontend that isn’t vanilla JS)
Most of my quality of life was dedicated to mobile, but I did make some desktop changes.
Most visible changes are:
- Removed title text (unnecessary tbh)
- Downsized HC logo and moved more to the left (had to make it fit as well as possible in the header after I removed the title)
- Fiddled with the padding and margins a lot, imo it looks better now and provides more space for the ChatPanel, especially for mobile.
- Submitting a message automatically scrolls you down to the bottom of the chat. (love this QoL improvement)
- When at the bottom of the chat while the AI is generating text, the scrolling will act more robust and nicely scroll down with the text without glitching out.
- A new system prompt was added, completely visible in the code. It isn’t a replacement for DeepSeek’s own system prompt but rather an addition. It just provides extra context and details how responses show be made. Simple details like what it is and when its data cutoff date was was added too, because several times it had mistaken itself for GPT-3.5 and that its info cutoff date was late 2023 (it’s actually July 1st 2024).
- The MessageForm actually reacts with its environment instead of hovering over it, which is very noticeable for mobile users. This change sets up the future implementation of a sidebar.
- The “AI-generated content should be fact-checked” disclaimer was moved to the bottom of the screen.
- Paddings, margins, border-radii, sizes, and basically everything was changed for mobile users for an optimal experience. I admit it isn’t perfect, but I will happily adjust it day after day until it is perfect.
- Code blocks had a slight visual improvement.
That’s a lot. This update wasn’t really a feature-update, but instead just a basic maintenance update. The site is still new (it was published just yesterday!) so I decided to mainly focus on improving maintainability and QoL before getting too ahead of ourselves with features and clutter. A large focus of this update was also towards mobile users, which are constantly oppressed by my usually terrible web design. I decided to give them a gift this time and make them something that is actually functional (and even enjoyable!) on mobile.
It’s live rn at https://hackclub-chatbot.vercel.app
