DEV Community

Rachit Chawla
Rachit Chawla

Posted on

Release 1.7 Contributions : ChatCraft.org🤖

For this week I worked on improving the flow to switching providers for LLMs for chatcraft.org. For the above we already had issue filed which I assigned to myself and started working on:

Make it easier to switch between providers #510

Currently, we assume that the user only ever wants to use a single provider. For example, the "Ask" menu shows models for the current provider:

Screenshot 2024-03-17 at 5 22 20 PM

However, @kliu57 has been doing awesome work to add support for multiple providers. Now that we support 3 providers, and soon arbitrary providers (see #440), it would be interesting if the "Ask" menu allowed you to easily switch to another of your configured providers and use those models.

I wonder if this would be a good UX:

+--------------+
| model-1      |
| model-2      |
| ...          |
|--------------|
| ✔️ Provider 1 |
|   Provider 2 |
|   Provider 3 |
+--------------+
Ask

In the wireframe above, the models for the current provider (i.e., "Provider 1") are shown. In addition, the other providers are also available, and clicking on "Provider 2" or "Provider 3" would cause the list of models to change.

There might be a better UX for this, but that's one option.

Pull Request 535

Previous Flow:

  1. 1st prev
  2. 2nd prev
  3. going back to the ask menu to choose model to work on.

New Flow:

The user can change the providers with a single click where selecting models and select the new model there itself based on the providers selected:

new flow

Code Changes:

To achieve the above I had to use settings.providers as in chatcraft, we store all the providers list and api keys in the browser's local storage. To use them we have another lib settings.ts created which helps us access the data from local storage. Apart from that, we're using currentProvider object in local storage to specify the selected provider which can be trigger using a function created :

setSettings(...settings,currentProvider: <provider>);
Enter fullscreen mode Exit fullscreen mode

The above function is helping me retain all my previous settings, additionally changing the provider currently selected.

For better UI and differentiating between models and providers list, I used MenuGroup component which allowed me explicitly name the list headers to models and providers respectively. Thanks to Amnish for suggesting me this component.

After I was done with above research, I implemented the change and added MenuDivider second MenuList to support the implementation above.

Pull Request

Add the Providers selection Menu Group to easy switch between providers #535

Closes #510

Tasks Completed:

  • [x] Enable switching between providers from the ask menu for Desktop Prompt
  • [x] Enable switching between providers from the ask menu for Mobile Prompt
  • [x] Use MenuGroup from Chakra UI to group models and providers distinctly

Files Changed: PromptForm.tsx

Screenshots: image

Feedback

On the above, I received some feedback from my professor David Humphrey regarding the indentation which I fixing by adding a span with some custom css attributes to maintain padding and an extra space for chevron icon which was also suggested by him.
Another major feedback for this PR was to refactor the code for lesser lines of code and more efficiency. Thanks to Katie for the feedback as the code change made the code look a lot cleaner too as in the screenshot below:

commit

That's all for this week.

Happy Coding

Top comments (0)