Merge pull request #421 from thecodacus/github-import

feat(git): Git Repository Integration

.husky/pre-commit

@@ -5,15 +5,21 @@ echo "🔍 Running pre-commit hook to check the code looks good... 🔍"
 export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # Load nvm if you're using i
 
+echo "Running typecheck..."
+which pnpm
+
 if ! pnpm typecheck; then
-    echo "❌ Type checking failed! Please review TypeScript types."
+        echo "❌ Type checking failed! Please review TypeScript types."
-    echo "Once you're done, don't forget to add your changes to the commit! 🚀"
+        echo "Once you're done, don't forget to add your changes to the commit! 🚀"
-    exit 1
+        echo "Typecheck exit code: $?"
+        exit 1
 fi
 
+echo "Running lint..."
 if ! pnpm lint; then
     echo "❌ Linting failed! 'pnpm lint:fix' will help you fix the easy ones."
     echo "Once you're done, don't forget to add your beautification to the commit! 🤩"
+    echo "lint exit code: $?"
     exit 1
 fi
 

app/components/chat/Artifact.tsx

@@ -52,7 +52,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
     if (actions.length !== 0 && artifact.type === 'bundled') {
       const finished = !actions.find((action) => action.status !== 'complete');
 
-      if (finished != allActionFinished) {
+      if (allActionFinished !== finished) {
         setAllActionFinished(finished);
       }
     }

app/components/chat/BaseChat.tsx

@@ -21,6 +21,7 @@ import type { ProviderInfo } from '~/utils/types';
 import { ExportChatButton } from '~/components/chat/chatExportAndImport/ExportChatButton';
 import { ImportButtons } from '~/components/chat/chatExportAndImport/ImportButtons';
 import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
+import GitCloneButton from './GitCloneButton';
 
 import FilePreview from './FilePreview';
 import { ModelSelector } from '~/components/chat/ModelSelector';
@@ -513,7 +514,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 </div>
               </div>
             </div>
-            {!chatStarted && ImportButtons(importChat)}
+            {!chatStarted && (
+              <div className="flex justify-center gap-2">
+                {ImportButtons(importChat)}
+                <GitCloneButton importChat={importChat} />
+              </div>
+            )}
             {!chatStarted &&
               ExamplePrompts((event, messageInput) => {
                 if (isStreaming) {

app/components/chat/GitCloneButton.tsx

@@ -0,0 +1,103 @@
+import ignore from 'ignore';
+import { useGit } from '~/lib/hooks/useGit';
+import type { Message } from 'ai';
+import WithTooltip from '~/components/ui/Tooltip';
+
+const IGNORE_PATTERNS = [
+  'node_modules/**',
+  '.git/**',
+  '.github/**',
+  '.vscode/**',
+  '**/*.jpg',
+  '**/*.jpeg',
+  '**/*.png',
+  'dist/**',
+  'build/**',
+  '.next/**',
+  'coverage/**',
+  '.cache/**',
+  '.vscode/**',
+  '.idea/**',
+  '**/*.log',
+  '**/.DS_Store',
+  '**/npm-debug.log*',
+  '**/yarn-debug.log*',
+  '**/yarn-error.log*',
+  '**/*lock.json',
+  '**/*lock.yaml',
+];
+
+const ig = ignore().add(IGNORE_PATTERNS);
+const generateId = () => Math.random().toString(36).substring(2, 15);
+
+interface GitCloneButtonProps {
+  className?: string;
+  importChat?: (description: string, messages: Message[]) => Promise<void>;
+}
+
+export default function GitCloneButton({ importChat }: GitCloneButtonProps) {
+  const { ready, gitClone } = useGit();
+  const onClick = async (_e: any) => {
+    if (!ready) {
+      return;
+    }
+
+    const repoUrl = prompt('Enter the Git url');
+
+    if (repoUrl) {
+      const { workdir, data } = await gitClone(repoUrl);
+
+      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}
+<boltArtifact id="imported-files" title="Git Cloned Files" type="bundled" >           
+          ${filePaths
+            .map((filePath) => {
+              const { data: content, encoding } = data[filePath];
+
+              if (encoding === 'utf8') {
+                return `<boltAction type="file" filePath="${filePath}">
+${content}
+</boltAction>`;
+              } 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));
+
+        importChat(`Git Project:${repoUrl.split('/').slice(-1)[0]}`, [message]);
+
+        // console.log(files);
+      }
+    }
+  };
+
+  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>
+  );
+}

app/components/chat/chatExportAndImport/ImportButtons.tsx

@@ -5,7 +5,7 @@ import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
 
 export function ImportButtons(importChat: ((description: string, messages: Message[]) => Promise<void>) | undefined) {
   return (
-    <div className="flex flex-col items-center justify-center flex-1 p-4">
+    <div className="flex flex-col items-center justify-center w-auto">
       <input
         type="file"
         id="chat-import"

app/lib/hooks/useGit.ts

@@ -0,0 +1,287 @@
+import type { WebContainer } from '@webcontainer/api';
+import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react';
+import { webcontainer as webcontainerPromise } from '~/lib/webcontainer';
+import git, { type GitAuth, type PromiseFsClient } from 'isomorphic-git';
+import http from 'isomorphic-git/http/web';
+import Cookies from 'js-cookie';
+import { toast } from 'react-toastify';
+
+const lookupSavedPassword = (url: string) => {
+  const domain = url.split('/')[2];
+  const gitCreds = Cookies.get(`git:${domain}`);
+
+  if (!gitCreds) {
+    return null;
+  }
+
+  try {
+    const { username, password } = JSON.parse(gitCreds || '{}');
+    return { username, password };
+  } catch (error) {
+    console.log(`Failed to parse Git Cookie ${error}`);
+    return null;
+  }
+};
+
+const saveGitAuth = (url: string, auth: GitAuth) => {
+  const domain = url.split('/')[2];
+  Cookies.set(`git:${domain}`, JSON.stringify(auth));
+};
+
+export function useGit() {
+  const [ready, setReady] = useState(false);
+  const [webcontainer, setWebcontainer] = useState<WebContainer>();
+  const [fs, setFs] = useState<PromiseFsClient>();
+  const fileData = useRef<Record<string, { data: any; encoding?: string }>>({});
+  useEffect(() => {
+    webcontainerPromise.then((container) => {
+      fileData.current = {};
+      setWebcontainer(container);
+      setFs(getFs(container, fileData));
+      setReady(true);
+    });
+  }, []);
+
+  const gitClone = useCallback(
+    async (url: string) => {
+      if (!webcontainer || !fs || !ready) {
+        throw 'Webcontainer not initialized';
+      }
+
+      fileData.current = {};
+      await git.clone({
+        fs,
+        http,
+        dir: webcontainer.workdir,
+        url,
+        depth: 1,
+        singleBranch: true,
+        corsProxy: 'https://cors.isomorphic-git.org',
+        onAuth: (url) => {
+          // let domain=url.split("/")[2]
+
+          let auth = lookupSavedPassword(url);
+
+          if (auth) {
+            return auth;
+          }
+
+          if (confirm('This repo is password protected. Ready to enter a username & password?')) {
+            auth = {
+              username: prompt('Enter username'),
+              password: prompt('Enter password'),
+            };
+            return auth;
+          } else {
+            return { cancel: true };
+          }
+        },
+        onAuthFailure: (url, _auth) => {
+          toast.error(`Error Authenticating with ${url.split('/')[2]}`);
+        },
+        onAuthSuccess: (url, auth) => {
+          saveGitAuth(url, auth);
+        },
+      });
+
+      const data: Record<string, { data: any; encoding?: string }> = {};
+
+      for (const [key, value] of Object.entries(fileData.current)) {
+        data[key] = value;
+      }
+
+      return { workdir: webcontainer.workdir, data };
+    },
+    [webcontainer],
+  );
+
+  return { ready, gitClone };
+}
+
+const getFs = (
+  webcontainer: WebContainer,
+  record: MutableRefObject<Record<string, { data: any; encoding?: string }>>,
+) => ({
+  promises: {
+    readFile: async (path: string, options: any) => {
+      const encoding = options.encoding;
+      const relativePath = pathUtils.relative(webcontainer.workdir, path);
+      console.log('readFile', relativePath, encoding);
+
+      return await webcontainer.fs.readFile(relativePath, encoding);
+    },
+    writeFile: async (path: string, data: any, options: any) => {
+      const encoding = options.encoding;
+      const relativePath = pathUtils.relative(webcontainer.workdir, path);
+      console.log('writeFile', { relativePath, data, encoding });
+
+      if (record.current) {
+        record.current[relativePath] = { data, encoding };
+      }
+
+      return await webcontainer.fs.writeFile(relativePath, data, { ...options, encoding });
+    },
+    mkdir: async (path: string, options: any) => {
+      const relativePath = pathUtils.relative(webcontainer.workdir, path);
+      console.log('mkdir', relativePath, options);
+
+      return await webcontainer.fs.mkdir(relativePath, { ...options, recursive: true });
+    },
+    readdir: async (path: string, options: any) => {
+      const relativePath = pathUtils.relative(webcontainer.workdir, path);
+      console.log('readdir', relativePath, options);
+
+      return await webcontainer.fs.readdir(relativePath, options);
+    },
+    rm: async (path: string, options: any) => {
+      const relativePath = pathUtils.relative(webcontainer.workdir, path);
+      console.log('rm', relativePath, options);
+
+      return await webcontainer.fs.rm(relativePath, { ...(options || {}) });
+    },
+    rmdir: async (path: string, options: any) => {
+      const relativePath = pathUtils.relative(webcontainer.workdir, path);
+      console.log('rmdir', relativePath, options);
+
+      return await webcontainer.fs.rm(relativePath, { recursive: true, ...options });
+    },
+
+    // Mock implementations for missing functions
+    unlink: async (path: string) => {
+      // unlink is just removing a single file
+      const relativePath = pathUtils.relative(webcontainer.workdir, path);
+      return await webcontainer.fs.rm(relativePath, { recursive: false });
+    },
+
+    stat: async (path: string) => {
+      try {
+        const relativePath = pathUtils.relative(webcontainer.workdir, path);
+        const resp = await webcontainer.fs.readdir(pathUtils.dirname(relativePath), { withFileTypes: true });
+        const name = pathUtils.basename(relativePath);
+        const fileInfo = resp.find((x) => x.name == name);
+
+        if (!fileInfo) {
+          throw new Error(`ENOENT: no such file or directory, stat '${path}'`);
+        }
+
+        return {
+          isFile: () => fileInfo.isFile(),
+          isDirectory: () => fileInfo.isDirectory(),
+          isSymbolicLink: () => false,
+          size: 1,
+          mode: 0o666, // Default permissions
+          mtimeMs: Date.now(),
+          uid: 1000,
+          gid: 1000,
+        };
+      } catch (error: any) {
+        console.log(error?.message);
+
+        const err = new Error(`ENOENT: no such file or directory, stat '${path}'`) as NodeJS.ErrnoException;
+        err.code = 'ENOENT';
+        err.errno = -2;
+        err.syscall = 'stat';
+        err.path = path;
+        throw err;
+      }
+    },
+
+    lstat: async (path: string) => {
+      /*
+       * For basic usage, lstat can return the same as stat
+       * since we're not handling symbolic links
+       */
+      return await getFs(webcontainer, record).promises.stat(path);
+    },
+
+    readlink: async (path: string) => {
+      /*
+       * Since WebContainer doesn't support symlinks,
+       * we'll throw a "not a symbolic link" error
+       */
+      throw new Error(`EINVAL: invalid argument, readlink '${path}'`);
+    },
+
+    symlink: async (target: string, path: string) => {
+      /*
+       * Since WebContainer doesn't support symlinks,
+       * we'll throw a "operation not supported" error
+       */
+      throw new Error(`EPERM: operation not permitted, symlink '${target}' -> '${path}'`);
+    },
+
+    chmod: async (_path: string, _mode: number) => {
+      /*
+       * WebContainer doesn't support changing permissions,
+       * but we can pretend it succeeded for compatibility
+       */
+      return await Promise.resolve();
+    },
+  },
+});
+
+const pathUtils = {
+  dirname: (path: string) => {
+    // Handle empty or just filename cases
+    if (!path || !path.includes('/')) {
+      return '.';
+    }
+
+    // Remove trailing slashes
+    path = path.replace(/\/+$/, '');
+
+    // Get directory part
+    return path.split('/').slice(0, -1).join('/') || '/';
+  },
+
+  basename: (path: string, ext?: string) => {
+    // Remove trailing slashes
+    path = path.replace(/\/+$/, '');
+
+    // Get the last part of the path
+    const base = path.split('/').pop() || '';
+
+    // If extension is provided, remove it from the result
+    if (ext && base.endsWith(ext)) {
+      return base.slice(0, -ext.length);
+    }
+
+    return base;
+  },
+  relative: (from: string, to: string): string => {
+    // Handle empty inputs
+    if (!from || !to) {
+      return '.';
+    }
+
+    // Normalize paths by removing trailing slashes and splitting
+    const normalizePathParts = (p: string) => p.replace(/\/+$/, '').split('/').filter(Boolean);
+
+    const fromParts = normalizePathParts(from);
+    const toParts = normalizePathParts(to);
+
+    // Find common parts at the start of both paths
+    let commonLength = 0;
+    const minLength = Math.min(fromParts.length, toParts.length);
+
+    for (let i = 0; i < minLength; i++) {
+      if (fromParts[i] !== toParts[i]) {
+        break;
+      }
+
+      commonLength++;
+    }
+
+    // Calculate the number of "../" needed
+    const upCount = fromParts.length - commonLength;
+
+    // Get the remaining path parts we need to append
+    const remainingPath = toParts.slice(commonLength);
+
+    // Construct the relative path
+    const relativeParts = [...Array(upCount).fill('..'), ...remainingPath];
+
+    // Handle empty result case
+    return relativeParts.length === 0 ? '.' : relativeParts.join('/');
+  },
+};

package.json

@@ -58,6 +58,7 @@
     "@openrouter/ai-sdk-provider": "^0.0.5",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.4",
     "@remix-run/cloudflare": "^2.15.0",
     "@remix-run/cloudflare-pages": "^2.15.0",
@@ -75,13 +76,13 @@
     "framer-motion": "^11.12.0",
     "ignore": "^6.0.2",
     "isbot": "^4.4.0",
+    "isomorphic-git": "^1.27.2",
     "istextorbinary": "^9.5.0",
     "jose": "^5.9.6",
     "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",
     "nanostores": "^0.10.3",
     "ollama-ai-provider": "^0.15.2",
-    "pnpm": "^9.14.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hotkeys-hook": "^4.6.1",
@@ -110,6 +111,7 @@
     "husky": "9.1.7",
     "is-ci": "^3.0.1",
     "node-fetch": "^3.3.2",
+    "pnpm": "^9.14.4",
     "prettier": "^3.4.1",
     "sass-embedded": "^1.81.0",
     "typescript": "^5.7.2",