Refactor and Reboot: Time to Clear Backlog in Open Source
Tags: webdev, react, opensource, css
Published: 2024-02-10 22:10:42

Last week, I filed and fixed follow up issues for [Text to Speech](https://dev.to/amnish04/openai-has-text-to-speech-support-now-4mlp) feature I recently integrated with [ChatCraft](https://github.com/tarasglek/chatcraft.org).There are still many issues open related to Text to Speech that I need to address.

But this week, I decided to prioritize some smaller issues and pull requests I had under my name, as my backlog was growing out of control. In **this post**, I will discuss how I was able to get many of those issues closed, and review other Pull Requests, effectively contributing to ChatCraft's [Release 1.2](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.2.0) this week.

## Table of Contents
&nbsp;1. [Improving Mic UX](#improving-mic-ux)
&nbsp;2. [Helping with Image Styling](#helping-with-image-styling)
&nbsp;3. [Working on a Custom Command 💻](#working-on-a-custom-command)
&nbsp;4. [Refactoring the approach to determine TTS Support 🔧](#refactoring-the-approach-to-determine-tts-support)
&nbsp;5. [Sidebar Enhancement REBOOT](#sidebar-enhancement-reboot)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 5.1. [Challenges with Git](#challenges-with-git)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 5.2. [Sidebar Changes](#sidebar-changes)
&nbsp;6. [Reviewing Other PRs](#reviewing-other-prs)
&nbsp;7. [Release 1.2.0 🚀](#release-120)

## Improving Mic UX

I had a couple of ongoing PRs, but I chose to kick off the week with an easy one. I opened a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/369) last week to change the Audio Recording behaviour of ChatCraft to "Click to Start, Click to Stop" from "Drag and Hold" as it was pretty challenging to make drag behaviour work seamlessly on mobile.

Last week, I only changed it for smaller screens as I did not want to dump all the [work done](https://github.com/tarasglek/chatcraft.org/commit/44654f9738104e6388e3d8a1ea1889aaf7d389d4) by [David](https://github.com/humphd) to implement the drag behaviour.

However, everyone believed that click/touch was a better approach

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

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

I [made the change](https://github.com/tarasglek/chatcraft.org/pull/369/commits/b4076510a6d43d4bf512beaa8c3c2506f0a82fd2) for all screen sizes. This was pretty easy as all I had to do was **REMOVE** drag code, and add **SIMPLE** click handler for recording toggle.

![Remove Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p25zunbtsp05lz5fuakv.png)

This was merged as it was good enough for the PR, but I got the following recommendation for further improvement:

1. [Better status indicators for users](https://github.com/tarasglek/chatcraft.org/pull/369#pullrequestreview-1863817353)
2. [Animation of mic button when recording](https://github.com/tarasglek/chatcraft.org/pull/369#issuecomment-1928960237)

So I opened a [follow up issue](https://github.com/tarasglek/chatcraft.org/issues/413) for that,

![follow up issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yooq81z34am0ly9m090m.png)

and started looking for the next thing to work on.

## Helping with Image Styling

During this week's [Triage](https://www.chromium.org/for-testers/bug-reporting-guidelines/triage-best-practices/) meeting, we were discussing about a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/286) made by [Mingming](https://github.com/mingming-ma) that would allow ChatCraft to accept **images as input** and use OpenAI's [Vision](https://platform.openai.com/docs/guides/vision) model to generate responses based on that. This was a truly killer feature and the PR **had had** been in progress for about 4 months now. While almost ready to merge, there were some final **touch ups** left and one of those was that image previews were not centred in the chat and the width was fixed to 50%.

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

and in the **Modal Preview**, it was overlapping with the **close button**.

![Old Image Modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdjcwx6ak333136m1oqs.png)

Everyone decided to fix that in a follow up issue. But I thought that could be a **quick fix**, so immediately started working on that. 

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv4fw21vghcpk1dkgy44.png" alt="A memento for Call of Duty fans">
  <figcaption>For Call of Duty fans 😉</figcaption>
</figure>

By the end of the meeting, I was able to come up with some style changes and opened a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/419) to be merged in to [Mingming's branch](https://github.com/tarasglek/chatcraft.org/tree/issue-285).

Now the images looked like this:

**In the Chat:**
![New Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utknsra9aju9qjf6dzr5.png)

**In Modal Preview:**

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sugs0dld128p4xke5bqc.png" alt="Modal preview">
  <figcaption>No more overlap with close button</figcaption>
</figure>

[Katie](https://github.com/kliu57) asked me to make a [minor change](https://github.com/tarasglek/chatcraft.org/pull/419#pullrequestreview-1868664848) which I did shortly.

And since everyone was happy with the fix,

![everyone was happy with the fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjk02osymc6vj0r15wrd.png)

it was merged shortly after, closing the corresponding [follow up issue](https://github.com/tarasglek/chatcraft.org/issues/418).

![shortly merged](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijvx5w62chcqztic1qwr.png)

## Working on a Custom Command 💻

ChatCraft has some in-built commands to quickly execute certain operation like opening a new chat, deleting existing etc. without the need to even touch your 🖱️
A few weeks ago, I opened an [issue](https://github.com/tarasglek/chatcraft.org/issues/356) to show a list of commands when someone entered an invalid command, i.e., not in ChatCraft Command Registry.

I opened the [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/396) last week, and it had been in review since.

[Roy](https://github.com/rjwignar) did an initial review and was curious why we need error handling in the following code since we know that `/commands` should run without any problems.

```ts
// We are sure that this won't return null
// since prompt is definitely a command
const { command } = ChatCraftCommand.parseCommand(prompt)!;
const commandFunction = ChatCraftCommandRegistry.getCommand(`/commands ${command}`)!;
setShouldAutoScroll(true);
try {
  await commandFunction(chat, user);
  forceScroll();
} catch (err: any) {
  error({
    title: `Error Running Command`,
    message: `There was an error running the command: ${err.message}.`,
  });
}
```

which [Professor](https://github.com/humphd) clarified. He also [helped me notice](https://github.com/tarasglek/chatcraft.org/pull/396#discussion_r1475423167) that I forgot to add the new command to the text for `general help` text.

![Roy Help](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bwebg6txmzucbnvxa8e.png)

Mingming later [suggested](https://github.com/tarasglek/chatcraft.org/pull/396#discussion_r1476806976) we should have a **Single Source of Truth** for the commands help text so we don't have to change it twice.

![Mingming help](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pgxsi01qte683gxvqp6.png)

which I fixed in [this commit](https://github.com/tarasglek/chatcraft.org/pull/396/commits/84273dc1c06df6ac733f3607d9ee97c1528a778d).

There were some [more discussions](https://github.com/tarasglek/chatcraft.org/pull/396#discussion_r1475470280) after which we decided to also show the command which failed in a **toast message**, so the user knows if they typed something wrong.

![Toast Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59k7e67wz478jfr1tqmj.png)

But [Taras](https://github.com/tarasglek) thought that it the unrecognized command should show up in inline with the list of commands instead of toasting.

Now as simple as it seems, it **WASN'T**. I had to understand the complicated system of how commands were accepting and using arguments to get this done. But finally I succeeded and this was [the result](https://github.com/tarasglek/chatcraft.org/pull/396#issuecomment-1931321259).

![the result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asaz1xig019sje7mjs4p.png)

Passing arguments to this command would allow us to add a feature later on to query a specific command like so

```
/commands some-command
```

But for now, everyone seemed to like it and hence, this was also **merged**.

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

## Refactoring the approach to determine TTS Support 🔧

As a follow up for [Add TTS Support](https://github.com/tarasglek/chatcraft.org/pull/357) issue, I was supposed to modify my approach for determining if TTS was supported by the user's AI provider.

Originally, I was checking if the user had chosen OpenAI as their provider, but this wasn't a good approach as in the future even OpenRouter could allow using the TTS mode.

So the approach suggested by [Taras](https://github.com/tarasglek/chatcraft.org/pull/357#issuecomment-1905443626) was that I should rather check if the list of current models included the model I was using for audio streaming.

I spent a while in addressing this issue and opened a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/420).

This was also a long conversation and if you're interested in code changes, you can follow this link.

https://github.com/tarasglek/chatcraft.org/pull/420/files

I was able to get it merged yesterday.

## Sidebar Enhancement REBOOT

I had a [Pull Request](https://github.com/tarasglek/chatcraft.org/pull/300) regarding **Sidebar enhancement** opened since November, but the requirements kept changing and it became really hard to continue working on the same branch when it was decided to drop a lot of things.

### Challenges with Git

I initially tried to continue in the same PR, by following this plan.

1. Branch off of main
2. Work now new changes
3. Rebase on the original sidebar branch and fast-forward merge into it.

But the problem at hand was that my original sidebar branch was in my [downstream](https://stackoverflow.com/questions/2739376/definition-of-downstream-and-upstream) fork, while my new branch was in the original repository. And I wasn't sure if I could merge into a downstream repo branch from an upstream repo branch.

One approach I could use would be:

1. Make sure both sidebar branches (downstream and upstream) are rebased on upstream main.
2. Create a new branch in downstream based on the sidebar branch in upstream.
3. Fast-forward the new downstream branch into the downstream sidebar branch.
4. Push new commits to downstream Gitub repo

And this should have done it. But I thought **NAHH**, its easier to create a new PR from the branch in upstream as this would be cleaner and we could also benefit from [Cloudfare Previews](https://www.cloudflare.com/en-ca/lp/ppc/cdn-x/?utm_source=google&utm_medium=cpc&utm_campaign=ao-fy-acq-namer_en_na-umbrella-ge-ge-prospecting-sch_g_brand_alpha&utm_content=Alpha_Brand_Applications_CDN&utm_term=cloudflare+cdn&campaignid=71700000110566648&adgroupid=58700008395369359&creativeid=669237101722&&_bt=669237101722&_bk=cloudflare%20cdn&_bm=b&_bn=g&_bg=152212902427&_placement=&_target=&_loc=9000845&_dv=c&awsearchcpc=1&gad_source=1&gclid=CjwKCAiA2pyuBhBKEiwApLaIO4KXE7bhAlO2iH6q0d6GjqKkLaFswa8teeG6DecuDpyNIdIXqNRI7BoCLYQQAvD_BwE&gclsrc=aw.ds) in reviews.

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

### Sidebar Changes

But anyways, lets take a quick look at the changes I made.

![PR Reboot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lo22i9amehhpyfvm80q.png)

1. The overlay effect is only applied to mobile devices now, and [Chakra Drawer](https://chakra-ui.com/docs/components/drawer/usage) is being used for that purpose.
2. The search field has also been moved to the sidebar on mobile devices due to the lack of real estate in the header.
3. The behaviour on desktop remains the same, except a few animations have been added to make the push content effect smoother.
4. It has also been ensured that there is no redundant animation on page reloads, as it was one of the problems in the last PR.
5. The [Pin Sidebar feature](https://github.com/tarasglek/chatcraft.org/pull/300/commits/3348d079742d46c144238d931967c1ca2fdbd82c) has also been removed.

Here's a Demo 🎬

**On Desktop:**

The gif was too large so couln't attach
[Link](https://private-user-images.githubusercontent.com/78865303/303812283-dfaa70e8-dbbe-4ce1-8035-e77b75937b85.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDc2MDExNDYsIm5iZiI6MTcwNzYwMDg0NiwicGF0aCI6Ii83ODg2NTMwMy8zMDM4MTIyODMtZGZhYTcwZTgtZGJiZS00Y2UxLTgwMzUtZTc3Yjc1OTM3Yjg1LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMjEwVDIxMzQwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE1NjA0NzE3MjU2MWE5N2ViZTMwZGM3ZmMzNWQzMDUwNTBmMzAzNWI3MmExODRhYWU5NDQ5NTJiOWUxNzY2NjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.B72R8IFkHHdKnqmSCy4gyb325tSUmZ4I7hSIzwpyZso)


**On Mobile:**

![On Mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmaylzq5725xl6enlg4f.gif)

I would suggest looking at the PR directly.
https://github.com/tarasglek/chatcraft.org/pull/437

## Reviewing Other PRs

These were all my direct contributions to this week's release, but 
I also reviewed Pull Requests made by others.

The first one was by Professor, to [allow image downloads](https://github.com/tarasglek/chatcraft.org/pull/402) of messages.

![Image Downloads](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70yv851ng8ub74b1wqu5.png)

The second was by [Katie](https://github.com/kliu57), that would allow users to [store multiple providers](https://github.com/tarasglek/chatcraft.org/pull/421) at once.

![store multiple providers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de81pmqdph0w02d9ec2r.png)

## Release 1.2.0 🚀

This sure was a **pretty** busy week. I got **4** pull requests **merged**, [1 Reboot](https://github.com/tarasglek/chatcraft.org/pull/437), and **2 Reviews**.

Everyone worked pretty hard, and with all contributions, we were able to successfully release [ChatCraft v1.2.0](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.2.0) this week.

![ChatCraft v1.2.0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3jt8a6wlss0xmo7as5n.png)

Cheers, and looking forward to 1.3 next week 💪