From 47db5547bd8c4523209160b7d3f09a9e9039a61b Mon Sep 17 00:00:00 2001
From: Dustin Loring <dustinwloring1988@gmail.com>
Date: Fri, 17 Jan 2025 16:50:33 -0500
Subject: [PATCH] feat: add private repo cloning

add private repo cloning
---
 app/components/chat/GitCloneButton.tsx |  92 +++++++++++----------
 app/components/git/GitCloneDialog.tsx  | 110 +++++++++++++++++++++++++
 app/components/ui/Dialog.tsx           |   6 +-
 3 files changed, 163 insertions(+), 45 deletions(-)
 create mode 100644 app/components/git/GitCloneDialog.tsx

diff --git a/app/components/chat/GitCloneButton.tsx b/app/components/chat/GitCloneButton.tsx
index 2a20199..0f14d75 100644
--- a/app/components/chat/GitCloneButton.tsx
+++ b/app/components/chat/GitCloneButton.tsx
@@ -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}
+      />
+    </>
   );
 }
diff --git a/app/components/git/GitCloneDialog.tsx b/app/components/git/GitCloneDialog.tsx
new file mode 100644
index 0000000..5d91139
--- /dev/null
+++ b/app/components/git/GitCloneDialog.tsx
@@ -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>
+  );
+} 
\ No newline at end of file
diff --git a/app/components/ui/Dialog.tsx b/app/components/ui/Dialog.tsx
index ad5e9f8..99467ac 100644
--- a/app/components/ui/Dialog.tsx
+++ b/app/components/ui/Dialog.tsx
@@ -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>