DEV Community: Rachit Chawla

ChatCraft v2.0.0

Rachit Chawla — Sat, 20 Apr 2024 15:06:49 +0000

Finally, Its the last week of semester and we had our last class of Open Source Development Project with David Humphrey. I would like to thank David for being my professor and mentor. I've taken 30 courses in Seneca and I would like to say that the three courses by David Humphrey were the one in which I learnt the most, i.e two open source courses which enhanced my github profile, gained confidence in git skills. Also before the courses ,I always wanted to contribute in Open Source but had no idea where to start from. I would also like to thank Taras Glek for giving me an opportunity to work on ChatCraft.org. Working on ChatCraft has been the biggest project I've ever worked on till date.

This week contributions

PR 600

This PR was a small one but It became very difficult for me as I got stuck with focus stuff on it.

The goal of this PR was to have a search bar to search between models and have pointer to currently selected model. It was glad to see that everyone wanted this PR to be merged as this was very benificial for selecting models in providers such as OpenRouter which have many models to select from.

The changes look like:

The hurdle in merging this PR:

The major issue this PR had was Input bar going out of focus when the menu was rendered again based on the query entered in the search bar. Resizing of the menu changed our mouse cursor to somewhere else, on another MenuItem which caused focus to go away from input. This was the default behavior of how ChakraUI/ ChakraMenu behaves so we coudn't modify it. After trying many options possible and still not able to get that. At the end David helped us to solve this by setting input to focus again on keyDown event.

Review 597

Apart from merging the PR above, i also reviewed another PR of my classmate Katie which was based on an issue suggested by me while reviewing one of her previous PRs.

After testing the functionality and looking at the code structure, I approved the PR so that she could merge it.

Overall Contributions to ChatCraft over the past 3 months

At first when I was first told that I'll be working on ChatCraft, I was scared thinking that how would I understand a codebase of such a big project.
Till date, I merged 11 PRs with addition of over 650 lines of code which is pretty good for someone who just started with this.

I ended this course with building many cool features for ChatCraft including share message functionality, made it easier to switch between providers, fixed some bugs, search bar for models and many more.

Release v1.9.0 - ChatCraft.org

Rachit Chawla — Wed, 17 Apr 2024 20:36:11 +0000

Sheriff duties this week

This week being the sheriff, I had several duties including conduct triage meeting, actively respond to any mentions in PRs or ChatCraft's discord server in order to get all the PRs in the milestone merged before the release time.

In order to achieve the above, I accomplished the below in this week:

PR 580

The PR_580 is fixing an issue related to import command with trailing backslash for github blob URLS. So this is not a chatcraft related issue but this a URL behavior issue.

The issue was that when users tried to run /import command with a github blob Url with trailing backslash:

/import https://github.com/tarasglek/chatcraft.org/blob/main/.eslintignore/

This would return us 400 error whereas if same was passed without / at the end

/import https://github.com/tarasglek/chatcraft.org/blob/main/.eslintignore

It would return us the expected output i.e contents of the file.

Later while debugging, I found that if github blob urls dont support trailing backslash, If there's a trailing backslash it returns bad request.

I fixed the issue by adding a replace function with regex to remove / if its at the end.

PR Reviews

This week I reviewed 3 other Pull requests for ChatCraft.

Final Release

The Final and most exciting part for the week was releasing v1.9.0. After merging all the approved PRs and closing the milestone. I went forward and release v1.9.0 with Release notes for the merged PRs between v1.8.0 and now.

Link to the Release: v1.9.0

Next week, Its a Major release for ChatCraft v2.0.0. Working towards making some meaningful contributions for that.

Happy Coding!

Release 1.8 Contributions : ChatCraft.org🤖

Rachit Chawla — Mon, 08 Apr 2024 19:10:45 +0000

Pull Request #559

Updated regex to ignore backslash #559

Rachit1313 posted on Apr 04, 2024

Closes #427

Changes Made:

Updated regex to ignore backslash in github commands.

How to test:

Both the links with backslash at the end or without would recieve diff when a link of github PR is imported using /import command.

