Taking an Open Source Project to Release 1.1 🚀
Tags: webdev, react, openai, opensource
Published: 2024-02-03 22:59:25

In my [last post](https://dev.to/amnish04/openai-has-text-to-speech-support-now-4mlp), I discussed how I integrated **Text to Speech** support into [ChatCraft](https://chatcraft.org/) using **OpenAI's** [TTS API](https://platform.openai.com/docs/guides/text-to-speech).

In this post, I'll share my progress on that [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/357) and other contributions I made as a part of releasing [v1.1](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.1.0) of the project.

![1.1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk8atag8ppatsc0sp3oo.png)

## Table of Contents
&nbsp;1. [Text to Speech Support](#text-to-speech-support)
&nbsp;2. [Filing and fixing follow ups](#filing-and-fixing-follow-ups)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.1. [Using Better icons for TTS button](#using-better-icons-for-tts-button)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.2. [Fixing TTS toggle behaviour](#fixing-tts-toggle-behaviour)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.3. [TTS should abort when switched off](#tts-should-abort-when-switched-off)
&nbsp;3. [Helping with migrating the Menu Component](#helping-with-migrating-the-menu-component)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3.1. [Suggesting changes on GitHub](#suggesting-changes-on-github)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3.2. [Pushing Fixes](#pushing-fixes)
&nbsp;4. [Reviewing a Pull Request](#reviewing-a-pull-request)
&nbsp;5. [Release v1.1 🚀](#release-v11)

## Text to Speech Support

Before talking about other contributions, I was able to get an initial version of text to speech [landed](https://github.com/tarasglek/chatcraft.org/pull/357) successfully after a few discussions and changes.

My professor was a little confused why I was managing **Promises** of **audio urls** instead of directly storing url strings in my audio queue. I tried to explain it with the help of an example.

Here's the link if you're interested:
https://github.com/tarasglek/chatcraft.org/pull/357#discussion_r1473470003

![Explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dgiix1p04hh6duuzi2i.png)

![PR Merged](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmec223hzx5ahtm6mse3.png)

I embedded a [video demo](https://www.youtube.com/watch?v=cj0ZnChDIQE) in my [last post](https://dev.to/amnish04/openai-has-text-to-speech-support-now-4mlp), and you can try it yourself by visiting [ChatCraft](https://chatcraft.org/).

It was **not perfect** by any chance, and so I had to open a couple of **follow up issues** aimed to fix the technical shortcomings.

1. https://github.com/tarasglek/chatcraft.org/issues/386
2. https://github.com/tarasglek/chatcraft.org/issues/387

As soon as it was merged, I started receiving more [feedback](https://github.com/tarasglek/chatcraft.org/pull/393#pullrequestreview-1855157158) that I couldn't even get in original reviews because now people were forced to use it 😉.

![Feedback](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf5bwdv2oso6fqmansyt.png)

And so, it was time to file **even more** follow ups aimed to address the issues [brought up](https://github.com/tarasglek/chatcraft.org/pull/357#discussion_r1473577322) by Taras.

## Filing and fixing follow ups

Various issues were encountered after my PR was merged.

###  Using Better icons for TTS button

The [first one](https://github.com/tarasglek/chatcraft.org/pull/357#discussion_r1473577322) was that the icons I used for TTS enable/disable button didn't do a good job at indicating the state of the feature.

I quickly opened [an issue](https://github.com/tarasglek/chatcraft.org/issues/392) for that

![Button Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34rk9og9duxudavrotn3.png)

and replaced the icons with [Material Design variants](https://react-icons.github.io/react-icons/icons/md/) as suggested.

![New Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s7g2np35lfddpyeam2v.png)

After a quick review, the [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/393) was merged.

![Quick Review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avr355ywm0h86zefk6f1.png)

Time to look at the other issues!

### Fixing TTS toggle behaviour

The [next thing](https://github.com/tarasglek/chatcraft.org/pull/357#issuecomment-1920127073) on the list was a little annoying for the users.

![TTS complaint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yrrizmsf7tq5gdbu0r0.png)

You read that **RIGHT**! For some reason, the text to speech functionality was **always enabled** no matter if the state of the toggle button.

Another follow up [issue](https://github.com/tarasglek/chatcraft.org/issues/389) had to be opened.

![Button Toggle Bug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk0xqmw5oi7ke92gqx34.png)

The problem was that I wasn't checking for the TTS setting in the else if branch in the following code:

```ts
if (isTtsSupported() && getSettings().announceMessages) {
  if (
    sentenceEndRegex.test(ttsWordsBuffer) // Has full sentence
  ) {
    // Reset lastIndex before calling exec
    sentenceEndRegex.lastIndex = 0;
    const sentenceEndIndex = sentenceEndRegex.exec(ttsWordsBuffer)!.index;

    // Pass the sentence to tts api for processing
    const textToBeProcessed = ttsWordsBuffer.slice(0, sentenceEndIndex + 1);
    const audioClipUri = textToSpeech(textToBeProcessed);
    addToAudioQueue(audioClipUri);

    // Update the tts Cursor
    ttsCursor += sentenceEndIndex + 1;
  } else if (ttsWordsBuffer.split(" ").length >= TTS_BUFFER_THRESHOLD) {
    // Flush the entire buffer into tts api
    const audioClipUri = textToSpeech(ttsWordsBuffer);
    addToAudioQueue(audioClipUri);

    ttsCursor += ttsWordsBuffer.length;
  }
}
```

I quickly opened a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/390) for the fix.

![Hotfix PR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihohm4yvro2ztad642ee.png)

and felt the need for adding a `hotfix` label to the repo

![hotfix label](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5sg1bf4v1cunry9e886.png)


as this sure was one.

![hotfix label discussion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eri73ock1h5b71eb56pn.png)

### TTS should abort when switched off

The [third problem](https://github.com/tarasglek/chatcraft.org/pull/357#issuecomment-1920127560) was that the TTS announcement always kept playing, even when the feature was turned off using the toggle button.

![Third problem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49pi60slk1vab55q1zt9.png)

I filed an [issue](https://github.com/tarasglek/chatcraft.org/issues/391) for that

![tts abort issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g748vlil4hmvepsqb255.png)

but still need to work on it.

Here's the state of **follow ups** so far.

![State of follow ups 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hh2xtt6rfxaljnfwu30.png)

![State of follow ups 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35v4vvbr5z0yhipz2xzn.png)

## Helping with migrating the Menu Component

The next big thing I worked on this week was helping [Rachit](https://github.com/Rachit1313) with the creation of a new Menu Component for the application using the [react-menu](https://szhsin.github.io/react-menu/) package.

Here's some [context](https://github.com/tarasglek/chatcraft.org/issues/359) for you guys.

![Context for React Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/764exbberammjiyswyi1.png)

Rachit was able to get the **functionality** working for our **component wrapper**, but [needed some help](https://github.com/tarasglek/chatcraft.org/pull/374#issuecomment-1917737299) with the styling part.

Since I was asked for help,

![Need Help](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1qa5pfmt51j8fbrquls.png)

I had to **get into action**.

### Suggesting changes on GitHub

The first step was to review behaviour and suggest any initial changes that came to my mind.

I quickly noticed a [weird behaviour](https://github.com/tarasglek/chatcraft.org/pull/374#issuecomment-1918133731) that did not exist before

![weird behaviour](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3lbsecgtq72mrpcxuhl.gif)

I posted a [suggestion](https://github.com/tarasglek/chatcraft.org/pull/374#discussion_r1472150023) on GitHub that could be [directly committed](https://haacked.com/archive/2019/06/03/suggested-changes/) to fix that issue.

**Fixed Behaviour:**

![Fixed Behaviour](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/louypc9dx2nz8f0acaqb.gif)

We continued with this [GitHub Suggestions](https://haacked.com/archive/2019/06/03/suggested-changes/) for a while

![GitHub Suggestions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1px4q18st3nbxgqryyn.gif)

### Pushing Fixes

**Until** [professor](https://github.com/humphd) suggested us [another approach](https://github.com/tarasglek/chatcraft.org/pull/374#issuecomment-1918203141) of collaboration.

![another approach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqojtd9bi8shft1duao0.png)

This was exactly what I wanted to do, and now that I knew it was acceptable, I asked Rachit if could push directly to his branch. And **pushed the fixes** for anything I could think of.

![pushed the fixes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us6jjgl2fz5ji4t1nbnq.png)

For full details, please follow the [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/374) directly. This was the **biggest conversation** I ever I had in a PR.

![biggest conversation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgs4ccdushxfkn6gtt3x.png)

## Reviewing a Pull Request

Last but not least, I reviewed a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/371) [Katie](https://github.com/kliu57) was working on, that would allow users to store [metaData](https://www.techtarget.com/whatis/definition/metadata) for multiple AI providers at once.

I made a simple suggestion on this one to create a `url` to `provider name` **mapping** instead of manually determining provider name with a **switch** statement.

This suggestion was [accepted](https://github.com/tarasglek/chatcraft.org/pull/371#issuecomment-1920368076)

![suggestion was accepted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6caxjsj9s0j42jdqvkyv.png)

And after reviews from [professor](https://github.com/humphd), this PR was also merged 🎊

![this PR was also merged](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl61nc0v7vb86pnu6hou.png)

## Release v1.1 🚀

All this work, was just a part of **my** contributions for [Release 1.1](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.1.0) that happened yesterday.

We have made significant progress if count changes made by all others

![significant progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8qxnw6v2ddm59kdmm4n.png)

and here's one for the new contributors 🍾🥂

![one to the new contributors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo5tpj58njvjxskb3cqy.png)