DEV Community: Katie Liu

ChatCraft week 14: Releasing v2.0!

Katie Liu — Fri, 19 Apr 2024 22:05:57 +0000

Today marks the final day on the open source team working on ChatCraft! It's been an eventful week as everyone scrambles to polish up their feature code with final bug fixes.

Meeting with Taras

This week we met with Taras, the founder of ChatCraft online to showcase our contributions and get some professional advice from him. It was very rewarding to see what we managed to get done in the span of four months with our small team of six!

Some of our notable features include but are not limited to:

Image reading and image generation
Custom provider support
Text to Speech
Google OAuth support
Mobile support

Coding

This week, I focused my attention on bug fixes since this is the last week and I didn't want to risk introducing any new issues. The issue I worked on was something brought up to me by Rachit in the previous week - we don't want to save an api key into localStorage unless it has been validated.

It was not a problem previously to save invalid api keys, but now it has become a problem since we can now toggle between Providers by using the up arrow next to the "Ask" button:

When you press the up arrow, as you can see in the screenshot above, you get to toggle between all the providers you have saved keys for. This includes any custom providers you have added! However we don't want to show any provider with an invalid key in this list, since even if a user selects it they won't be able to use it. (They will get error when they try to send a message)

To fix this issue I opened the following PR:

Enhancement - only save keys to settings.providers if validated #597

kliu57 posted on Apr 17, 2024

Fixes #596

Summary: No longer saving providers or their api keys to settings.providers array unless the api key is validated. If an invalid or blank is entered, the provider is REMOVED from settings.providers.

Important coding points:

Removed the placeholder text in the api key field when you create a new custom provider row (placeholder text was showing up as asterix)
Removed the useDebounce code, it wasn't working and is not worth the trouble to fix. useDebounce is sort of like a useEffect, but which allows us to wait until the user stops typing to validate the key. However, we do not expect anyone to be typing out a 32 character api key anyways, so opted to remove.
The keys are stored in tableProviders and only when they are validated they are stored to settings.providers
In these scenarios, tableProviders is synced with settings.providers: (when "syncing" happens, those invalid and blank api keys will disappear)
- When modal first opens
- When modal closes
- When current provider is set (need to sync to update the checkmark)
- When a custom provider is deleted (need to sync to show the row deleted)
- When a custom provider is added (need to sync to show the new row)
Note: If you create a custom provider and then later set the key to something invalid, when you close the modal the custom provider row will disappear since we only save it if it has a valid key.

View on GitHub

I am no longer automatically updating localStorage when the user enters a key; instead, I store the key in the tableProviders array. Only when the key has been validated I will store it to settings.providers (localStorage). And if a key is invalid or blank, I will remove it from localStorage.


  const handleApiKeyChange = async (provider: ChatCraftProvider, apiKey: string) => {
    const newProvider = providerFromUrl(
      provider.apiUrl,
      apiKey,
      provider.name,
      provider.defaultModel
    );

    setFocusedProvider(newProvider);

    const newProviders = { ...settings.providers };

    // Update api key in table
    tableProviders[newProvider.name] = newProvider;

    // Api key validation
    try {
      setIsApiKeyInvalid(false);
      setIsValidating(true);

      const result = await newProvider.validateApiKey(newProvider.apiKey!);

      setIsApiKeyInvalid(!result);
      setIsValidating(false);

      if (result) {
        // Valid key, update in settings.providers
        newProviders[newProvider.name] = newProvider;
      } else {
        // Invalid key, remove from settings.providers
        delete newProviders[newProvider.name];
      }
    } catch (err: any) {
      setIsApiKeyInvalid(true);
      setIsValidating(false);

      // Invalid key, remove from settings.providers
      delete newProviders[newProvider.name];
    }

    setSettings({
      ...settings,
      ...(newProvider.name === settings.currentProvider.name && { currentProvider: newProvider }),
      providers: newProviders,
    });

    if (newProvider.name === selectedProvider?.name) {
      setSelectedProvider(newProvider);
    }

    setApiKeySaved(true);
  };

Sheriff

This week I am the sheriff, meaning I am the go-to contact person whenever there is any issues with PRs blocked or needed reviews. As I result I reviewed 5 PRs this week! I also contributed code to one PR.

See all the PR's in this week's 2.0 release!

ChatCraft week 13: Fixing bugs

Katie Liu — Sat, 13 Apr 2024 13:03:01 +0000

This week on ChatCraft, I fixed a few bugs I found in production that have arisen since the new custom provider feature was implemented. I was able to find these bugs because I reviewed many PRs this week and during testing those PRs I was able to see some abnormal behaviour.

This is the issue I created which outlines how to recreate the 4 bugs I found.

Bug 1

The first bug involved the Instructions page. This page is no longer in use for the most part, but will still come up when the user clears their current provider's api key.

When the user uses a custom provider however, the dropdown list in the Instructions page did not include that custom provider, which leads to unexpected behaviour.

I fixed this by merging the supported providers list with the user's saved providers (which would include the custom provider).

Bug 2

