Hi! My name is Harshil, and I am currently enrolled in an Open Source Development course at Seneca College. I had heard great reviews about this course, which is why I decided to enroll. During the lectures, I remember my professor repeatedly saying to "go out of your comfort zone" while contributing to open-source repositories. At the time, I didn’t give much thought to this advice.
Last month, I contributed to four open-source repositories, and I just realized that I did those contributions while staying in my comfort zone. I was working with technologies I was familiar with, tackling issues I knew how to resolve, and handling tasks that weren’t particularly challenging for me. While these contributions were valuable, I now understand that I wasn’t learning much by staying in my comfort zone.
This blog is about an issue I contributed to that pushed me out of my comfort zone. It was during this experience that I realized learning happens when you push yourself beyond what feels comfortable. Growth truly begins when you step outside your comfort zone.
Issue
This blog is about my contribution to ChatCraft.
Developer-oriented ChatGPT clone
ChatCraft.org
Welcome to
Features
We think ChatCraft is the best platform for learning, experimenting, and getting creative with code. Here's a few of the reasons why we think you'll agree:
🛠️ You're in Control: Customize all aspects of a chat. Use your own System Prompts, edit, delete, and retry AI messages with models from competing vendors in the same chat.
🌍 Multiple AI Providers: ChatCraft supports both OpenAI and OpenRouter, giving you access to a…
commented on
I just need to confirm one thing. I used a conditional in the component to render the MenuButton like this:
{menuButtonLabel &&
React.isValidElement(menuButtonLabel) &&
menuButtonLabel.type === SubMenu ? (
<MenuButton
as={Box}
fontSize="1rem"
fontWeight="normal"
cursor="pointer"
color="inherit"
padding="0"
background="none"
border="none"
aria-label={label || "Choose Model"}
title={label || "Choose Model"}
onClick={openOnHover ? undefined : onOpen} // Open on click if not openOnHover
onMouseEnter={openOnHover ? onOpen : undefined} // Open on hover if openOnHover
onMouseLeave={openOnHover ? onClose : undefined} // Close on hover out if openOnHover
>
{menuButtonLabel}
</MenuButton>
) : (
<MenuButton
as={IconButton}
size="sm"
fontSize="1.25rem"
aria-label={label || "Choose Model"}
title={label || "Choose Model"}
icon={<TbChevronUp />}
onClick={openOnHover ? undefined : onOpen} // Open on click if not openOnHover
onMouseEnter={openOnHover ? onOpen : undefined} // Open on hover if openOnHover
onMouseLeave={openOnHover ? onClose : undefined} // Close on hover out if openOnHover
borderLeftRadius="0"
/>
)}The reason for this approach is that both use cases require MenuButton to function differently. Initially, I tried to keep this logic separate and only shared the menuItem logic, but it didn’t work. This is because the two places where this component needs to render use different menu libraries: one uses @chakra-ui/react components, and the other uses @szhsin/react-menu. That’s why I had to make the entire Menu component reusable.
What do you think?
posted on
I accepted the developer request and cloned the original repository. Initially, I was confused about how to transfer my changes from my forked repository’s branch to the original repository’s branch. Then I remembered I could set up my forked repository as a remote, fetch the branches, and merge the changes. I did that successfully and made another
This is Requested from #729
</div>
<div class="gh-btn-container"><a class="gh-btn" href="https://github.com/tarasglek/chatcraft.org/pull/730">View on GitHub</a></div>
It turned out that my ad-hoc approach was making the new component less reusable and introduced bugs. The maintainer suggested that the new component should use @szhsin/react-menu instead of @chakra-ui/react, and asked me to revisit the previous approach of extracting MenuList.
I started by making the required changes and created a new component called ModelSelectionMenuList, extracting the MenuList into this component. It worked as expected for the Retry menu, as its parent component was already using @szhsin/react-menu. However, it failed for the Ask menu, which was still using @chakra-ui/react components.
I reached out to the maintainer again, and they advised refactoring the Ask menu to also use @szhsin/react-menu components. Following their guidance, I successfully refactored the Ask menu to align with the new structure. This made the component consistent and reusable across both menus.
Mobile Screen Refactoring
While refactoring the Ask menu, I discovered that it was rendered differently for mobile and laptop screens. To address this, I updated my new component to handle both variations by using the same template logic to render different menus based on screen size. I also ensured that the Ask menu for mobile screens was refactored appropriately.
Final Thoughts
In total, I spent around two full days completing the PR for this issue. During the process, I had moments of doubt, feeling like I might not be able to finish it. However, I persevered and completed the task, gaining valuable knowledge in the process.
The most important lesson I learned from this issue—and from the Open Source Development course—is to challenge myself and step out of my comfort zone. Growth truly happens when we push our boundaries, and this experience reinforced that belief.
Community-Analysen & Experten-Meinungen 0
Verwandte Story-Cluster & Quellen (Vektor-KI)
Ähnliche Beiträge
Auch interessante Nachrichten Stepping Out of My Comfort Zone: Refactoring Menus in ChatCraft
Thematisch verwandte Begriffe: Stepping, Comfort, Zone, Refactoring · 6 Treffer
OpenAI Updates ChatGPT for iOS with Customizable Widgets for ChatGPT Work and Codex Remote
Black Box: The Chatbots | The Line | Ep 5 – podcast
How to Build AI Systems That Know When They Don't Know: A Practical Guide
Black Box: The Chatbots | 14 days | Ep 2 – podcast
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
Beiträge werden geladen ...
Videos werden geladen ...
🔖 Gespeicherte Artikel
tsecurity.de App
Installiere tsecurity.de direkt auf deinen Home-Bildschirm für das ultimative Vollbild-Magazinerlebnis ohne Browser-Leisten.
Community Radar & Live Chat
Aktivitäten deiner Analysten
Neues Thema oder Eilmeldung einreichen
Reiche interessante Links, Zero-Days oder Debatten ein. Die Community entscheidet per Upvote über die Veröffentlichung.
posted on did some expert work to make the Ask menu more responsive and easier to use. We have a similar need in the Retry menu for AI Message responses. It would be interesting to see if we can re-use the same UX there, such that you can switch providers/models when retrying.