mirror of
https://github.com/stackblitz/bolt.new
synced 2025-06-26 18:17:50 +00:00
feat: add private repo cloning
add private repo cloning
This commit is contained in:
Dustin Loring
GitHub
commit
4c5efcc4f3
@ -3,6 +3,8 @@ import ignore from 'ignore';
|
||||
import WithTooltip from '~/components/ui/Tooltip';
|
||||
import { IGNORE_PATTERNS } from '~/constants/ignorePatterns';
|
||||
import { useGit } from '~/lib/hooks/useGit';
|
||||
import { useState } from 'react';
|
||||
import { GitCloneDialog } from '~/components/git/GitCloneDialog';
|
||||
|
||||
const ig = ignore().add(IGNORE_PATTERNS);
|
||||
const generateId = () => Math.random().toString(36).substring(2, 15);
|
||||
@ -14,65 +16,69 @@ interface GitCloneButtonProps {
|
||||
|
||||
export default function GitCloneButton({ importChat }: GitCloneButtonProps) {
|
||||
const { ready, gitClone } = useGit();
|
||||
const onClick = async (_e: any) => {
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
|
||||
const handleClone = async (repoUrl: string) => {
|
||||
if (!ready) {
|
||||
return;
|
||||
}
|
||||
|
||||
const repoUrl = prompt('Enter the Git url');
|
||||
const { workdir, data } = await gitClone(repoUrl);
|
||||
|
||||
if (repoUrl) {
|
||||
const { workdir, data } = await gitClone(repoUrl);
|
||||
if (importChat) {
|
||||
const filePaths = Object.keys(data).filter((filePath) => !ig.ignores(filePath));
|
||||
console.log(filePaths);
|
||||
|
||||
if (importChat) {
|
||||
const filePaths = Object.keys(data).filter((filePath) => !ig.ignores(filePath));
|
||||
console.log(filePaths);
|
||||
|
||||
const textDecoder = new TextDecoder('utf-8');
|
||||
const message: Message = {
|
||||
role: 'assistant',
|
||||
content: `Cloning the repo ${repoUrl} into ${workdir}
|
||||
const textDecoder = new TextDecoder('utf-8');
|
||||
const message: Message = {
|
||||
role: 'assistant',
|
||||
content: `Cloning the repo ${repoUrl} into ${workdir}
|
||||
<boltArtifact id="imported-files" title="Git Cloned Files" type="bundled" >
|
||||
${filePaths
|
||||
.map((filePath) => {
|
||||
const { data: content, encoding } = data[filePath];
|
||||
${filePaths
|
||||
.map((filePath) => {
|
||||
const { data: content, encoding } = data[filePath];
|
||||
|
||||
if (encoding === 'utf8') {
|
||||
return `<boltAction type="file" filePath="${filePath}">
|
||||
if (encoding === 'utf8') {
|
||||
return `<boltAction type="file" filePath="${filePath}">
|
||||
${content}
|
||||
</boltAction>`;
|
||||
} else if (content instanceof Uint8Array) {
|
||||
return `<boltAction type="file" filePath="${filePath}">
|
||||
} else if (content instanceof Uint8Array) {
|
||||
return `<boltAction type="file" filePath="${filePath}">
|
||||
${textDecoder.decode(content)}
|
||||
</boltAction>`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
})
|
||||
.join('\n')}
|
||||
</boltArtifact>`,
|
||||
id: generateId(),
|
||||
createdAt: new Date(),
|
||||
};
|
||||
console.log(JSON.stringify(message));
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
})
|
||||
.join('\n')}
|
||||
</boltArtifact>`,
|
||||
id: generateId(),
|
||||
createdAt: new Date(),
|
||||
};
|
||||
console.log(JSON.stringify(message));
|
||||
|
||||
importChat(`Git Project:${repoUrl.split('/').slice(-1)[0]}`, [message]);
|
||||
}
|
||||
importChat(`Git Project:${repoUrl.split('/').slice(-1)[0]}`, [message]);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<WithTooltip tooltip="Clone A Git Repo">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
onClick(e);
|
||||
}}
|
||||
title="Clone A Git Repo"
|
||||
className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
|
||||
>
|
||||
<span className="i-ph:git-branch" />
|
||||
Clone A Git Repo
|
||||
</button>
|
||||
</WithTooltip>
|
||||
<>
|
||||
<WithTooltip tooltip="Clone A Git Repo">
|
||||
<button
|
||||
onClick={() => setShowDialog(true)}
|
||||
title="Clone A Git Repo"
|
||||
className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
|
||||
>
|
||||
<span className="i-ph:git-branch" />
|
||||
Clone A Git Repo
|
||||
</button>
|
||||
</WithTooltip>
|
||||
|
||||
<GitCloneDialog
|
||||
isOpen={showDialog}
|
||||
onClose={() => setShowDialog(false)}
|
||||
onClone={handleClone}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
110
app/components/git/GitCloneDialog.tsx
Normal file
110
app/components/git/GitCloneDialog.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import { useState } from 'react';
|
||||
import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
|
||||
import { useGit } from '~/lib/hooks/useGit';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
interface GitCloneDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onClone?: (repoUrl: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export function GitCloneDialog({ isOpen, onClose, onClone }: GitCloneDialogProps) {
|
||||
const [isPrivate, setIsPrivate] = useState(false);
|
||||
const [repoUrl, setRepoUrl] = useState('');
|
||||
const [token, setToken] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// If it's a private repo, construct the URL with the token
|
||||
const cloneUrl = isPrivate
|
||||
? repoUrl.replace('https://', `https://${token}@`)
|
||||
: repoUrl;
|
||||
|
||||
if (onClone) {
|
||||
await onClone(cloneUrl);
|
||||
}
|
||||
toast.success('Repository cloned successfully!');
|
||||
onClose();
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to clone repository');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogRoot open={isOpen}>
|
||||
<Dialog onBackdrop={onClose} onClose={onClose}>
|
||||
<DialogTitle>Clone Repository</DialogTitle>
|
||||
<DialogDescription>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
checked={!isPrivate}
|
||||
onChange={() => setIsPrivate(false)}
|
||||
className="form-radio"
|
||||
/>
|
||||
<span>Public Repository</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
checked={isPrivate}
|
||||
onChange={() => setIsPrivate(true)}
|
||||
className="form-radio"
|
||||
/>
|
||||
<span>Private Repository</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Repository URL
|
||||
<input
|
||||
type="text"
|
||||
value={repoUrl}
|
||||
onChange={(e) => setRepoUrl(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor px-3 py-2"
|
||||
placeholder="https://github.com/user/repo"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{isPrivate && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
Personal Access Token
|
||||
<input
|
||||
type="password"
|
||||
value={token}
|
||||
onChange={(e) => setToken(e.target.value)}
|
||||
className="mt-1 block w-full rounded-md bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor px-3 py-2"
|
||||
placeholder="ghp_xxxxxxxxxxxx"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<DialogButton type="secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</DialogButton>
|
||||
<DialogButton type="primary" onClick={handleSubmit} disabled={isLoading}>
|
||||
{isLoading ? 'Cloning...' : 'Clone Repository'}
|
||||
</DialogButton>
|
||||
</div>
|
||||
</form>
|
||||
</DialogDescription>
|
||||
</Dialog>
|
||||
</DialogRoot>
|
||||
);
|
||||
}
|
||||
@ -44,13 +44,14 @@ interface DialogButtonProps {
|
||||
type: 'primary' | 'secondary' | 'danger';
|
||||
children: ReactNode;
|
||||
onClick?: (event: React.UIEvent) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const DialogButton = memo(({ type, children, onClick }: DialogButtonProps) => {
|
||||
export const DialogButton = memo(({ type, children, onClick, disabled = false }: DialogButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
className={classNames(
|
||||
'inline-flex h-[35px] items-center justify-center rounded-lg px-4 text-sm leading-none focus:outline-none',
|
||||
'inline-flex h-[35px] items-center justify-center rounded-lg px-4 text-sm leading-none focus:outline-none disabled:opacity-50',
|
||||
{
|
||||
'bg-bolt-elements-button-primary-background text-bolt-elements-button-primary-text hover:bg-bolt-elements-button-primary-backgroundHover':
|
||||
type === 'primary',
|
||||
@ -61,6 +62,7 @@ export const DialogButton = memo(({ type, children, onClick }: DialogButtonProps
|
||||
},
|
||||
)}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user