Support custom providers #530

kliu57 · 2024-03-27T14:33:35Z

Closes #503
Closes #440

Users are now able to add custom providers and the user settings modal now shows a table of providers.

Implemented functionalities:

Changed the display of the providers section to include a user-friendly and responsive table

Add Provider button:

Add custom providers by clicking "Add", typing info, clicking "Save" button
Users are allowed to add any provider that we currently support (openai, openrouter, and any future ones we implement - excluding FreeModelProvider) as well as any custom provider that is open ai compatible.
If the provider is not compatible, key or url is invalid, provider will not get added and user will see an error message.
Allowing the users to create multiples of the same provider (i.e. openai) since they may want to manage multiple keys.
Not allowing users to create FreeModelProvider since that does not have a key so you wouldn't need multiples of it.

Other buttons/fields:

Delete custom providers using "Delete" button (only custom ones can be deleted)
Change the current provider using "Set as Current Provider" button
Change the Api Key any of provider in the list by editing the Api Key field, automatically key validation will occur (error message will display if the key is invalid)

Code changes (only summary of important points):

PreferencesModal.tsx (core code is here)

focusedProvider state var tracks which provider row we are editing. This is what allows us to display the "Key is invalid" message on the correct corresponding row.
selectedProvider state var tracks which provider we have clicked the checkbox on
newCustomProvider stat var stores the data user typed in the new provider row

SmallRevealablePasswordInput.tsx
created this so I don't mess with the styles of RevealablePasswordInput.tsx since we still use that in Instructions page and we may bring back Instructions page someday

use-alert.ts

added two more types of toast alert in here since the existing types don't disappear fast enough for my liking

Had to make changes to OpenAiProvider.ts and OpenRouterProvider.ts
to take in a name param so that users will be able to have multiple Open AI or Open Router providers with different names

Had to add defaultModel member var to ChatCraftProvider class
to store the defaultModel, since for the custom providers users will add themselves we have no way of hardcoding the defaultModel. So we will query the first model from list of models and store it in this ChatCraftProvider member var.

Follow ups issues:

#524
#542
#548
#550
#551
#552
#553

How to test:

Currently I don't have any custom provider urls/keys to use for testing. If anyone has any please help me to test if those providers are open ai compatible.

You may add new providers using the providers we currently support:

https://api.openai.com/v1 (you can create multiple with diff names if you want to manage more than one api key)
https://openrouter.ai/api/v1 (you can create multiple with diff names if you want to manage more than one api key)
https://free-chatcraft-ai.deno.dev/api/v1 (not allowing them to create one since there is no api key so you would not need multiples)

kliu57 · 2024-03-27T15:44:59Z

Notes from team meeting:

when we create new provider, should validate the key, if not valid don't let it be created
just show the domain of the api url, when they hover over it show the whole url
In last column show a checkmark icon to specify which is the current provider in use
To change the current provider, have the user check the box on the left of the row and click "Set as Current Provider" button
If the user selects more than one provider and tries to set as default show an error message (N/A -> I decided to only allow users to check one box at a time)
If the user selects one or more providers that is our built in providers (ex: OpenAI) and tries to delete them then show an error message (N/A -> I decided to only allow users to check one box at a time)
Remove the GPT Model dropdown from the user settings (moved to follow up issue Update Settings model option to be per provider #524)
For now, for custom providers, grab all the models and choose the first one as the default model (done, but have a question which I will post below)

Future PRs:

Perhaps move this to a new modal
Perhaps add a column that allows the user to pick their "default model"
Perhaps have a way for us to store in localStorage the current in use model for each provider (for example if we are using gpt4vision with OpenAI, we switch to openRouter and switch back, we want to be back on gpt4vision) (right now we will always snap back to the default model since we do not store the current model for a specific provider anywhere)

cloudflare-pages · 2024-03-30T06:30:15Z

Deploying chatcraft-org with Cloudflare Pages

Latest commit:	`6f05011`
Status:	✅ Deploy successful!
Preview URL:	https://a503f11c.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-503.console-overthinker-dev.pages.dev

View logs

kliu57 · 2024-03-30T06:35:37Z

@humphd I've completed this. Code could use some refactoring but I've implemented everything. I have a question about models though. I console logged all the models I got when I called queryModels on openAI and I got a list of 28 models. But in chatcraft production we already have displayed only 16 models. What is causing this difference? Are we filtering out the models somewhere, where and why?

[update] Question answered during team meeting - we are filtering out the models for openai deliberately

…to a trailing space in url or key

src/hooks/use-alert.ts

Amnish04

@kliu57 This is a great improvement. Just left some comments/suggestions

src/components/SmallRevealablePasswordInput.tsx

src/hooks/use-alert.ts

src/lib/ChatCraftProvider.ts

src/lib/providers/DefaultProvider/FreeModelProvider.ts

src/components/PreferencesModal.tsx

…er row cancel icon

…eir respective provider classes

kliu57 · 2024-03-30T21:23:27Z

@Amnish04 made all the requested changes minus the ones you still need input from dave.

src/components/SmallRevealablePasswordInput.tsx

mingming-ma

I tested and it handles different situations very well!

~~I think click the Get key button to open a new tab is better. Just my thought and could be implemented in the follow up PR.~~

Update: Sorry that not notice current version can return back from the tab, so there is no need to change.

Amnish04 · 2024-03-30T22:48:57Z

@kliu57 Another thing I noticed is that when you click on Add Provider and a new form appears

Closing the modal and returning does not make that go away. Maybe you should implement and call a resetProvidersForm function when the modal is closed

tarasglek · 2024-03-31T17:16:08Z

Katie, thank you for working on this.

Sorry to complain but I find this new ux really confusing. I don't think we need to show all the details when we aren't editing an item. Eg a simple list like

- [x] OpenAI
- [x] Provider1 | URL | Key
- [ ] Provider2

Might be easier to comprehend..Eg should only show details once we click on a provider.

Here is another example of a similar multi-network concept in crypo-land:

humphd · 2024-03-31T17:22:26Z

This is me telling @kliu57 to do it as a table. Sorry we didn't have more clarity before you began, Katie.

Is it possible for us to do UI changes in a follow-up so that we can land the rest of the work in here? As far as I can tell, what you want is cosmetic.

tarasglek · 2024-04-01T08:42:21Z

Yeah always happy to land and iterate. lgtm for now :)

kliu57 · 2024-04-03T15:18:14Z

@kliu57 Another thing I noticed is that when you click on Add Provider and a new form appears

Closing the modal and returning does not make that go away. Maybe you should implement and call a resetProvidersForm function when the modal is closed

This is now fixed

kliu57 · 2024-04-03T17:13:33Z

@Amnish04 @mingming-ma Please review

Changes made:

Refactored password component into one -> PasswordInput.tsx (Removed SmallRevealablePasswordInput.tsx and RevealablePasswordInput.tsx)
If you add a new row for new provider and don't fill it out, when you close the modal and come back you will not see that new row
all alert toasts are now truncated to 200 chars
Get key from OpenRouter button renamed to Get OpenRouter key

mingming-ma

LGTM!

Amnish04 · 2024-04-03T18:35:58Z

src/components/PasswordInput.tsx

+
+  const paddingRight = size === "sm" ? "2.5rem" : "4.5rem";
+  const paddingLeft = size === "sm" ? "0.4rem" : undefined;
+  const inputSize = size === "sm" ? "sm" : "md";


I don't think we need this. We can use the size prop passed as is

I created a follow up issue that we can use to discuss during next week's meeting.

#553

Amnish04 · 2024-04-03T18:36:28Z

src/components/PasswordInput.tsx