View on GitHub

For this week, I worked on a smaller issue which came out be a small fix but also finding another issue for me solve. Previously our /import command was sensitive to trailing backslash which would result in not triggering out rewriters for github i.e

When we used to send chatcraft a link to pull request with trailing backslash, it would return us html for that page which was not our expected behaviour for importing PRs. Our expected behavior was that it should have similar response as on without backslash i.e importing the patch/diff . We had a rewriter setup which helped us to change our URLs from request to .patch URLs to return us the changes made in the PR.

I checked the regex and found that it was missing the required ?/ so I modified it with just 6 lines of code and got my work through.

In the testing for the above, I received feedback that a trailing backslash at the end of github blob URLs is returning another 400 server error. For the above I filed another issue to work on for the coming week.

Import command used on github blob URLs with a trailing backslash return 400 Bad request #568

Rachit1313 posted on Apr 05, 2024

Follow up issue from #559

View on GitHub

PR Reviews

For this week, I reviewed 2 PRs

Fixed logo of FreeModelProvider auto #558

kliu57 posted on Apr 04, 2024

This PR fixes a logo bug.

Bug: FreeModelProvider's model, "auto", shows white logo

Reason for bug: In ModelAvatar.tsx, I was setting all models with the word "free" in them with the default green bg colour, but this misses the model that is called "auto" which does not have the word free in it. The logo itself is white which means white on a white bg shows us a white logo.

Fix:

In ModelAvatar.tsx, add the check for the "auto" model and and give it the green bg.

Testing:

No longer showing the white logo.

View on GitHub

The above PR was a minor change which looked good to me and I approved it after testing. The PR was closed and the change was done in some other commit in a bigger PR.

swap default model to auto for free provider #545

tarasglek posted on Apr 02, 2024

@humphd or someone else, can you help me fix the blank circle?

View on GitHub

The above PR was by chatcraft's repo owner, Taras Glek, He by mistake pushed the automatic change done by vscode in settings.json which was something we didn't want in the repo.

That's all for this week!

Happy Coding!

Release 1.7 Contributions : ChatCraft.org🤖

Rachit Chawla — Tue, 02 Apr 2024 16:21:39 +0000

For this week I worked on improving the flow to switching providers for LLMs for chatcraft.org. For the above we already had issue filed which I assigned to myself and started working on:

Make it easier to switch between providers #510

humphd posted on Mar 17, 2024

Currently, we assume that the user only ever wants to use a single provider. For example, the "Ask" menu shows models for the current provider:

