Getting an Open Source Project ON Track for Release
Tags: webdev, opensource, react, nlp
Published: 2024-03-09 22:52:54

Over the past couple of months, we have [released](https://github.com/tarasglek/chatcraft.org/releases) 4 minor versions of [ChatCraft](https://github.com/tarasglek/chatcraft.org), 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
&nbsp;1. [Refactoring sentence parsing using an NLP library](#refactoring-sentence-parsing-using-an-nlp-library)
&nbsp;2. [Fixing an annoying UI bug 🐞](#fixing-an-annoying-ui-bug)
&nbsp;3. [Reviewing a PR aimed at Refactoring Providers](#reviewing-a-pr-aimed-at-refactoring-providers)
&nbsp;4. [Release v1.4.0](#release-v140)

## Refactoring sentence parsing using an NLP library

A few weeks ago, I [implemented](https://github.com/tarasglek/chatcraft.org/pull/357) **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](https://github.com/tarasglek/chatcraft.org/issues/386) required me to refactor the manual [sentence parsing algorithm](https://github.com/tarasglek/chatcraft.org/pull/357#issuecomment-1913048396) I implemented with the help of a [Natural Language Processing](https://www.ibm.com/topics/natural-language-processing) library called [compromise](https://github.com/spencermountain/compromise).

![Compromise Library](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiyx2cu6u1non5d9yij6.png)

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](https://en.wikipedia.org/wiki/Declarative_programming).

```ts
// 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](https://github.com/tarasglek/chatcraft.org/pull/486)

![NLP PR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pvaz93ktics5lqerhjs.png)

## Fixing an annoying UI bug 🐞

A few weeks ago, [we replaced](https://github.com/tarasglek/chatcraft.org/pull/374) the existing [Chakra Menus](https://chakra-ui.com/docs/components/menu) with the one provided by [szhsin/react-menu](https://szhsin.github.io/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](https://github.com/tarasglek/chatcraft.org/pull/374#issuecomment-1920344354) with the help of **GIFs**

![Autoscroll bug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiwycgyufhudtk9xofqm.png)

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](https://balsamiq.com/learn/ui-control-guidelines/scrollbars/#scrolling-in-a-dropdown) before making the decision.

For more details, visit this [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/487) that fixes the issue.

![UI bug PR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxc2e05d03o1x6m35l4t.png)

## 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.

![Reviewing Katie's PR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dgddd8dh5ki7lyx4z98.png)

[Katie](https://dev.to/katiel) has written about this [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/479) in [this post](https://dev.to/katiel/chatcraft-week-8-successful-refactoring-pr-h2d). 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](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.4.0) for ChatCraft.

![Release v1.4.0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3gep02cgey3gmf5dswv.png)

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](https://github.com/nalgeon/python-wasi) that leverages [web assembly](https://webassembly.org/) 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**!!!