Getting an Open Source Project ON Track for Release

Over the past couple of months, we have released 4 minor versions of ChatCraft, but this last release was a little different.

Due to unforeseen circumstances, the release v1.4.0 had to be delayed and this week, we tried to cover up for the loss of one week.

In this post, I'll discuss my contributions towards the latest release.

Table of Contents

 1. Refactoring sentence parsing using an NLP library
 2. Fixing an annoying UI bug 🐞
 3. Reviewing a PR aimed at Refactoring Providers
 4. Release v1.4.0

Refactoring sentence parsing using an NLP library

A few weeks ago, I implemented text-to-speech for ChatCraft and I have been writing about the related follow-ups in my past few posts.

One of the follow-ups required me to refactor the manual sentence parsing algorithm I implemented with the help of a Natural Language Processing library called compromise.

It was a good idea to use this library as it was already part of our project tree and provided a human-friendly API that is easy to understand thanks to its declarative nature.

// Set a maximum words in a sentence that we need to wait for.
// This reduces latency and number of TTS api calls
const TTS_BUFFER_THRESHOLD = 25;

// To calculate the current position in the AI generated text stream
let ttsCursor = 0;
let ttsWordsBuffer = "";

const chat = chatWithLLM(messages, {
  ...
  ...
  onPause() {
    setPaused(true);
  },
  onResume() {
    setPaused(false);
  },
  onData({ currentText }) {
    if (!pausedRef.current) {
      // Hook tts code here
      ttsWordsBuffer = currentText.slice(ttsCursor);

      const { sentences } = tokenize(ttsWordsBuffer);

      if (ttsSupported && getSettings().announceMessages) {
        if (
          sentences.length > 1 // Has one full sentence
        ) {
          // Pass the sentence to tts api for processing
          const textToBeProcessed = sentences[0];
          const audioClipUri = textToSpeech(textToBeProcessed);
          addToAudioQueue(audioClipUri);

          // Update the tts Cursor
          ttsCursor += sentences[0].length;
        } else if (nlp(ttsWordsBuffer).terms().out("array").length >= TTS_BUFFER_THRESHOLD) {
          // Try to break the large sentence into clauses
          const clauseToProcess = nlp(ttsWordsBuffer).clauses().out("array")[0];
          const audioClipUri = textToSpeech(clauseToProcess);
          addToAudioQueue(audioClipUri);

          ttsCursor += clauseToProcess.length;
        }
      }

      setStreamingMessage(
        new ChatCraftAiMessage({
          ...
          ...
        })
      );
      incrementScrollProgress();
    }
  },
});

There was no change in behaviour, but it helped make the code easy to maintain. For more details, check out this Pull Request

Fixing an annoying UI bug 🐞

A few weeks ago, we replaced the existing Chakra Menus with the one provided by szhsin/react-menu library.

While we were able to successfully create a wrapper that very closely mimicked the previous menus, it introduced a pretty annoying auto-scroll bug, as demonstrated in this issue with the help of GIFs

This is what I found with my research:

1. The scrollbar issue was happening as the menu was positioned in a manner that made if overflow horizontal in its parent container. To fix that I have used the align property to make sure it stays inside the container's available space.
2. The auto-scroll issue was occurring when the list of options in the submenu was pretty long and the first list element tried to gain focus automatically. I have capped the max-height of submenus and added vertical scrollbars if the list grows beyond that limit. I made sure that it aligns with recommended UX guidelines before making the decision.

For more details, visit this Pull Request that fixes the issue.

Reviewing a PR aimed at Refactoring Providers

Alright, this week's been full of refactoring. I guess we do have to stop and pay our technical debts at some point :D

The work on this PR has been going on for 2 weeks, and I have been reviewing it as more changes come in.

Katie has written about this Pull Request in this post. Feel free to check out for more details.

Release v1.4.0

Finally, even after a week of delay, we were able to release v.1.4.0 for ChatCraft.

Although I was mostly focused on refactoring and follow-ups, this release added pretty cool features to the app, like support for running python in the browser with the help of a library called python-wasi that leverages web assembly to make it happen.

I have been planning to work on a cool feature for next week. Will write about it when it's done.

In the meantime, STAY TUNED!!!