Add the Providers selection Menu Group to easy switch between providers

[Rachit1313]

Closes #510

Tasks Completed:

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

Files Changed:
PromptForm.tsx

Screenshots:

[humphd]

We've got the same alignment issue here that you fixed elsewhere. All of the providers should be indented the same amount (left margin) and the icon only showing beside the selected provider. It shouldn't indent the text when the checkbox is beside it (e.g., the text should already be at that position).

[kliu57]

Some minor changes requested. Also you have to make the change from settings.provider using the apiUrl as the key to using name as the key once the hotfix #537 is merged, thanks.

[cloudflare-workers-and-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	d01fec4
Status:	✅  Deploy successful!
Preview URL:	https://2027c207.console-overthinker-dev.pages.dev
Branch Preview URL:	https://providers.console-overthinker-dev.pages.dev

View logs

[Rachit1313]

@kliu57 Do you want me change key based on name now or after the PR has been merged. I believe that it would be better to do it after merge as I would be able to test what I'm implementing. Or maybe.. I get this merged and get a PR ready to fix stuff which could be merged right after your PR.

@humphd, What would be the best approach for this?

Could you please also review the indentation changes based on your feedback?

[kliu57]

@kliu57 Do you want me change key based on name now or after the PR has been merged. I believe that it would be better to do it after merge as I would be able to test what I'm implementing. Or maybe.. I get this merged and get a PR ready to fix stuff which could be merged right after your PR.

@humphd, What would be the best approach for this?

Could you please also review the indentation changes based on your feedback?

You cannot make the change until after my hotfix is merged.

[humphd]

I'm not loving the checkmark icon. I wonder if there is something better, maybe an arrow that points at the one

Maybe we should use a right-hand pointing chevron? https://react-icons.github.io/react-icons/search/#q=chevron

Something like:

Another thing I notice: when you change providers, it closes the menu, which is surprising, since you are probably going to want to pick a model from the new list. Can we make it so that choosing the provider doesn't close the menu?

[Rachit1313]

@humphd , I changed the icon based on your feedback but not sure how can we achieve the second thing? I tried. using disclosure but even that didn't work. Maybe it has to close the menu after switching providers because it has to re render the model based on the change.

[humphd]

What if you call e.preventDefault() when it's a click on the provider?

[Rachit1313]

e.preventDefault()

Nope doesn't work

[Rachit1313]

@humphd , Found this which works for us.
chakra-ui/chakra-ui#3762

[kliu57]

Thanks for doing the refactoring I asked for, everything looks good to me.