The second bug is also on the Instructions page. The previous behaviour was that when we toggle between the providers in the dropdown, if one of them had a saved api key (from localStorage), then we set that key to settings.currentProvider. This poses a problem, since we are bypassing the key validation code and taking the user away from the Instructions page (Instructions page only shows up for users when the settings.currentProvider api key is blank, and it's no longer blank so we leave). The stored api key could be a stored key that is invalid. Or, the stored key could have become invalid after time passed.

I fixed this by introducing a state variable selectedProvider in Instructions.tsx so we can keep track of the dropdown's selected provider's api key. This allows us to delay the setting of the currentProvider's api key until after we click the Save button.

Bug 3

The third bug involves the User Settings modal. When the user enters a blank or invalid key we get a form error message as expected. However, when we close the modal and reopen it, that message is still there. There is also strange behaviour where if the user input a correct key into that field, the form error message still persists.

I fixed this by adding one line of code to the use effect that runs when the modal is closed, clearing the field validation.

Bug 4

The last bug was brought to my attention while Yumei was testing my PR. I quickly found a fix so I just added it.

The bug involves browsers' password saving ability. When users enter an api key in Instructions page or when they create a custom provider, they were prompted by their browser whether they want to save the password. Users who have a key saved in their browser will experience a bug. The moment they clear their api key the browser will sense that the field is empty and repopulated it with their saved password. Also, when we create one or more providers with the same api url, it will indiscriminately populate the key for those providers.

I don't have a fix for users who have already saved an api key as their password, but I can stop ChatCraft from prompting users to save future keys as passwords. This took a bit of digging online, because many online solutions don't actually work. A lot of the time the browsers will not listen even if you set autoComplete="off". I tried many online solutions one by one, and finally found one that worked.

I found that when Chakra UI's Input component is set to password that is when the browsers will prompt the saving of the password. Therefore I changed it to always be text. Now I lost a feature of component, which used to use type = "password" to disguise the user key with asterix. However I was able to find a different way to hide the user key with asterix (see below!)

PR

My PR for these bug fixes was reviewed by three contributors and landed in release v1.9.0!

Reviews

I did reviews on the following PRs:

Most of these were bug fixes and there is minimal code additions, so I just did testing of the issue to make sure the bug is fixed and no new bugs were introduced.

Unfortunately I found a new bug after a PR had already been merged. PR #577 was a toast message width fix, but for some reason it affected the API Key validation toasts, making them appear when they should not, and in greater numbers. Here is the issue I created which details how to reproduce the issue. It took me a while to track down which PR this bug originated from. At first I was worried this bug originated from one of my PRs. I went through each commit in ChatCraft in sequence until I found where the bug was no longer occurring. Although I managed to narrow down when the bug started occurring, I did not have time to investigate what part of the code from that PR was causing it. I contacted Roy since it was his PR and I believe he is looking into it now.

ChatCraft week 12: PR merged and follow ups!

Katie Liu — Sat, 06 Apr 2024 00:35:59 +0000

Landed PR

This week I finally landed the custom providers feature I have been working on! See my last blog for more details about it. Now if you have an Open AI compatible API url and key, you can use ChatCraft as your user interface to communicating with the API!

Support custom providers #530

kliu57 posted on Mar 27, 2024

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:

https://github.com/tarasglek/chatcraft.org/issues/524 https://github.com/tarasglek/chatcraft.org/issues/542 https://github.com/tarasglek/chatcraft.org/issues/548 https://github.com/tarasglek/chatcraft.org/issues/550 https://github.com/tarasglek/chatcraft.org/issues/551 https://github.com/tarasglek/chatcraft.org/issues/552 https://github.com/tarasglek/chatcraft.org/issues/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)

View on GitHub

Before this got merged I did a lot of small refactoring and bug fixes, such as consolidating components, making sure the new provider row disappears after we close the modal, etc.

And as with any major feature, we can't forget about the follow up issues and hotfixes.

Bug fixes

Some bug fixes I completed this week:

Hotfix for user settings provider table #556

kliu57 posted on Apr 03, 2024

This bug was missed when we landed #530

Closes #555 Details of the bug can be found in the issue linked above

View on GitHub

Logo bg color fix for all models that don't have logo #562

kliu57 posted on Apr 04, 2024

Bug:

Currently some logos in OpenRouter and custom providers appear as white, since they have a default white logo on a white bg.

Fix:

Set the default Avatar to have green bg color.

code change:

View on GitHub

Follow up issues

There are many follow up issues, but here are the two major ones I am currently focusing on.

Make Options dialog more dense/compact #561

tarasglek posted on Apr 04, 2024

Lets make it look something like:

Models (put the temperature setting and add free provider button here)
- free
- openai
- openrouter
WebHandlers
UI Customization (all the other settings?)

ui would look like vs code:

View on GitHub

This issue aims at revamping the UI of the User Settings modal, to make sure it encompasses all our settings in a user-friendly way.

With taras' guidance, I have created some mock up UI designs, and I am waiting to get feedback on them. I also spoke with mingming about how to create this two-column modal, as this task may need to be divided up among more people.

Update Settings model option to be per provider #524

humphd posted on Mar 23, 2024

The Settings modal used to be the place where you changed the model you were using:

However, this is no longer true, since we have the "Ask" button and menu.

Let's either remove it or convert the "GPT Model" part of the form to be "Default Model for Provider" and make it so that you can specify a default model when you switch between provider.

View on GitHub

The second issue I have my focus on is this issue which would allow the user to store a "current model" for each provider. Currently whenever the user switches between providers (let's say they switch from OpenAI to OpenRouter), the model will stay the same but when the switched provider doesn't have the model it will just change to some default model. This is not very convenient for the user because most likely this default model is not what they want to use.

I plan to change the way we store the current modal information. We currently store one "current modal" in the localStorage as settings.model. I plan to add a new member variable to the ChatCraftProvider class so that we store the model in the settings.currentProvider object. This way when the user switches between providers, they can have back the model they were last using with that provider! For those users who have more than one providers, I would assume that they have a preferred go-to model for each of their providers.

Code Reviews

I did many code reviews this week. Here are the PRs I reviewed which were later merged!

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

Amnish04 posted on Apr 03, 2024

As discussed in https://github.com/tarasglek/chatcraft.org/pull/530#discussion_r1545481317, we should not use Svg's directly as an alternative of a button since it is semantically incorrect.

https://www.reddit.com/r/webdev/comments/r72zq6/comment/hmwvobm/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

I tried preserving the look of the button, and was successful for the most part.

Normal:

Active:

This fixes #551

View on GitHub

Hide voice selection option in prefs menu when tts is not supported #557

Amnish04 posted on Apr 03, 2024

This is to make sure that the voice selection options in Preferences Modal are hidden when TTS is not supported by the current provider.

With OpenAI:

With Free Provider:

Fixes #523

View on GitHub

Updated regex to ignore backslash #559

Rachit1313 posted on Apr 04, 2024

Closes #427

Changes Made:

Updated regex to ignore backslash in github commands.

How to test:

Both the links with backslash at the end or without would recieve diff when a link of github PR is imported using /import command.

View on GitHub

Fix image generated not available after some time #549

mingming-ma posted on Apr 03, 2024

Description

In the DALL·E 3 generations, if response returned as URL, it will expire after an hour

This update change the response format to b64_json so we can keep the image's Data

Fixes #496

View on GitHub

It amazes me how many fixes and PRs we get merged every week! See the list of all the PRs merged from this week's release v1.8.0.

ChatCraft week 11: Add support for custom providers!

Katie Liu — Sat, 30 Mar 2024 08:00:57 +0000

This was a very eventful week, I completed a big feature which is giving the User Settings a makeover and supporting custom providers!

Now users can add their own provider url and key to use with ChatCraft, so long as their provider is open ai compatible.

This feature is currently under review so not in production yet, but you can check out a development version here. Once I have gotten reviews from my team this should be good to enter production.

Here are the before and after screenshots:

Before

After

Adding a custom provider

Unfortunately I only have an open ai and open ai key at this time, so I am not able to test with more providers. I will try to acquire some more to use for testing.

Click add button which creates a new row, enter your info and click Save

The new provider key has been validated and the provider is saved to localStorage and shows up in the table!

Set it as the current provider so you can starting using!

It talks!

Pull Request

Unfortunately there is too much code in this PR for me to talk about without this blog post getting too long. I used a number of state variables to track which provider the use checked the checkbox of, which provider's api key the user is editing, and to track the data of the new provider that is about to get created.

I also tried to make a visually appealing UI and a user friendly experience, which includes validating the api key immediately after editing a key and providing instant feedback if the key is invalid by printing a message under the field. Also a spinner would show if the validation is in progress. I had to utilize the state variable I set up so that I could correctly identify which row the error message would appear under.

Looking forward to getting this merged next week so users can test this feature out!

Hotfixes

I also merged two hotfixes this week. Unfortunately the second was to fix a mistake I made in the first one.

Migration fix for settings.providers #537

kliu57 posted on Mar 28, 2024

Closes #536

Code changes:

Part 1 - Changing settings.providers to use name as the key

Files: src/components/Message/AppMessage/Instructions.tsx src/components/PreferencesModal.tsx src/lib/settings.ts

Part 2 - Deserializing settings.providers in `settings.ts`

To test this you can set your settings json to the following (replace YOUR_OPENAI_KEY with your key). Using my json you start with two openai providers and two openrouter providers and after navigating to or refreshing chatcraft the deserializer will change it to having two.

{"model":"openai/gpt-3.5-turbo","temperature":0,"enterBehaviour":"send","countTokens":false,"sidebarVisible":false,"alwaysSendFunctionResult":false,"textToSpeech":{"announceMessages":false,"voice":"alloy"},"providers":{"OpenAI":{"id":"Jnc3KkY4--dQm7KwMWy7Y","name":"OpenAI","apiUrl":"https://api.openai.com/v1","apiKey":"aaaaaaaa"},"OpenRouter.ai":{"id":"XG_lpq_xG-nMIbD1ZRCG-","name":"OpenRouter.ai","apiUrl":"https://openrouter.ai/api/v1","apiKey":"bbbbbbbb"},"https://api.openai.com/v1":{"id":"Jnc3KkY4--dQm7KwMWy7Y","name":"OpenAI","apiUrl":"https://api.openai.com/v1","apiKey":"YOUR_OPENAI_KEY"},"https://openrouter.ai/api/v1":{"id":"XG_lpq_xG-nMIbD1ZRCG-","name":"OpenRouter.ai","apiUrl":"https://openrouter.ai/api/v1","apiKey":"YOUR_OPENROUTER_KEY"}},"currentProvider":{"id":"XG_lpq_xG-nMIbD1ZRCG-","name":"OpenRouter.ai","apiUrl":"https://openrouter.ai/api/v1","apiKey":"YOUR_OPENROUTER_KEY"},"compressionFactor":1,"maxCompressedFileSizeMB":20,"maxImageDimension":2048}

Part 3 - Removing unnecessary calls to `getSettings()` in useEffects to decrease how many times our deserializer runs

As discussed with @amnish04 already, there are some locations where we can call getSettings() a lesser amount of times. Files: src/hooks/use-chat-openai.ts, src/lib/ai.ts

@rachit1313 If this PR is merged to main before your PR#535, then I need you to merge the code from main into your branch and then modify your code to use the name as the key instead of the apiUrl as the key whenever you access settings.providers

View on GitHub

Hotfix for bug introduced in pr 537 #538

kliu57 posted on Mar 28, 2024

Accidentally introduced a bug in this morning's merged PR #537

Took a statement out of an if statement in settings.ts, which may cause some users to be unable to load ChatCraft.

The users that are affected are users who have not logged into ChatCraft since last month. They have a settings JSON in their localStorage, but do not have settings.currentProvider. (Because the last time they logged in was last month, back before I introduced settings.currentProvider)

Also if a user went to localStorage and manually set settings to {}, they would also be affected.

The code from PR 537 which caused the bug:

Fix

Restoring the if statement in this hotfix fixes the issue.

How to test:

Go to localStorage and remove the currentProvider part of the settings json, or just clear the entire settings json and put {}
Load ChatCraft
Result - (it should have an error in production, but not in this PR's preview)

View on GitHub

Reviews

I reviewed a teammate's PR which involved allowing users to easily switch between the providers they have keys saved for in their localStorage. Now instead of going to User Settings modal to change providers, users can change it from the models dropdown.

I had a call with my teammate to discuss some changes I needed him to make in his PR once my hotfix was merged, and also some strange behaviour he experience with being unable to get the list of models, however I was not able to help with debugging as I could not find a way to reproduce the issue on my side. He updated me later to say it was related to his network config issues.

Also, since I am familiar with working with providers and the settings saved in localStorage, I was able to review his PR code and ask him to do a bit of refactoring.

ChatCraft week 10: useMemo and Chakra alert banner

Katie Liu — Sat, 23 Mar 2024 00:04:40 +0000

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.

ChatCraft week 9: Free Model Provider!

Katie Liu — Sat, 16 Mar 2024 05:54:39 +0000

This week I got a PR merged which established a free new provider for new users to try out! So now, even if you don't have any Open Router or Open AI api keys in your name, you can try ChatCraft out with our free model provider!

Simply go to https://chatcraft.org and select Free AI Models from the Provider dropdown.

The responses from the free model won't be as good as Open AI's chatgpt or gpt4 models but you can try out ChatCraft and see what it's capable of! For example, editing prompts, saving or sharing chats, adding functions and more.

Coding

Add FreeModelProvider and more provider refactoring #498

kliu57 posted on Mar 14, 2024

Added new provider (free provider for new users to try) Further providers refactoring

Closes #401

Code changes:

Moved validateApiKey, queryModels, createClient out of ais.ts and into ChatCraftProvider.ts
Moved usingOfficialOpenAI, usingOfficialOpenRouter out of ai.ts and into providers/index.ts
Added new free provider providers/DefaultProvider/FreeModelProvider.ts
Configured ModelAvatar.tsx for DefaultProvider so logo will display with the green bg

Potential future follow up items:

Make FreeModelProvider the default provider for new users (this will make the Instructions page obsolete so we need to design a new way to instruct new users about ChatCraft)
Query the first available free provider in the list of providers instead of hardcoding (currently not sure how since requires making defaultModelForProvider() async and affecting alot of other files)

View on GitHub

The free model provider endpoint was provided by Taras (see issue). I created a new provider class called FreeModelProvider which has the provider url. I also overloaded the parent class' queryModels function to fetch the available models. Lastly, I made the validateApiKey function always return true since this model does not require a key.

  async queryModels(key: string) {
    const res = await fetch(`${FREEMODELPROVIDER_API_URL}/models`, {
      method: "GET",
    });

    if (!res.ok) {
      throw new Error(`${res.status} ${await res.text()}`);
    }

    try {
      const result = await res.json();
      return result.data.map((model: { id: string }) => model.id) as string[];
    } catch (err: any) {
      throw new Error(`error querying models API: ${err.message}`);
    }
  }

The result of my queryModels function:

I also had to make modifications to other project files. For example, I had to make it so that when the user selects the free provider, instead of waiting for them to enter an api key, I would submit a mock key automatically which would be automatically validated. That means the moment they select the free provider they are taken to the next page where they can start using ChatCraft! See code here.

I also made many small code adjustments after getting feedback from Dave and Taras, and also debugged an issue where the logo was not appearing.

I'm very happy that this code is not in production, and the refactoring of provider code that I have been working on the last few weeks have finally paid off. Moving forward expect to see even more new providers on ChatCraft!

Running Ruby on ChatCraft

I did functionality testing for my teammate Yumei's PR this week. This week she managed to allow ChatCraft to run Ruby code on the browser! Check out her PR! Also, see other PR's from this week's ChatCraft release v.1.5.0!

ChatCraft week 8: Successful refactoring PR!

Katie Liu — Sat, 09 Mar 2024 05:28:17 +0000

Sheriff Duty

This week on ChatCraft, I am the designated Sheriff for our project team. This means that I lead the weekly team meeting, took notes, and I was the point of contact person when issues arise. I also monitored the to-do items for this weeks release and pushed a new release to GitHub today since it is the end of the week!

Largest Pull Request Yet

This release marked my largest merged pull request to date with a whopping 15 file changes!

In this PR I worked with React use states, use effects and use context. ChatCraft uses React Context to provide access to and store the data in localStorage. The api key and api url used to be stored in settings.apiKey and settings.apiUrl respectively.

However, since I have recently introduced a ChatCraftProvider class which holds all the information about a provider such as name, key, url, some refactoring of the project is needed. I also introduced two child classes called OpenAiProvider and OpenRouterProvider. The goal is to establish another new provider in the coming weeks.

I replaced settings.apiUrl and settings.apiKey with settings.currentProvider. I also had to deal with the deserialization of currentProvider in the deserializer function of settings.ts. I parsed the JSON of currentProvider into a ChatCraftProvider object.

I also implemented the migration of current ChatCraft users who still have apiKey and apiUrl values in their localStorage. I migrated those values to currentProvider and removed those fields.

export const deserializer = (value: string): Settings => {
  const settings = JSON.parse(value);
  if (!settings.model) {
    settings.model = defaults.model;
  }

  if (typeof settings.model === "string") {
    settings.model = new ChatCraftModel(settings.model);
  }

  if (settings.currentProvider) {
    // Handle deserialization of currentProvider
    settings.currentProvider = providerFromJSON(settings.currentProvider);
  } else {
    // No current provider, check if we need to handle migration of deprecated apiKey, apiUrl
    if (settings.apiKey && settings.apiUrl) {
      const newProvider = providerFromUrl(settings.apiUrl, settings.apiKey);
      settings.currentProvider = newProvider;
      settings.providers = { ...settings.providers, [newProvider.apiUrl]: newProvider };
      delete settings.apiKey;
      delete settings.apiUrl;
      console.warn("Migrated deprecated apiKey, apiUrl");
    }
  }

  return { ...defaults, ...settings };
};

Code Changes after Review

At first I was using dynamic imports in ChatCraftProvider to circumvent a circular dependency issue. But after speaking to Dave I realized it would be better to simply move the code out of that class and into another file, providers/index.ts.

This made my code a lot simpler since without the dynamic imports, I wouldn't have to deal with the functions being async. This allowed me to move my deserialization code and migration code into the deserializer function of settings.ts. This was the best place for it, but I previously could not place it there due to the deserializer function only allowing asynchronous calls.

My Reviews on Team's PR

Add python-wasi on run-code #485

WangGithub0 posted on Mar 06, 2024

Add python-wasi in run-code, and also addressing typeScript type declarations for it. #312

View on GitHub

I reviewed this very cool PR this week and I urge you to check it out. My teammate Yumei has made it possible for users to run Python code in ChatCraft! If you ask for or give ChatCraft some Python code, there is now a run icon you can click to execute the code!

I tested this and the only problem I saw with it was that it cannot run any code that requires input from the user. Not yet anyways :)

So apparently she was able to get this working using python-wasi

More about Python WASI

Imagine you want to run Python code, but instead of running it on your computer directly, you want to run it in a web browser. python-wasi is a version of Python that's been modified to run in a web environment using WebAssembly.

WebAssembly (often abbreviated as WASM) is a technology that lets you run code written in languages other than JavaScript (like Python, in this case) right in your web browser, at near-native speed.

ChatCraft week 7: New issue, new provider?

Katie Liu — Fri, 23 Feb 2024 22:54:11 +0000

This week on ChatCraft, I am beginning work on a new issue.

Do not require chatcraft users to enter a key to use it #401

tarasglek posted on Feb 04, 2024

If a user does not enter a key, we should use a free model endpoint provided by something like https://taras-free_open_router.web.val.run implemented by https://www.val.town/v/taras/free_open_router . Should still have a banner prompting for user to enter their key while in limited to free models mode. This makes use of a new openrouter feature where free models are singled out with :free suffix

View on GitHub

This issue involves adding a new default provider so users can try it for free. However since the issue is so big I have broken it up into a smaller issue:

Create OpenAiProvider and OpenRouterProvider #478

kliu57 posted on Feb 21, 2024

Subtask of issue #401

Create providers/OpenAiProvider.ts, providers/OpenRouterAiProvider.ts
Copy provider-specific methods (for example validateOpenAiApiKey, validateOpenRouterApiKey) to providers/OpenAiProvider.ts, providers/OpenRouterAiProvider.ts
Test these copied functions on local, but no need to commit code to use them yet

View on GitHub

PR

Created OpenAiProvider and OpenRouterProvider #479

kliu57 posted on Feb 22, 2024

Closes #478

Summary:

created providers/OpenAiProvider.ts and providers/OpenRouterAiProvider.ts containing provider-specific methods

Code changes in this PR:

src/components/Message/AppMessage/Instructions.tsx:

the API URL dropdown field now iterates through the list of supportedProviders (missed update from PR 423)

src/components/PreferencesModal.tsx:

added await and async since fromJSON method is now async

src/lib/ChatCraftProvider.ts:

modified fromJSON to be async and to return an OpenAiProvider or OpenRouterProvider instead of a ChatCraftProvider object. (OpenAiProvider and OpenRouterProvider are derived/child classes of ChatCraftProvider)
had to make method async to avoid circular dependency

src/lib/providers/OpenAiProvider.ts:

created derived/child class of ChatCraftProvider to represent an OpenAi provider
copied provided-specific methods to this class

src/lib/providers/OpenRouterProvider.ts:

created derived/child class of ChatCraftProvider to represent an OpenRouter provider
copied provided-specific methods to this class

View on GitHub

I created providers/OpenAiProvider.ts and providers/OpenRouterAiProvider.ts containing provider-specific methods. These classes are child classes of the parent class ChatCraftProvider which I created last month. Eventually I will also create one called DefaultProvider.ts.

Most of the provider-specific methods I copied over from ai.ts.

I also made changes to the fromJSON method. This method used to take JSON and return a ChatCraftProvider object. Now it returns either a OpenAiProvider or OpenRouter object depending on the provider url in the json. To do this I had to use dynamic imports.

Code Changes after Review

I have received a code reviews from Taras and Amnish who have both given me advice on how to refactor my code further.

Here are my code changes after receiving their feedback and making the requested changes:

What's Next

My PR is yet to be merged, but once it is, the next step is for me to create another subtask/issue so that we can start using these methods from their provider-specific classes rather than from ai.ts. This will also involve storing our provider settings information into a ChatCraftProvider object in settings.currentProvider or something, so that we can use currentProvider isinstanceof OpenAiProvider and currentProvider isinstanceof OpenRouterProvider to check which provider we are using so that we can call on the correct methods.

My Reviews on Team's PR

Minimize duplication for sidebar code #463

Amnish04 posted on Feb 16, 2024

#437 introduced a lot of duplication for sidebar related styles and logic as we now had different sidebar views for mobile and desktop.

I have tried to minimize that duplication, by creating separate components for mobile and desktop sidebar and exposing through a common Sidebar api, taking inspiration from the way PromptForm is done.

This way, the places that use the sidebar now look the same as before since all the changes have been abstracted in its own module.

Here's a summary of changes:

Renamed the existing Sidebar component to SidebarContent.
Added a SidebarMobile component that uses SidebarContent and extends it by adding the search field and ChatCraft brand at the top.
Similarly, SidebarDesktop component wraps SidebarContent to apply the new open/close transition effect. This way, we don't have to repeat the keyframe definitions at evey place where sidebar is used.
These Sidebar components are exposed by the common Sidebar in index.tsx based on the screen width using isMobile hook.

This fixes #457.

View on GitHub

I reviewed Amnish's PR which was about refactoring code to minimize code duplication introduced from his previous sidebar UI changes. I looked through his code, it involved renaming some things and extracting a context for clarity. I also did regression testing on the sidebar functionalities in desktop and mobile to make sure his code did not introduce any issues.

ChatCraft week 6: Refactoring code

Katie Liu — Sat, 17 Feb 2024 01:09:01 +0000

Issue

Refactor settings API URL dropdown to read from list of ChatCraftProvider #423

kliu57 posted on Feb 08, 2024

Now that we have the ChatCraftProvider class,

In Settings:

API URL dropdown contents should be a list ChatCraftProvider objects

This issue originates from:

This comment in Issue#345: The UI in the settings would change to iterate over the list of providers, and show the various fields for each (i.e., show the Name, URL, API Key for each).
Also see this comment in PR371 and this

View on GitHub

This week on ChatCraft, I tackled a follow up issue from the PRs (1, 2) I merged last two weeks, which allowed users to store provider information for multiple providers using a new ChatCraftProvider class I created.

Now that we have a ChatCraftProvider class, we want to create and maintain an associative array of providers that we currently support. Right now ChatCraft only supports OpenAI and OpenRouter, but we plan to add more soon!

PR

Created list of supported ChatCraftProviders #449

kliu57 posted on Feb 13, 2024

Closes #423

Summary:

Settings API URL field now displays list of supportedProviders which is stored in ChatCraftProvider.ts

Code changes in this PR:

src/components/PreferencesModal.tsx:

Modified code of the event handler of the API URL dropdown field, so that it iterates through the list of supportedProviders

src/lib/ChatCraftProvider.ts:

Moved ProviderData (associative array of ChatCraftProvider) from src/lib/settings.ts to src/lib/ChatCraftProvider.ts since it is something that is solely used by settings
Added supportedProviders (list of currently supported providers)

src/lib/settings.ts:

Moved ProviderData out of this file, see above explanation

View on GitHub

My PR was merged, and now users can go to the ChatCraft settings, and the list of providers in the dropdown there will iterate through our newly created array of supported providers.

The difficulty I had was determining where the supported providers should be stored. Dave was able to help me with this, and ultimately we put it in ChatCraftProvider.ts as a static array.

Investigating an Upcoming Issue

The next issue I have started to work on, will involve refactoring code and then adding a new free provider that users will be allowed to try out.

In the next release, I will be creating a .ts file for each of our current providers (OpenAi.ts, OpenRouter.ts) and moving the relevant methods to that file (for example: validateOpenAiKey to OpenAi.ts and validateOpenRouterKey to OpenRouter.ts).

Code reviews

I did two code reviews this week of new features that my teammates worked on.

PR 437 UI Fix for Mobile

Sidebar Enhancement Reboot #437

Amnish04 posted on Feb 10, 2024

Pull Request #300 has been open for a while, and since then a lot of our preferences have changed regarding sidebar.

I really wanted to get it done, but would have been really difficult to continue on that branch.

Which is why, I have redone the sidebar enhancement from scratch.

As per our discussion, the overlay effect is only applied to mobile devices now and I am using Chakra Drawer for that.
I have also moved the search field to the sidebar on mobile devices due to lack of real estate in the header.
The behaviour on desktop remains the same, except I have added a few animations to make the push content effect smoother.
I also made sure there is no redundant animation on page reloads as it was one of the problems in last PR.
The Pin Sidebar feature has also been removed

Here's how it looks:

On Desktop:

On Mobile:

Breakpoint:

This fixes #299

View on GitHub

This first PR I reviewed was a UI fix to change the behaviour of the mobile ChatCraft sidebar.

Old behaviour on mobile:

New behaviour:

There is also animation added to the sidebar now, and the search field has been moved to somewhere more noticeable.

PR 457 Twitter Card

Add twitter card metadata #459

rjwignar posted on Feb 16, 2024

This fixes #432.

Summary

Added an og:type property. From https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup, A Twitter Summary card can be rendered if an og:type, og:title and og:description exist but not twitter:card, but I ended up also adding required Twitter meta tags for robustness.
added Twitter meta tags required to render a Summary Card w/ Image

Testing Requirements?

I am going to run the generated preview against the Twitter Card Validator. I hope the validator can test the preview website

View on GitHub

The second PR I reviewed was a twitter card metadata enhancement. Now, when you paste a ChatCraft link to twitter, it will automatically generate a Card like such:

ChatCraft week 5: Storing multiple providers

Katie Liu — Fri, 09 Feb 2024 22:29:41 +0000

Issue

This week I finally was able to close the issue I was working on which was allowing ChatCraft users to store api keys for multiple providers. ChatCraft currently only supports two providers (OpenAI and OpenRouter) but we may add more providers in the future!

If you are a ChatCraft user, you can now toggle between OpenAI and OpenRouter in User Settings without having to re-enter your API key.

PR

This is PR I worked on which resolved the above issue.

This PR builds upon the PR I did last week, which completed the set up necessary for this functionality.

Since all the set up was already completed last week, I did not need to make many code changes to complete this. The main things I did was:

when switching providers, saving the user's current api key to settings.providers array if it is not already saved
when switching providers, loading the api key from settings.providers if it is there

This is the event handler function I wrote which will be triggered when the user toggles the provider:

Reviews of my PR

Before my PR got merged, I had many useful reviews from the repo admin and fellow teammates, which helped me discover issues with my code and ways to refactor the code.

This review by Dave helped me find an issue with my old code.

Old code:

if (newProvider.name in settings.providers) {
  newProvider = settings.providers[newProvider.name];
  ...
}

Here I forgot to parse settings.providers[newProvider.name] into a ChatCraftProvider object. We are getting this data from localStorage, so it is safer to use my fromJSON function to parse it into a ChatCraftProvider object.

New code:

const newProvider = settings.providers[selectedProvider.name] ? 
  ChatCraftProvider.fromJSON(
    settings.providers[selectedProvider.name]
  ) : 
  selectedProvider;

This review by Amnish helped me refactor my code by moving it into a handler function.

My Reviews on Teammates' PRs

I reviewed multiple PRs this week and commented on issues I found and suggestions on how the user experience could be improved.

ChatCraft now supports uploading images! See PR#286 and try it for yourself by going to ChatCraft.org selecting "Ask gpt-4-vision-preview" and uploading some images. This functionality is extremely useful! ChatCraft is faster than other image parsing web apps at converting images into text, and you could even do something like upload a UI and ask it to code it for you!

My reviews on this PR and its associated PRs:

PR#286 review 1
PR#286 review 2
PR#419 review 1
PR#419 review 2

I also reviewed PR#402 which allows users to download a ChatCraft message as an image!

PR#402 review

ChatCraft week 4: Release 1.1 PR

Katie Liu — Sat, 03 Feb 2024 04:41:19 +0000

This week of working with the ChatCraft team, it was interesting to see what each team member was working on during our weekly triage meeting. We also, as a team, went through the list of existing issues so that everyone could choose more issues to work on in the future. Today was our first release as a team, and I am happy to see my code be a part of it!

Coding

I broke down the issue I was previously working on into two pieces so that I could get a PR merged in Release 1.1 which happened today.

Issue & PR

The smaller issue I created is meant to be a precursor to solving the larger issue of storing info for multiple providers.

In my PR, I laid down the foundation for storing the provider information, while not changing any existing behaviour.

Here is what I did:

Creating the class ChatCraftProvider.ts which stores information for a provider such as provider name, url, key
Adding the providers var to src/lib/settings.ts, which is an associative array of ChatCraftProvider objects
Adding code to the Instructions.tsx view so that when new ChatCraft users enters a key and clicks the Save button, the provider info is stored to settings.providers (thus saved to localStorage)

Adding code to the event handlers in PreferencesModal.tsx view so that the Settings dialog window will store and remove info from settings.providers

Code Changes

I received code reviews from Dave and Amnish, and I revised my code after getting their comments.

Comment for #371

kliu57 commented on Feb 01, 2024

@humphd Made the following changes to ChatCraftProvider, addressing all your review comments

changed fromUrl function to take apiKey param as well
removed setUrl and setKey functions
changed name member var of ChatCraftProvider from string data type to ProviderName where type ProviderName = "OpenAI" | "OpenRouter.ai"
added fromJSON function

@amnish04 I created an urlToNameMap object which can map the url to the name

const urlToNameMap: { [key: string]: ProviderName } = {


};

Tested fromJSON() function to make sure it can parse JSON to ChatCraftProvider object:

View on GitHub

I was pleasantly surprised that I was able to address all the code changes without needing to ask for help. Being able to refer to previously written code in other files of ChatCraft and having ChatGPT to explain concepts to made my work go faster. My PR was approved and merged as a part of Release 1.1!

Next up in release 1.2, I will be completing the original issue in full. This means we will be reading from the list of multiple providers, and users can toggle back and forth between OpenAI and OpenRouter without their API key being cleared.

Leaving Reviews

I reviewed a PR which was a small UI change revolving around the Speech-to-text Mic button in ChatCraft.

The current behaviour of this Mic button is that you have to hold it and speak and then when you let go, it will transcribe your speed to text and send it to ChatCraft.

This PR is changing the behaviour for mobile to press to start, press to stop, instead of hold to speak. There is also some strange behaviour allowing users to drag the button which is being addressed.

I installed GitHub CLI so I was able to quickly pull the branch code with a simple one-line command.

gh pr checkout THE_PR_NUMBER

Once I did that I ran and tested it on my local. I left my review on the PR, but I will review it once more when Amnish is done making additional changes to it.

ChatCraft week 3: Coding and code reviews

Katie Liu — Sat, 27 Jan 2024 04:52:51 +0000

Coding

This week of working with the ChatCraft team, I started to tackle issue 345.

Allow multiple providers to be used simultaniously #345

tarasglek posted on Jan 16, 2024

At the moment to switch providers we have to go to preferences and swap out provider + key. Would like to just have a set of providers, with keys and switch between them and their models as easily as we do within one provider.

Currently openrouter has some really unique models eg perplexity model that can query the internet:

Useless openai response:

However there are some downsides of accessing gpt through openrouter(robustness, speed, privacy, etc). Also in the future we might want to use dedicated openai within Azure. For all these reasons we would like to be able to list models across multiple providers and switch between then when doing retry-with...

View on GitHub

Currently, ChatCraft allows users to switch between two providers, OpenAI and OpenRouter, however it only stores the API key of one provider. That means when we switch to a different provider, the old key is cleared from storage. We want to allow for the storage of multiple providers.

I started working on my issue by analyzing the code and thinking about how I would implement this. I came up with multiple ways this could be implemented, and discussed it with the team during our weekly triage meeting. My main question was should I just add another field in localStorage to store the second api provider info, or use an array or something similar to store them in case we have more than two providers in the future.

Following the meeting, I was able to quickly write some code to store the data in an array in localStorage and I commented in the issue with more details of my proposed implementation, as well as some questions I had.

The ChatCraft admins were quick to respond to me. Dave gave me detailed specs and Taras added that it would be better to use an associated array rather than a list.

With this information in hand, I reworked my code and created a Draft PR with my current progress. I listed what has been implemented thus far and what has yet to be done. Very optimistic about completing this issue next week!

File: src/lib/settings.ts
Creating an associative array settings.providers:

File: src/components/PreferencesModal.tsx
Editing the onChange event handler of the api key field in Settings to store the provider info in settings.providers:

Testing:

Code Reviews

I did a couple code reviews of my fellow teammates!

See my review of PR 300, which was a UI change by Amnish to have the sidebar overlap the main app instead of displacing it to the right.

See my review of Mingming's PR 286, which was allowing ChatCraft to parse images and answer questions based on those images! Very cool :)

In my reviews I mainly focused on testing the features that should be implemented. I also gave my thoughts on any behaviours that potentially may negatively impact users.

Using ChatCraft for Coding

While coding, I used ChatCraft to help me and found it was faster than using google when I needed to describe a very specific thing I was trying to code. It was also useful in suggesting potential reasons why I was getting syntax errors in VS Code.

Example:

DEV Community: Katie Liu

ChatCraft week 14: Releasing v2.0!

Meeting with Taras

Coding

Sheriff

ChatCraft week 13: Fixing bugs

Bug 1

Bug 2

Bug 3

Bug 4

PR

Reviews

ChatCraft week 12: PR merged and follow ups!

Landed PR

Implemented functionalities:

Add Provider button:

Other buttons/fields:

Code changes (only summary of important points):

Bug fixes

Follow up issues

Code Reviews

Changes Made:

How to test:

Description

ChatCraft week 11: Add support for custom providers!

Before

After

Adding a custom provider

Hotfixes

Code changes:

Part 1 - Changing settings.providers to use name as the key

Part 2 - Deserializing settings.providers in settings.ts

Part 3 - Removing unnecessary calls to getSettings() in useEffects to decrease how many times our deserializer runs

Reviews

ChatCraft week 10: useMemo and Chakra alert banner

Merged Pull Request

Code changes:

How to test:

Upcoming Issues

Other PRs in this week's release

ChatCraft week 9: Free Model Provider!

Coding

Code changes:

Potential future follow up items:

Running Ruby on ChatCraft

ChatCraft week 8: Successful refactoring PR!

Sheriff Duty

Largest Pull Request Yet

Code Changes after Review

My Reviews on Team's PR

More about Python WASI

ChatCraft week 7: New issue, new provider?

PR

Summary:

Code changes in this PR:

Code Changes after Review

What's Next

My Reviews on Team's PR

ChatCraft week 6: Refactoring code

Issue

PR

Summary:

Code changes in this PR:

Investigating an Upcoming Issue

Code reviews

PR 437 UI Fix for Mobile

PR 457 Twitter Card

Summary

Testing Requirements?

ChatCraft week 5: Storing multiple providers

Issue

PR

Reviews of my PR

My Reviews on Teammates' PRs

ChatCraft week 4: Release 1.1 PR

Coding

Issue & PR

Code Changes

Leaving Reviews

ChatCraft week 3: Coding and code reviews

Part 2 - Deserializing settings.providers in `settings.ts`

Part 3 - Removing unnecessary calls to `getSettings()` in useEffects to decrease how many times our deserializer runs