ChatCraft Release 1.7 is available here.
I had a pretty productive week. I made three Pull Requests, and added a couple cool features I'd like to share with you today.
Pull Requests
Nomnoml Rendering Support
This is a Pull Request I started last week, but completed this week. This PR adds skanaar/nomnoml to let ChatCraft render nomnoml code in a preview.
You can try this feature yourself! On ChatCraft, just request a Nomnoml diagram from your selected LLM. You can also see the feature in action in this chat.
One thing I noticed is that depending on the LLM, you may receive nomnoml with syntax errors. When implementing this, I also noticed the nomnoml library doesn't provide options for a default theme. It would be really cool if I could change the default stylings for dark mode!
I'm proud of this feature. For a while I've been adding bug fixes and code enhancements, but until this PR I never added a feature. I can't take all the credit though. ChatCraft already renders Mermaid diagrams, so my strategy for this PR was to model my implementation off the already exiting Mermaid preview rendering feature.
Viewing the history of the MermaidPreview.tsx component took me to this commit that my class instructor, Dave, added last year. This commit helped inform how I should implement nomnoml preview rendering - what files to add, what files to make changes to and what changes to make.
/ Keyboard Shortcut to focus Chat Input
This is another cool feature I started last week and was able to complete this week. This feature adds a new keyboard shortcut that activates your current Chat's prompt input. If you want to quickly focus your prompt input, just press the forward slash key, /.
This feature is common on websites like YouTube and GitHub, but I never knew about it until this feature was requested for ChatCraft.
When implementing this feature, I originally wanted to make use of this handler for keyboard inputs. However, my initial implementation didn't seem to work, so I added this keyboard shortcut as a useEffect React Hook. Where to place this useEffect was a challenge. I wanted to place it such that the keyboard shortcut would work anywhere on the page, so added it to what I believed was the entire chat window component, ChatBase.
I'm pretty happy with this feature. I've never added keyboard shortcuts, so figuring out and learning how to do it was a fun experience.
Bug Fix: Non Precached Url
For a while, I noticed this error when opening my browser's developer tools on ChatCraft:
So I made an Issue for it and began investigating.
I can't say exactly how long I've seen this error, but even with this error present ChatCraft works just fine.
My investigation involved searching the error message on Google:
Uncaught (in promise) non-precached-url: non-precached-url
My search led me to this discussion, and then to this comment that contained the changes I had to make to fix this issue.
Explanation
I discussed this PR with my classmates earlier this week, and Dave helped me understand what this error was about.
ChatCraft uses vite-plugin-pwa to make ChatCraft a Progressive Web App (PWA). I don't exactly know what a PWA isFrom what I understand, making ChatCraft a PWA allows it to work and provide value even if the user's device isn't connected to the internet.
The error I fixed is related to workbox settings, located in a vite.config.ts. I'm still learning what workbox is, but for now I can say that in our case, the workbox configurations we have define what assets will be pre-cached.
The error was due to these settings expecting ChatCraft's index.html to be pre-cached. Though we precache some assets, we don't precache index.html. The changes I made tells the workbox not to expect index.html to be pre-cached, so the error no longer appears.
Plans for April
Any new code added is more code that must be maintained, whether through refactoring or bug fixes. This is often referred to as technical debt. There are three more weeks in my semester. In those remaining weeks I plan to help manage as much technical debt as I can.
Top comments (0)