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

humphd posted on Mar 17, 2024

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:

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.

View on GitHub

Pull Request 535

Previous Flow:

1. 
2. 
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:

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>);

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

Rachit1313 posted on Mar 27, 2024

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:

View on GitHub

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:

That's all for this week.

Happy Coding