ChatCraft week 10: useMemo and Chakra alert banner

Following my last week's PR where I added a free provider that users could use to try out ChatCraft without entering an API key, this week I handled a follow up task to make this new provider the default provider for all new ChatCraft users.

This means that if you have never gone to https://chatcraft.org and you visit it now, you will automatically be using the free provider from the get go!

But since the free model is limited and does not have as good of a response as say, OpenAi, I added a chakra alert banner at the top to notify users that they can change the provider by going to the user settings.

Once in the user settings they can select a different provider such as OpenAi and enter their OpenAi API key.

If you don't know about ChatCraft, it is an open source web app designed to work with GPT models like ChatGPT with many other features designed for programmers! You can toggle between a variety of providers such as OpenAi, OpenRouter, and more to come. We also have image generation, image reading, functions, and so much more.

---

Merged Pull Request

Set init provider for new users to free model, added info alert banner #517

kliu57 posted on Mar 21, 2024

• Set initial provider for new users to FreeModelProvider (can test by clearing cache)
• New users will not see the Instructions page upon their first visit to chatcraft, they can start talking to FreeModelProvider right away
• Users currently using FreeModelProvider will see the following alert banner with link which opens user settings

Closes #501

Code changes:

Modifications to settings.ts:

• Made FreeModelProvider the initial provider for new users instead of OpenAiProvider
• Made the default model of FreeModelProvider the initial model instead of OpenAiProvider's default model

Modifications to ChatBase.tsx:

• Modified ChatBase.tsx to show the alert banner to users using FreeModelProvider as their currentProvider
• Clicking the link in alert banner opens the User Settings

Modifications to Instructions.tsx:

• Made api key field not a required field for FreeModelProvider
• Modified form submission handler function so that it will skip key validation for FreeModelProvider
• Kept this change even though we are not currently using Instructions page, just in case we need that page in the future

How to test:

• Either clear your cache (you will automatically be set to free provider) or manually change your provider to the free provider in settings
• Go to the chatcraft main url, you should not see the instructions page and should be able to talk to chatcraft right away
• You should also see the alert banner, which notifies you that you are using free provider
• Click the link in the banner
• The User Settings modal should now open

View on GitHub

For switching the initial provider for new users from OpenAi to the free provider, all I had to do was make the change in settings.ts.

As for adding the alert banner at the top of the page, it took me a while to figure out which file I should be editing to add that. After a bit of testing, I found that ChatBase.tsx was where most of the page components such as the Header , Sidebar, MessagesView, PromptForm, were. I added my alert banner component right above the Header.

I used the useMemo React Hook to create the alert banner.

  const defaultProviderAlert = useMemo(() => {
    // If we are using default provider, show alert banner to notify user
    if (showAlert && settings.currentProvider instanceof FreeModelProvider) {
      return (
        <Alert status="info" variant="solid" sx={{ py: 1 }}>
          <AlertIcon boxSize="4" />
          <AlertDescription fontSize="sm">
            You are using the default free AI Provider, which has limited features.{" "}
            <Text
              as="span"
              cursor="pointer"
              fontSize="sm"
              textDecoration="underline"
              onClick={onPrefModalOpen}
            >
              Click here
            </Text>{" "}
            to add other AI providers.
          </AlertDescription>
          <CloseButton
            position="absolute"
            right="8px"
            top="4px"
            size="sm"
            onClick={() => setShowAlert(false)}
          />
        </Alert>
      );
    }
  }, [onPrefModalOpen, settings.currentProvider, showAlert]);

Result:

---

Upcoming Issues

In the upcoming weeks, I will be working to allow users to add their own custom providers by entering a provider URL! I also ran a design idea by Taras.

Custom AI Completion Endpoint #503

tarasglek posted on Mar 15, 2024

Lets extend the work in https://github.com/tarasglek/chatcraft.org/pull/498 to enable a custom provider.

Eg I would provide a url like "https://taras-free_open_router.web.val.run/api/v1" or "https://api.[deepinfra.com](https://deepinfra.com/docs/advanced/function_calling)/v1/openai" and a token and be able to talk to a custom model.

Chatcraft require that [url]/completion and [url]/models are openai-compatible. Note this should be done in such a way that we could have multiple custom providers, eg deepinfra and anyscale.

View on GitHub

---

Other PRs in this week's release

I reviewed two PRs by my teammates this week. The first PR is a shared chat bug that has been in production for a long time. Roy has found a workaround fix for the bug and I tested it. Now, if you create a Shared Chat and you access the same shared chat you created by clicking it in the sidebar, you will no longer get an error.

The second PR I reviewed was a fix by Amnish on the message dropdown options. The message dropdown options should only show the "Speak" and "Download as Audio" options when the user is currently using OpenAi provider since only this provider has this feature. Now if you are using OpenRouter or the free provider, you will not see these features in the message dropdown. Also, if you did not know, you can get ChatCraft to speak messages out loud. Just enter an OpenAi API key and right click any message and click Speak. Or toggle the sound icon and it will speak all the messages aloud as it generates them.