feat: gitHub authentication to the application using GitHub's Device Flow O…

[emcconnell]

When the user clicks on the clone or push buttons in the UI they will be presented with the ability to launch the GitHub flow to create an auth token that will be stored in local storage. This makes cloning and pushing to private repos possible and follows best practices by GitHub. There are other enhancements that can be added to this but IMP this looks and works well.

This pull request introduces several significant changes to the app/components/chat and related files to enhance the Git cloning feature. The most important changes include the addition of a Git clone modal, updates to the GitCloneButton component, and the creation of a spinner for the cloning process.

Enhancements to Git cloning feature:

• app/components/chat/GitCloneButton.tsx: Added state management for modal visibility and refactored the clone logic to use the new GitCloneModal component. [1] [2] [3]
• app/components/git/GitCloneModal.tsx: Introduced a new modal component for cloning Git repositories, including authentication with GitHub, repository selection, and error handling.
• app/components/git/GitCloneSpinner.tsx: Added a spinner component to indicate the cloning process is in progress.

Minor improvements:

• app/components/chat/BaseChat.tsx: Updated the rendering logic for the GitCloneButton to ensure it is only displayed when importChat is defined.
• app/components/settings/features/FeaturesTab.tsx: Added a title attribute to the prompt library select element for better accessibility.

Other changes:

• app/commit.json: Added a new commit entry.
• app/components/sidebar/Menu.client.tsx: Added a new div wrapping the chat start input for better layout management.

Setup Requirements
Create a GitHub OAuth App:

Go to GitHub Settings > Developer Settings > OAuth Apps > New OAuth App
Fill in:
Application name: "Bolt Local" (or your preferred name)
Homepage URL: Your application URL
No callback URL needed (using Device Flow)
Environment Variables:
VITE_GITHUB_CLIENT_ID=Ov23livn63c7k1xXt9ke

[emcconnell]

SEE NEWER VIDEO LINKED BELOW

[coleam00]

This is FANTASTIC, thanks @emcconnell! I'll take a look at this tonight!

[coleam00]

Nice implementation @emcconnell! I love it!

Could you expand more on what this will be used for? Is this more to get ready for further integrations with Git like importing repos? It seems this sets up GitHub authentication but doesn't necessarily add a new "feature" to oTToDev. Or maybe I am missing something obvious.

But either way this is super important to have so thank you!

[emcconnell]

@coleam00

Is this more to get ready for further integrations with Git like importing repos?

Yes, that's correct. To merge now may be confusing as it doesn't add anything except auth to github. Also, @thecodacus is working in this direction also and not sure where we will land. If we wanted this, I could add some functionality for now like enhancing the current github push by using this auth flow. I only had time for this part and knew we had some open ideas on how to approach but wanted to toss what I had time for into the ring. So, maybe @wonderwhy-er or @thecodacus have some input on what to do with it for now.

[thecodacus]

this looks great @emcconnell , the git integration i am working on also will require a authentication if we want to clone a private repo. so this will really help for cloning gihub based repos. this is great 👍

[emcconnell]

Added this to the features as a "utility" feature. This video will explain it best: https://www.youtube.com/watch?v=envCOTYCBVI

Can we merge this? Or do we have specific comments? I realize we have a place to paste user and token in settings/connection.

[emcconnell]

See latest video here: https://youtu.be/Mq_eMsKszj4?si=uVnGzxqFUlmUlH2Z