However, @kliu57 has been doing awesome work to add support for multiple providers. Now that we support 3 providers, and soon arbitrary providers (see #440), it would be interesting if the "Ask" menu allowed you to easily switch to another of your configured providers and use those models.

I wonder if this would be a good UX:

+--------------+
| model-1      |
| model-2      |
| ...          |
|--------------|
| ✔️ Provider 1 |
|   Provider 2 |
|   Provider 3 |
+--------------+
Ask

In the wireframe above, the models for the current provider (i.e., "Provider 1") are shown. In addition, the other providers are also available, and clicking on "Provider 2" or "Provider 3" would cause the list of models to change.

There might be a better UX for this, but that's one option.

View on GitHub

Pull Request 535

Previous Flow:

going back to the ask menu to choose model to work on.

New Flow:

The user can change the providers with a single click where selecting models and select the new model there itself based on the providers selected:

Code Changes:

To achieve the above I had to use settings.providers as in chatcraft, we store all the providers list and api keys in the browser's local storage. To use them we have another lib settings.ts created which helps us access the data from local storage. Apart from that, we're using currentProvider object in local storage to specify the selected provider which can be trigger using a function created :

setSettings(...settings,currentProvider: <provider>);

The above function is helping me retain all my previous settings, additionally changing the provider currently selected.

For better UI and differentiating between models and providers list, I used MenuGroup component which allowed me explicitly name the list headers to models and providers respectively. Thanks to Amnish for suggesting me this component.

After I was done with above research, I implemented the change and added MenuDivider second MenuList to support the implementation above.

Pull Request

Add the Providers selection Menu Group to easy switch between providers #535

Rachit1313 posted on Mar 27, 2024

Closes #510

Tasks Completed:

[x] Enable switching between providers from the ask menu for Desktop Prompt
[x] Enable switching between providers from the ask menu for Mobile Prompt
[x] Use MenuGroup from Chakra UI to group models and providers distinctly

Files Changed: PromptForm.tsx

Screenshots:

View on GitHub

Feedback

On the above, I received some feedback from my professor David Humphrey regarding the indentation which I fixing by adding a span with some custom css attributes to maintain padding and an extra space for chevron icon which was also suggested by him.
Another major feedback for this PR was to refactor the code for lesser lines of code and more efficiency. Thanks to Katie for the feedback as the code change made the code look a lot cleaner too as in the screenshot below:

That's all for this week.

Happy Coding

Release 1.6 Contributions: ChatCraft.org

Rachit Chawla — Tue, 26 Mar 2024 23:19:48 +0000

Issue #443

For this week, I worked on making some UI fixes to Menu Components I created before :

I was supposed to make the changes to my PR based on the issue #443.

Fix icons in new Menu #443

humphd posted on Feb 13, 2024

The way the icons are being done in the new Menu component isn't right. Here's how it looks in ChakraUI:

And in the new Menu:

Icons should be:

On the left
Same colour as the font for the menu item
Smaller
Not a button you click (the whole menu item should be clickable)

View on GitHub

The Fix - PR #516

The first thing I started in this PR to work on resolving the icons being separately clickable as buttons in MenuItem which didn't look appropriate. I changed all the IconButtons passed in the icon prop with icons from the react library instead.

Next Step for fixing the alignment and sizing, I modified the custom MenuItem component to be wrapped in divs with CSS properties hardcoded for proper alignment and switched the icons to be on the left of label with a padding.

These things properly helped me resolve the issue and reflected the appropriate changes required which led the Menu to look like:

The Final PR:

Fixed icons in the Menu #516

Rachit1313 posted on Mar 20, 2024

Closes #443

Based on the issue, Icons should be:

[x] On the left
[x] Same colour as the font for the menu item
[x] Smaller/ same size as the text
[x] Not a button you click (the whole menu item should be clickable)

Steps Taken to resolve:

Updated MessageBase component with icon prop to have icons and not IconButtons
Updated MenuItem component to be in a div aligned to centre and flex for proper alignment and sizing
Updated color of delete button icon to be similar to the ChakraUI red.400 text

Screenshots:

View on GitHub

Feedback from Peers

On the above PR, I received feedback from Amnish, another developer from ChatCraft and my classmate, to make some changes on it in order to make code resuable and for optimization i.e passing labels( text in MenuItems) as children. I appreciate his feedback and made the changes required, committed the changes to the branch. For the above I had to modify the format of all the MenuItem components used and luckily, for now they were all in a single file.

That's all for the week!

Happy Coding

Release 1.5 Contributions : ChatCraft.org

Rachit Chawla — Mon, 18 Mar 2024 04:47:42 +0000

Follow Up Issue - Issue #489

Based on a feedback on my previous PR #481, I received a feedback from my peers regarding the functionality to share a single message in addition to the previous feature to share a chat. The issue was shared chat when shared via Share message button , the shared message on shared chat had the time of when the chat was shared. For example, Lets suppose I share a message from 2 days ago, I would see the time on shared chat of today(when I shared the chat).

Follow Up Issue: Shared Chat (via message) must have the same time as in the original chat #489

Rachit1313 posted on Mar 08, 2024

Refer #481 for more details.

View on GitHub

Pull Request - PR #490

For the above issue, I did some research on ChatCraftChat component that how the messages and mainly the time is being rendered in it. Based on my logic for this functionality, I was using message id to select the message I wanted to share and clone the only message into the messages array which is being rendered in a chat.

I found that the clone function is creating a new object of the message which is storing the current time when object was created. I fixed the logic by just removing the clone and passing the original message object to the array for the chat.

Created the Pull Request Below

Shared Chat message should have same time as original chatcraft message #490

Rachit1313 posted on Mar 10, 2024

Closes #489

View on GitHub

Debugging a bug - Issue #480

Chatcraft crashes when trying to access shared chats #480

Rachit1313 posted on Feb 22, 2024

Console error:

{status: 404, statusText: 'Not Found', internal: true, data: 'Error: No route matches URL "/api/share/Rachit1313/juWInjaLnUTnbj9ApOdTe"', error: Error: No route matches URL "/api/share/Rachit1313/juWInjaLnUTnbj9ApOdTe"
    at Do (https://chatcr…}
    ```

View on GitHub

Apart from the contributions above, I started working with one of my peers to find the cause of the bug and fix it. I brought this up in triage meeting for ChatCraft with all the contributors including the professor and shared my screen. I learnt some of browser debugging approaches including debugger; . This bug was something which we could not figure out yet but the outcome we came to from that meeting was this is something wrong with routing probably because when we try to open the same URL in the browser we are getting redirected properly but when its trying to getting loaded in react-dom component i.e chatcraft's web app, Its not redirecting and hence failing to find the route returning a 404 NOT FOUND error.

That's all for this week.

Happy Coding

Release 1.4 Contributions : ChatCraft.org 🤖

Rachit Chawla — Sun, 10 Mar 2024 22:11:45 +0000

Release 1.4 Contributions

In the latest release 1.4 of ChatCraft, I had the opportunity to contribute significantly towards enhancing the user experience and functionality of our platform. One of the key features I worked on was the ability to share individual messages from a chat, a much-requested feature by our users. This feature allows for more granular sharing, providing users with the flexibility to share specific pieces of information without exposing entire chat histories.

Pull Request #481: Sharing Individual Messages

The journey to implementing this feature began with Pull Request #481, where I introduced the functionality to share a single message from a chat. The implementation involved creating a new function shareSingleMessage within the ChatCraftChat class. This function clones the chat but only includes the specified message to be shared, leveraging our existing sharing logic to generate a shareable URL.

To make this feature accessible from the UI, I modified the MessageBase.tsx component, adding a new menu item "Share Message". This addition required fetching the current user and chat context, for which I utilized the useUser hook and useLiveQuery to dynamically fetch the necessary data.

Upon merging this pull request, I received valuable feedback from my peers, leading to an enhancement where the shared URL link could be copied to the clipboard. This improvement was facilitated by the React copytoclipboard hook, streamlining the sharing process for our users.

Added functionality to share a message vs chat #481

Rachit1313 posted on Feb 22, 2024

Closes #388

View on GitHub

Issue #489: Date Mismatch in Shared Chats

Following the release, we identified a discrepancy in the dates displayed for shared chats. The shared chat showed the date when the message was shared, rather than when the original message was sent. This led to confusion among users, as the context of the shared message could be misunderstood. To address this, I filed a follow-up issue #489 to correct the date display, ensuring that the original message's sent date is accurately reflected in shared chats.

Follow Up Issue: Shared Chat (via message) must have the same time as in the original chat #489

Rachit1313 posted on Mar 08, 2024

Refer #481 for more details.

View on GitHub

Peer Review: Pull Request #483

In addition to my contributions, I also had the opportunity to review the work of my peers. One notable pull request I reviewed was #483, which introduced a loading spinner for image compression. This feature enhances the user experience by providing visual feedback during the image compression process, especially useful when uploading large images. I tested this feature using the branch deploy URL provided by the Cloudflare action, ensuring its functionality and integration within our platform.

Add loading indicator for the image compression #483

mingming-ma posted on Feb 23, 2024

Explanation

I set the imageUrl to empty string firstly inside the process image functions and then update it with real url result when compression is done. If it is empty, the spinner in a square box will be rendered as loading status.

Result

Desktop	Mobile

Fixes: #467

View on GitHub

The contributions and collaborative efforts in Release 1.4 have significantly improved ChatCraft, making it more user-friendly and functional. I am proud to be part of a team that values feedback and continuously strives to enhance our platform. Stay tuned for more updates, and as always, happy coding!

Continuing Contributions to ChatCraft.org

Rachit Chawla — Mon, 26 Feb 2024 13:28:21 +0000

Found a Bug - Filed an issue #480

This week while working on another feature, to share a message vs the whole chat which we have currently. I found a bug that chatcraft crashes with the error below when we try to access any of shared chats through the sidebar.

Upon checking the console logs I found that the error is similar to one of the bug previously encountered and filed the issue for the same.

Chatcraft crashes when trying to access shared chats #480

Rachit1313 posted on Feb 22, 2024

Console error:

{status: 404, statusText: 'Not Found', internal: true, data: 'Error: No route matches URL "/api/share/Rachit1313/juWInjaLnUTnbj9ApOdTe"', error: Error: No route matches URL "/api/share/Rachit1313/juWInjaLnUTnbj9ApOdTe"
    at Do (https://chatcr…}
    ```

View on GitHub

Pull Request #481

As advised above, I was working towards implementing another feature of sharing a message for which I had to understand the previous sharing logic. Once I understood, how the functionality of sharing the whole chat is working, I found that there was a function in ChatCraftChat which was calling the sharing lib and generating URL and stuff and it was sharing the chat as this object. Based on the structure of ChatCraftChat, It had an list of another object ChatCraftMessage from which I got the idea to use messageId to specify the chat i.e not including any other messages except the one I need in the chat.

I created this function:

 //function to share single message
  async shareSingleMessage(user: User, messageId: string) {
    // Find the message to be shared
    const messageToShare = this._messages.find((message) => message.id === messageId);
    if (!messageToShare) {
      throw new Error("Message not found");
    }

    // Clone the chat but only include the specified message
    const clonedChatWithSingleMessage = new ChatCraftChat({
      messages: [messageToShare.clone()],
      summary: this.summary, // You might want to adjust the summary for the shared content
    });

    // Use the existing sharing logic to share the cloned chat
    const shareUrl = createDataShareUrl(clonedChatWithSingleMessage, user);
    await createShare(clonedChatWithSingleMessage, user);

    const shared = new SharedChatCraftChat({
      id: clonedChatWithSingleMessage.id,
      url: shareUrl,
      date: clonedChatWithSingleMessage.date,
      summary: clonedChatWithSingleMessage.summary,
      chat: clonedChatWithSingleMessage,
    });

    // Cache this locally in your db as well
    await db.shared.add(shared.toDB());

    return shared;
  }

Then comes the next part - UI for sharing a single message. For that I had to edit MessageBase.tsx component which has the Menu for each message and I added another MenuItem named Share Message which on click called another function to handle sharing logic:

                <MenuDivider />
                <MenuItem
                  label="Share Message"
                  onClick={() => handleShareMessage()}
                  icon={
                    <IconButton
                      variant="ghost"
                      // icon={<YourShareIcon />} // Replace YourShareIcon with the actual icon you want to use for sharing
                      aria-label="Share message"
                      title="Share message"
                    />
                  }
                />

Based on the function, I created I had to call the function in the object of the current chat, id of the message and the user who's logged in. Now my component didn't have an object of the chat or user so I had to do some research and see how those things are working in other files and found that we have an hook created named useUser. I imported the hook into my MessageBase component and used it to get the user.

const { user } = useUser();

The second hurdle was to get the chat object for which I used useLiveQuery() and the find method of ChatCraftChat object to fetch the chat object as we already have the ChatId in the MessageBase component's props.

const chat = useLiveQuery(() => ChatCraftChat.find(chatId), [chatId]);

Finally, I created a pull request for the above and awaiting feedback from the team regarding the functionality and ideas to display the URL of the shared chat.

Added functionality to share a message vs chat #481

Rachit1313 posted on Feb 22, 2024

Closes #388

View on GitHub

Till the time. Stay Tuned.

Happy Coding

Release 1.3 Contributions: ChatCraft.org

Rachit Chawla — Sat, 17 Feb 2024 17:56:37 +0000

Continuing sheriff duties

Till Wednesday, I had to keep up my role of being a sheriff and actively monitoring PRs and issues, keeping a track of showstoppers, actively checking discord or GitHub mentions in case someone needs help. Overall, it was a great experience for being a sheriff. Got some feedback to work on for more actively checking for mentions.

Issue 388 - Allow sharing a Message vs. Chat

Started work on #388. Had to read the source code to find out the flow of the functions and how stuff is working for share chat function. Started looking from the UI file ChatHeader.tsx

Found that at the end its using useDisclosure() function to trigger ShareModal component accordingly.

Further, this ShareModal component was calling share function which was a method of ChatCraftChat model

Share function from ChatCraftChat model below was calling another createShare() function which was another lib created.

Found the logic for creating shared chat - share.ts

Till the time I got here, and understood the function, I got to know that there is another showstopper which would also be required to fix before I could work on sharing chat and actually test it. As I already had a look through the share logic I assigned the bug fix to myself and started working on it.

Issue 446 - ChatCraft 'crashes' when accessing Shared Chats or Searchbar

Had to stop working on the previous issue and start debugging for the bug fix #446 .
The steps I followed for debugging were:

Checking the console logs

After reviewing console logs at the time of bug I found the below

{
    "status": 404,
    "statusText": "Not Found",
    "internal": true,
    "data": "Error: No route matches URL \"/api/share/Rachit1313/<chatId>\"",
    "error": {}
}

whereas my professor confirmed that the chatId is correct and it exists in the R2 bucket.
Also, there was another error found while trying to access the shared chat through the link generated

{
    "_e": {},
    "name": "DataError",
    "message": "Failed to execute 'get' on 'IDBObjectStore': The parameter is not a valid key.\n DataError: Failed to execute 'get' on 'IDBObjectStore': The parameter is not a valid key.",
    "inner": {
        "stack": "Error: Failed to execute 'get' on 'IDBObjectStore': The parameter is not a valid key.\n    at https://chatcraft.org/assets/index-sGYt3Ste.js:425:30652\n    at Kq (https://chatcraft.org/assets/index-sGYt3Ste.js:424:3694)\n    at new Be (https://chatcraft.org/assets/index-sGYt3Ste.js:424:3190)\n    at Object.get (https://chatcraft.org/assets/index-sGYt3Ste.js:425:30599)\n    at c.<computed> [as get] (https://chatcraft.org/assets/index-sGYt3Ste.js:425:51078)\n    at https://chatcraft.org/assets/index-sGYt3Ste.js:425:6066\n    at s (https://chatcraft.org/assets/index-sGYt3Ste.js:425:5768)\n    at https://chatcraft.org/assets/index-sGYt3Ste.js:425:4706\n    at m0 (https://chatcraft.org/assets/index-sGYt3Ste.js:425:3473)\n    at qc (https://chatcraft.org/assets/index-sGYt3Ste.js:425:2313)"
    }
}

Checking the PRs preview URL

Going further, I started checking the all the recent PRs preview to test which PR broke the sharing chat functionality. Found out to be #431. I wasn't able to produce this bug locally as I had no idea how to be loggedIn to ChatCraft while accessing locally. One of my classmate helped me out and told me that we can access ChatCraft locally as logged in user by using the command below:

pnpm dev-functions

Before I could go ahead, My professor, David Humphrey found the issue and made a PR #469 and the bug was fixed. The issue he found was :

The way the data was being passed down from the new loader is different (the old way meant it received a chat id, the new way gets an object)

PR461 - show delete submenu only when there is more than 1 delete option

Another issue I worked on this week was #444. This is was a small one and an easy UI related fix. I recently implemented Delete SubMenus and we had 3 different types of delete buttons : Delete before, Delete After, Delete message. The issue wanted to me add a condition that don't show a submenu if there's just one delete possible i.e Delete message. I added the condition and made a PR #461. just had to take some feedback for a better code approach and made the changes, got this merged.

Issue 453 - Chat Area and Prompt Menu are not aligned perfectly

Based on the issue, We had a misalignment of around 5px in Chat messages and the PromptForm.

I found that I could not reproduce this issue in my mac but could see this in a monitor with a windows. Tried fixing it with PR #462 . Later Amnish found that this issue is due to scroll bar and we won't be able to fix it as its based on platform and scroll bar size. We just closed the issue as it coudn't be fixed.

Issue 377 - Integrate scrape2md into CloudFlare proxy function

ChatCraft's owner created another lib scrape2md which helped us convert URLs to markdown for chatcraft or any other llms to be able to parse the data. As a first step to this integration, I had to publish the scrape2md lib to npm to be able to import and use it. I created a PR scrape2md-old #1 which setup its package.json accordingly to be published to npm, a workflow which would build, test and publish the package to npm using NPM_TOKEN which taras(ChatCraft's owner) had to setup in the repo's secret. In addition to that I added unbuild as a devDependencies to the project to build that in js dist folder to be able to published to npm.

Happy Coding🚀🚀

ChatCraft Release 1.2 Contribution Recap

Rachit Chawla — Sat, 10 Feb 2024 13:08:50 +0000

Pull Request #406: Refining the Delete Section

In PR #406, I embarked on refining the delete section's functionality by integrating the SubMenu and MenuItem components I had previously developed. Additionally, I was tasked with enhancing user experience by incorporating icons into specific MenuItems. This required a structural modification of the component to accommodate the icon tag of type ReactNode.

Upon submitting the PR, I diligently addressed feedback received during the review process, ensuring all requested changes were implemented. However, during the final stages, conflicts arose between the main branch and my delete-menu branch, necessitating a rebase. Given the complexity of the process, I sought the guidance of another project contributor, Katie, whose expertise proved invaluable in navigating through the challenges.

Key Changes Made:

Updated the SubMenu component to accept className for Chakra Red, facilitating color customization, particularly for the delete button.
Modified MessageBase to present delete options in a separate SubMenu, enhancing organization and accessibility.
Enhanced the MenuItem component to accommodate the icon prop with type ReactNode, enabling the seamless integration of icons.
Introduced icons for copy, edit, and delete buttons, augmenting user interaction and visual clarity.

PR Review and Issue Management

In addition to my contributions, I undertook the responsibility of reviewing PRs, ensuring code quality and adherence to project standards. PR #404 warranted meticulous scrutiny, involving comprehensive code review and testing using the cloudflare preview URL. Following a thorough evaluation, the PR was approved for merging, reflecting our unwavering commitment to excellence.

Furthermore, I encountered an unforeseen issue, identified as #398, wherein a horizontal scroll bar intermittently appeared upon opening the menu. Recognizing the significance of swift resolution, I promptly initiated an issue and delegated the task to Amnish, a contributor who is proficient with CSS.

Triage Meeting and Release Management

Assuming the role of the "sheriff" for the week, I spearheaded the triage meeting, a pivotal checkpoint to assess project progress and address any impending challenges. Key priorities included identifying showstopper issues, ensuring PR readiness, and facilitating timely resolution of bottlenecks. As the release deadline approached, meticulous coordination ensured the seamless integration of all pending PRs, marking a milestone in our journey.

Concluding our efforts, I asked for guidance from my professor, David Humphprey and We setup a teams meeting for this. Leveraging GitHub's features, we closed the milestone and generated comprehensive release notes, encapsulating the essence of our collective contributions.

In retrospection, Release 1.2 stands as a testament to our collaborative spirit and unwavering commitment to excellence. As we set our sights on future endeavors, let us forge ahead with renewed vigor, embracing the challenges that lie ahead and celebrating the victories that pave our path towards innovation and progress.

Reflecting on My Contribution to ChatCraft: Release 1.1

Rachit Chawla — Sun, 04 Feb 2024 13:12:33 +0000

This week has been quite a journey filled with learning, teamwork, and overcoming challenges as I worked on enhancing ChatCraft for the upcoming Release 1.1. Here's a detailed look at what I've experienced and discovered along the way.

PR Details

Pull Request: #374
Description: Created a React-menu component and migrated the MessageBase menu to utilize this new component.
Lines of Code Changed:
- Modified: 470 lines
- Added: 520 new lines
Refactoring: Some files underwent refactoring to align with the new changes.

Getting Started with React-menu Components

My task was to create a new React-menu component wrapped in ChakraUI's theme and update the existing MessageBase menu to use this new component. While it sounded straightforward at first, I soon realized there was much to learn and figure out.

Learning Together with Amnish

One of the best parts of this experience was collaborating with Amnish, a skilled developer and a classmate of mine. I being pretty weak at CSS part wasn't able to figure out ChakraUI's themeing. Amnish was able to help me fix the CSS part. It was a great opportunity to grow and learn from each other. Collaborating on the same pull request came with its own set of challenges. We had to make sure our changes didn't conflict, so we made it a habit to regularly update our code from the 'react-menu' branch. This helped us avoid headaches and kept our work in sync.

Pull Request Feedbacks

The PR underwent extensive review and feedback iterations.
Initial feedback addressed hover highlighting, submenu handling, borders, and theming.
Subsequent adjustments involved dividing the menu into separate components for enhanced declarative usage.

Lessons Learned

Reflecting on this experience, I've learned a few important lessons and more knowledge about React, CSS:

Teamwork Matters: Working closely with others can be incredibly rewarding and can help you grow faster.
Keep Git in Check: Regularly updating your code and managing branches properly can save a lot of time and headaches.
Embrace Challenges: Even when things get tough, facing challenges can lead to valuable learning opportunities.

Release 1.1

1.1 for ChatCraft was released this friday and I personally had 2 pull requests merged in this one.
For full change information : Click here

Stay tuned for more updates as we continue to shape ChatCraft together!

Happy coding! 🚀

Feel free to share your own thoughts and experiences!

Reflecting on a Week with ChatCraft: My Open Source Journey

Rachit Chawla — Mon, 29 Jan 2024 01:20:49 +0000

Engagement with ChatCraft

Last week marked another chapter in my journey with ChatCraft, an open-source project I've been actively involved in. One of the key tasks I tackled was the migration of menus within the framework—from ChakraUI to React-menu, encapsulated within the ChakraUI Box component. It was a challenging but rewarding endeavor that allowed me to delve deeper into the project's architecture and functionality.

Balancing Commitments and Contributions

Despite facing constraints due to personal commitments, including travel back to my home country, I remained steadfast in my commitment to ChatCraft. Although my contribution may have been somewhat limited during those days, I continued to immerse myself in the project, finding new ways to integrate it into my academic and professional pursuits. ChatCraft has become not just a project I work on but a tool I rely on for various projects and coursework, a testament to its versatility and utility.

Insights from Collaborative Sessions

Participating in the weekly triage meeting provided invaluable insights into the collaborative nature of open-source development. One notable aspect was my review of Pull Request #372, where I meticulously assessed the code for formatting, syntax, and functionality. Leveraging Cloudflare's deploy preview URL, I conducted thorough UI testing to ensure that the proposed changes integrated seamlessly with ChatCraft's interface. This experience not only honed my technical skills but also deepened my understanding of the collaborative review process.

Looking Forward: Embracing Leadership Responsibilities

As I look ahead to the coming week, I find myself preparing to take on a new role within the ChatCraft community. Assigned as the leader of the triage meeting, I am tasked with facilitating discussions, ensuring tasks are assigned and reviewed promptly, and fostering a collaborative environment conducive to progress. It's an exciting opportunity to contribute in a different capacity and to further engage with the vibrant community that drives ChatCraft forward.

Gratitude and Reflection

Reflecting on my journey with ChatCraft fills me with gratitude for the opportunity to be part of such a dynamic and supportive community. Each contribution, no matter how small, contributes to the collective effort of innovation and improvement. As I continue to navigate the ever-evolving landscape of open source, I am inspired by the passion, dedication, and camaraderie that define our shared pursuit of excellence.

For updates and discussions on ChatCraft, visit our GitHub repository here.

Pull Request #372 here.

Issue #359 here.