ChatCraft week 10: useMemo and Chakra alert banner
Tags: chatgpt, opensource, typescript, chakra
Published: 2024-03-23 00:04:40

---
series: Collaborating on ChatCraft
---

Following my last week's [PR](https://github.com/tarasglek/chatcraft.org/pull/498) where I added a free provider that users could use to try out [ChatCraft](https://chatcraft.org) 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](https://chatcraft.org) users.

This means that if you have never gone to [https://chatcraft.org](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](https://chakra-ui.com/docs/components/alert) 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](https://chatcraft.org), 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

{% github https://github.com/tarasglek/chatcraft.org/pull/517 %}

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`](https://github.com/tarasglek/chatcraft.org/pull/517/files#diff-b5f5521c9795e314efdf6293ad3afda789a1402bbf5e2a304e20efa8134d2a15).

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`](https://github.com/tarasglek/chatcraft.org/pull/517/files#diff-a5f1eb4e566f31ab6bd0268de9336ec778c9bed2e2a834a3695f0fc761c68ff5) 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`](https://react.dev/reference/react/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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vch81ovtguw4a1n74102.png)

---

# 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](https://github.com/tarasglek/chatcraft.org/issues/503#issuecomment-2010031012) by Taras.

{% github https://github.com/tarasglek/chatcraft.org/issues/503 %}

---

# Other PRs in this week's release

I reviewed two PRs by my teammates this week. The [first PR](https://github.com/tarasglek/chatcraft.org/pull/506) is a shared chat bug that has been in production for a long time. [Roy](https://dev.to/rjwignar) 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](https://github.com/tarasglek/chatcraft.org/pull/520) I reviewed was a fix by [Amnish](https://dev.to/amnish04) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgtkhglujfr6iauge6xo.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijoley25spc18wyiy05g.png)