+type PasswordInputProps = ComponentPropsWithRef<typeof Input> & {
+  size?: "sm" | "md";


InputProps already have size, we shouldn't override it.

Suggested change

type PasswordInputProps = ComponentPropsWithRef<typeof Input> & {

size?: "sm" | "md";

type PasswordInputProps =InputProps & {

Make sure to import InputProps from "@chakra-ui/react"

Amnish04 · 2024-04-03T18:39:46Z

src/components/PasswordInput.tsx

+  const paddingRight = size === "sm" ? "2.5rem" : "4.5rem";
+  const paddingLeft = size === "sm" ? "0.4rem" : undefined;
+  const inputSize = size === "sm" ? "sm" : "md";
+  const buttonSize = size === "sm" ? "xs" : "sm";


You can rather add hideButtonSize prop to your props interface

Amnish04 · 2024-04-03T18:45:53Z

src/components/PasswordInput.tsx

+  const paddingRight = size === "sm" ? "2.5rem" : "4.5rem";
+  const paddingLeft = size === "sm" ? "0.4rem" : undefined;


Same here, the user of this component can pass these props explicitly and you can pass to Input directly.

Amnish04

Looks good to me!

We can discuss #553 after landing this.

kliu57 added this to the Release 1.7 milestone Mar 27, 2024

kliu57 self-assigned this Mar 27, 2024

kliu57 force-pushed the issue-503 branch from f3641ae to 2da9c05 Compare March 30, 2024 06:30

kliu57 force-pushed the issue-503 branch from 2da9c05 to 86639b3 Compare March 30, 2024 06:39

kliu57 requested review from Amnish04, humphd and tarasglek March 30, 2024 07:13

kliu57 marked this pull request as ready for review March 30, 2024 07:13

mingming-ma self-requested a review March 30, 2024 14:02

Enable adding custom providers in user settings

5ee6dc5

kliu57 force-pushed the issue-503 branch from d5a51e5 to 5ee6dc5 Compare March 30, 2024 18:03

kliu57 added 2 commits March 30, 2024 14:21

added success message when user successfully adds a provider

b360865

when adding new provider trim spaces so we don't get a fail just due …

02362c9

…to a trailing space in url or key

mingming-ma reviewed Mar 30, 2024

View reviewed changes

src/hooks/use-alert.ts Outdated Show resolved Hide resolved

trim

3baabce

Amnish04 requested changes Mar 30, 2024

View reviewed changes

kliu57 added 3 commits March 30, 2024 15:13

renamed vars

6e4615f

extend duration of my alerts, fixed accessibility issue in new provid…

756e76f

…er row cancel icon

moved location of variables storing providers api url and names to th…

4ce6eab

…eir respective provider classes

kliu57 mentioned this pull request Mar 30, 2024

Follow up change to User Settings providers table #542

Closed

kliu57 requested a review from mingming-ma March 30, 2024 20:49

Amnish04 reviewed Mar 30, 2024

View reviewed changes

src/components/SmallRevealablePasswordInput.tsx Outdated Show resolved Hide resolved

Amnish04 mentioned this pull request Mar 30, 2024

Replace "Cancel Adding Provider" SVG with an IconButton #543

Closed

mingming-ma reviewed Mar 30, 2024

View reviewed changes

mingming-ma removed this from the Release 1.7 milestone Mar 30, 2024

mingming-ma added this to the Release 1.8 milestone Mar 30, 2024

made changes according to reviews

8b3f15b

kliu57 requested review from Amnish04 and mingming-ma April 3, 2024 17:13

kliu57 mentioned this pull request Apr 3, 2024

User settings providers section UI change #548

Closed

Amnish04 mentioned this pull request Apr 3, 2024

User Settings modal does not use valid HTML #550

Open

mingming-ma approved these changes Apr 3, 2024

View reviewed changes

kliu57 mentioned this pull request Apr 3, 2024

User settings providers api key field change #552

Closed

Amnish04 requested changes Apr 3, 2024

View reviewed changes

renamed PasswordInput prop size to inputSize"

6f05011

kliu57 requested a review from Amnish04 April 3, 2024 19:38

Amnish04 approved these changes Apr 3, 2024

View reviewed changes

kliu57 merged commit 73da47c into main Apr 3, 2024
4 checks passed

kliu57 deleted the issue-503 branch April 3, 2024 19:56

kliu57 restored the issue-503 branch April 3, 2024 20:11

This was referenced Apr 3, 2024

Replace "Cancel Adding Provider" SVG with an IconButton #554

Merged

PasswordInput component refactor #553

Closed

Amnish04 deleted the issue-503 branch April 3, 2024 20:42

kliu57 mentioned this pull request Apr 3, 2024

Hotfix for user settings provider table #556

Merged

rjwignar mentioned this pull request Apr 10, 2024

API Key Field Enhancement: Replaced Show/Hide button with Eye ReactIcons #579

Merged

Amnish04 mentioned this pull request Apr 12, 2024

Refactor PasswordInput component to follow Chakra's design system #582

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support custom providers #530

Support custom providers #530

kliu57 commented Mar 27, 2024 •

edited

kliu57 commented Mar 27, 2024 •

edited

cloudflare-pages bot commented Mar 30, 2024 •

edited

kliu57 commented Mar 30, 2024 •

edited

Amnish04 left a comment

kliu57 commented Mar 30, 2024

mingming-ma left a comment •

edited

Amnish04 commented Mar 30, 2024

tarasglek commented Mar 31, 2024 •

edited

humphd commented Mar 31, 2024

tarasglek commented Apr 1, 2024

kliu57 commented Apr 3, 2024 •

edited

kliu57 commented Apr 3, 2024

mingming-ma left a comment

Amnish04 Apr 3, 2024

kliu57 Apr 3, 2024

Amnish04 Apr 3, 2024

Amnish04 Apr 3, 2024

Amnish04 Apr 3, 2024

Amnish04 left a comment

		type PasswordInputProps = ComponentPropsWithRef<typeof Input> & {
		size?: "sm" \| "md";

	type PasswordInputProps = ComponentPropsWithRef<typeof Input> & {
	size?: "sm" \| "md";
	type PasswordInputProps =InputProps & {

		const paddingRight = size === "sm" ? "2.5rem" : "4.5rem";
		const paddingLeft = size === "sm" ? "0.4rem" : undefined;

Support custom providers #530

Support custom providers #530

Conversation

kliu57 commented Mar 27, 2024 • edited

Implemented functionalities:

Add Provider button:

Other buttons/fields:

Code changes (only summary of important points):

kliu57 commented Mar 27, 2024 • edited

cloudflare-pages bot commented Mar 30, 2024 • edited

Deploying chatcraft-org with Cloudflare Pages

kliu57 commented Mar 30, 2024 • edited

Amnish04 left a comment

Choose a reason for hiding this comment

kliu57 commented Mar 30, 2024

mingming-ma left a comment • edited

Choose a reason for hiding this comment

Amnish04 commented Mar 30, 2024

tarasglek commented Mar 31, 2024 • edited

humphd commented Mar 31, 2024

tarasglek commented Apr 1, 2024

kliu57 commented Apr 3, 2024 • edited

kliu57 commented Apr 3, 2024

mingming-ma left a comment

Choose a reason for hiding this comment

Amnish04 Apr 3, 2024

Choose a reason for hiding this comment

kliu57 Apr 3, 2024

Choose a reason for hiding this comment

Amnish04 Apr 3, 2024

Choose a reason for hiding this comment

Amnish04 Apr 3, 2024

Choose a reason for hiding this comment

Amnish04 Apr 3, 2024

Choose a reason for hiding this comment

Amnish04 left a comment

Choose a reason for hiding this comment

kliu57 commented Mar 27, 2024 •

edited

kliu57 commented Mar 27, 2024 •

edited

cloudflare-pages bot commented Mar 30, 2024 •

edited

kliu57 commented Mar 30, 2024 •

edited

mingming-ma left a comment •

edited

tarasglek commented Mar 31, 2024 •

edited

kliu57 commented Apr 3, 2024 •

edited