DEV Community

Katie Liu
Katie Liu

Posted on

ChatCraft week 3: Coding and code reviews

Coding

This week of working with the ChatCraft team, I started to tackle issue 345.

Allow multiple providers to be used simultaniously #345

At the moment to switch providers we have to go to preferences and swap out provider + key. Would like to just have a set of providers, with keys and switch between them and their models as easily as we do within one provider.

Currently openrouter has some really unique models eg perplexity model that can query the internet: image

Useless openai response: image

However there are some downsides of accessing gpt through openrouter(robustness, speed, privacy, etc). Also in the future we might want to use dedicated openai within Azure. For all these reasons we would like to be able to list models across multiple providers and switch between then when doing retry-with...

Currently, ChatCraft allows users to switch between two providers, OpenAI and OpenRouter, however it only stores the API key of one provider. That means when we switch to a different provider, the old key is cleared from storage. We want to allow for the storage of multiple providers.

I started working on my issue by analyzing the code and thinking about how I would implement this. I came up with multiple ways this could be implemented, and discussed it with the team during our weekly triage meeting. My main question was should I just add another field in localStorage to store the second api provider info, or use an array or something similar to store them in case we have more than two providers in the future.

Following the meeting, I was able to quickly write some code to store the data in an array in localStorage and I commented in the issue with more details of my proposed implementation, as well as some questions I had.

The ChatCraft admins were quick to respond to me. Dave gave me detailed specs and Taras added that it would be better to use an associated array rather than a list.

With this information in hand, I reworked my code and created a Draft PR with my current progress. I listed what has been implemented thus far and what has yet to be done. Very optimistic about completing this issue next week!

File: src/lib/settings.ts
Creating an associative array settings.providers:

code change 1

File: src/components/PreferencesModal.tsx
Editing the onChange event handler of the api key field in Settings to store the provider info in settings.providers:

code change 2

Testing:

testing

Code Reviews

I did a couple code reviews of my fellow teammates!

See my review of PR 300, which was a UI change by Amnish to have the sidebar overlap the main app instead of displacing it to the right.

See my review of Mingming's PR 286, which was allowing ChatCraft to parse images and answer questions based on those images! Very cool :)

In my reviews I mainly focused on testing the features that should be implemented. I also gave my thoughts on any behaviours that potentially may negatively impact users.

Using ChatCraft for Coding

While coding, I used ChatCraft to help me and found it was faster than using google when I needed to describe a very specific thing I was trying to code. It was also useful in suggesting potential reasons why I was getting syntax errors in VS Code.

Example:
ChatCraft example

Top comments (0)