Merge pull request #421 from thecodacus/github-import

feat(git): Git Repository Integration

Author: thecodacus

.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 "Once you're done, don't forget to add your changes to the commit! 🚀"
-    exit 1
+        echo "❌ Type checking failed! Please review TypeScript types."
+        echo "Once you're done, don't forget to add your changes to the commit! 🚀"
+        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"