Links

Repo That I worked on

Issues

1. https://github.com/tarasglek/chatcraft.org/issues/704
2. https://github.com/tarasglek/chatcraft.org/issues/613
3. https://github.com/tarasglek/chatcraft.org/issues/731

Pull Requests

1. https://github.com/tarasglek/chatcraft.org/pull/712
2. https://github.com/tarasglek/chatcraft.org/pull/714
3. https://github.com/tarasglek/chatcraft.org/pull/732

Description

This post is about a Project-release 0.3 for OSD600 course at Seneca College. For release 0.3, students were required to contribute to Open Source Project. This time, we were asked to contribute to a larger project, compared to what we worked on for Hacktoberfast, and make larger contributions.

Progress

For release 0.3, I decided to work on the project that I worked on for my last commit during Hacktoberfast. Instead of finding a new repository, I wanted to work on a project that I already have some knowledge. I thought that this would be more helpful for understanding a larger Project and how larger projects are structured and what tech stacks they use and how they work. And more importantly, I really like Chatcraft. I am very interested in React and Typescript, which are used in the project. So I continued working on this project.

Issue 1

I looked at the issues on the repository and found this issue. The issue was that for some of the llm models, it didn't provide proper icon.

How I fixed

First, I had to figure out what the cause of this problem. My gut feeling told me that there must be some part where it handles the logic for which icon they should use. I started to find the part using git grep by searching keywords such as icon, model, and avatar. Then, I found where this logic is implemented. The problem is that when it decides the icon, it checks the name of the model. However, some of the model names include uppercases, but the logic didn't check the uppercase, so I made it case-sensitive.

Issue 2

Since I worked on UI-related issues for the last couple contributions, I was getting more confedient with that, and I found another issue that's related to UI, which is about an unnecessary overflow in PreferencesModal.

How I fixed

It was much quicker to find where the problem is occuring as I have already made two contributions. However, fixing the problem wasn't that easy. I knew that I needed to fix css but didn't know how. The approach that I adopted was trial and error. I tried all the solutions that I could come up with. For example, I tried adding some padding, margin, height, or width, and changed some css attributes such as display or overflow-x. Finally, I figured out one of the flex boxes need weight specified so that it doesn't overflow its parent.

Issue 3

While I was working on the previous issues. I found out that there were some bugs when I opened PreferencesModal. For iPhone, when you touch input element in PrefeencesModal, it automatically zooms-in(Android phone doesn't automatically zoom-in). However, for some reason, you cannot zoom-out to normal size(zoom-in and zoom-out is prevented in any environment, whether it's mobile or ios or desktop). This was actually bothering me a lot while I was playing with Chatcraft and when I was testing the app. Therefore, I opened an issue for this.

How I fixed

Now it didn't take that long time to figure out where the code for this UI element is located since I've been working on this project for two weeks. Although I knew which page is responsible for this, but I wasn't sure about which element I should fix. Nonetheless, I felt that it must be Modal component, and I tried to look at it. However, I wasn't very confident with Chakra-UI, and some components of Chakra-UI looked deprecated. There was no offical docs for some components such as Modal. Since there was no official docs and also ChatGPT didn't know well about Chakra-UI, I was frustrated a bit. Actually ChatGPT is so bad at Chakra-UI. I just started to follow the code and go deeper into the code. I did ctrl + click on Modal component in VS Code, and it opened the library code for that. I did ctrl + click on everywhere inside the library code, and finally found the prop interfaces that show what options you can send as a prop to the Modal component. Some of them was about scroll-block and zoom. I tried those options, and it worked exactly the way I want.

Reflection

I am getting more confident with this project and more interested and fascinated by it. Now it takes less time to figure out problems and fixs it. I personally prefer to work on one project longer and deeper (vs. working on many different projects). I think there are pros and cons, but for now I think I need to stick to one project and go deeper so that I can get an understanding of a whole project.
And also, I am overcoming the fear for a larger project. Chatcraft is not a huge project, but for me it is large enough, considering my programming skill level. I feel that I am growing and improving, which makes me really happy.