DEV Community

Katie Liu
Katie Liu

Posted on

ChatCraft week 5: Storing multiple providers

Issue

This week I finally was able to close the issue I was working on which was allowing ChatCraft users to store api keys for multiple providers. ChatCraft currently only supports two providers (OpenAI and OpenRouter) but we may add more providers in the future!

If you are a ChatCraft user, you can now toggle between OpenAI and OpenRouter in User Settings without having to re-enter your API key.

user settings

PR

This is PR I worked on which resolved the above issue.

This PR builds upon the PR I did last week, which completed the set up necessary for this functionality.

Since all the set up was already completed last week, I did not need to make many code changes to complete this. The main things I did was:

  • when switching providers, saving the user's current api key to settings.providers array if it is not already saved
  • when switching providers, loading the api key from settings.providers if it is there

This is the event handler function I wrote which will be triggered when the user toggles the provider:

Image description

handleProviderChange

Reviews of my PR

Before my PR got merged, I had many useful reviews from the repo admin and fellow teammates, which helped me discover issues with my code and ways to refactor the code.

This review by Dave helped me find an issue with my old code.

Old code:

if (newProvider.name in settings.providers) {
  newProvider = settings.providers[newProvider.name];
  ...
}
Enter fullscreen mode Exit fullscreen mode

Here I forgot to parse settings.providers[newProvider.name] into a ChatCraftProvider object. We are getting this data from localStorage, so it is safer to use my fromJSON function to parse it into a ChatCraftProvider object.

New code:

const newProvider = settings.providers[selectedProvider.name] ? 
  ChatCraftProvider.fromJSON(
    settings.providers[selectedProvider.name]
  ) : 
  selectedProvider;
Enter fullscreen mode Exit fullscreen mode

This review by Amnish helped me refactor my code by moving it into a handler function.

My Reviews on Teammates' PRs

I reviewed multiple PRs this week and commented on issues I found and suggestions on how the user experience could be improved.

ChatCraft now supports uploading images! See PR#286 and try it for yourself by going to ChatCraft.org selecting "Ask gpt-4-vision-preview" and uploading some images. This functionality is extremely useful! ChatCraft is faster than other image parsing web apps at converting images into text, and you could even do something like upload a UI and ask it to code it for you!

Image description

My reviews on this PR and its associated PRs:

PR#286 review 1
PR#286 review 2
PR#419 review 1
PR#419 review 2

I also reviewed PR#402 which allows users to download a ChatCraft message as an image!

download as image

PR#402 review

Top comments (0)