Merge remote-tracking branch 'upstream/main'

app/commit.json

@@ -1 +1 @@
-{ "commit": "49b02dd885919e24a201f07b1a7b0fd0371b4f85" , "version": "0.0.1" }
+{ "commit": "25b80ab267541b6ea290985dde09863f1a29c85c" , "version": "0.0.1" }

app/components/chat/Chat.client.tsx

@@ -20,6 +20,7 @@ import Cookies from 'js-cookie';
 import { debounce } from '~/utils/debounce';
 import { useSettings } from '~/lib/hooks/useSettings';
 import type { ProviderInfo } from '~/types/model';
+import { useSearchParams } from '@remix-run/react';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -92,6 +93,7 @@ export const ChatImpl = memo(
     const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
     const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
     const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
+    const [searchParams, setSearchParams] = useSearchParams();
     const files = useStore(workbenchStore.files);
     const { activeProviders, promptId } = useSettings();
 
@@ -138,6 +140,24 @@ export const ChatImpl = memo(
       initialMessages,
       initialInput: Cookies.get(PROMPT_COOKIE_KEY) || '',
     });
+    useEffect(() => {
+      const prompt = searchParams.get('prompt');
+      console.log(prompt, searchParams, model, provider);
+
+      if (prompt) {
+        setSearchParams({});
+        runAnimation();
+        append({
+          role: 'user',
+          content: [
+            {
+              type: 'text',
+              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${prompt}`,
+            },
+          ] as any, // Type assertion to bypass compiler check
+        });
+      }
+    }, [model, provider, searchParams]);
 
     const { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer } = usePromptEnhancer();
     const { parsedMessages, parseMessages } = useMessageParser();

app/components/chat/CodeBlock.tsx

@@ -53,7 +53,7 @@ export const CodeBlock = memo(
         <div
           className={classNames(
             styles.CopyButtonContainer,
-            'bg-white absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
+            'bg-transparant absolute top-[10px] right-[10px] rounded-md z-10 text-lg flex items-center justify-center opacity-0 group-hover:opacity-100',
             {
               'rounded-l-0 opacity-100': copied,
             },
@@ -62,7 +62,7 @@ export const CodeBlock = memo(
           {!disableCopy && (
             <button
               className={classNames(
-                'flex items-center bg-transparent p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300',
+                'flex items-center bg-accent-500 p-[6px] justify-center before:bg-white before:rounded-l-md before:text-gray-500 before:border-r before:border-gray-300 rounded-md transition-theme',
                 {
                   'before:opacity-0': !copied,
                   'before:opacity-100': copied,

app/components/git/GitUrlImport.client.tsx

@@ -8,6 +8,8 @@ import { Chat } from '~/components/chat/Chat.client';
 import { useGit } from '~/lib/hooks/useGit';
 import { useChatHistory } from '~/lib/persistence';
 import { createCommandsMessage, detectProjectCommands } from '~/utils/projectCommands';
+import { LoadingOverlay } from '~/components/ui/LoadingOverlay';
+import { toast } from 'react-toastify';
 
 const IGNORE_PATTERNS = [
   'node_modules/**',
@@ -38,6 +40,7 @@ export function GitUrlImport() {
   const { ready: historyReady, importChat } = useChatHistory();
   const { ready: gitReady, gitClone } = useGit();
   const [imported, setImported] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   const importRepo = async (repoUrl?: string) => {
     if (!gitReady && !historyReady) {
@@ -109,9 +112,23 @@ ${file.content}
       return;
     }
 
-    importRepo(url);
+    importRepo(url).catch((error) => {
+      console.error('Error importing repo:', error);
+      toast.error('Failed to import repository');
+      setLoading(false);
+      window.location.href = '/';
+    });
     setImported(true);
   }, [searchParams, historyReady, gitReady, imported]);
 
-  return <ClientOnly fallback={<BaseChat />}>{() => <Chat />}</ClientOnly>;
+  return (
+    <ClientOnly fallback={<BaseChat />}>
+      {() => (
+        <>
+          <Chat />
+          {loading && <LoadingOverlay message="Please wait while we clone the repository..." />}
+        </>
+      )}
+    </ClientOnly>
+  );
 }

app/components/ui/LoadingOverlay.tsx

@@ -0,0 +1,14 @@
+export const LoadingOverlay = ({ message = 'Loading...' }) => {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50 backdrop-blur-sm">
+      {/* Loading content */}
+      <div className="relative flex flex-col items-center gap-4 p-8 rounded-lg bg-bolt-elements-background-depth-2 shadow-lg">
+        <div
+          className={'i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress'}
+          style={{ fontSize: '2rem' }}
+        ></div>
+        <p className="text-lg text-bolt-elements-textTertiary">{message}</p>
+      </div>
+    </div>
+  );
+};

app/routes/git.tsx

@@ -4,6 +4,7 @@ import { ClientOnly } from 'remix-utils/client-only';
 import { BaseChat } from '~/components/chat/BaseChat';
 import { GitUrlImport } from '~/components/git/GitUrlImport.client';
 import { Header } from '~/components/header/Header';
+import BackgroundRays from '~/components/ui/BackgroundRays';
 
 export const meta: MetaFunction = () => {
   return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }];
@@ -15,7 +16,8 @@ export async function loader(args: LoaderFunctionArgs) {
 
 export default function Index() {
   return (
-    <div className="flex flex-col h-full w-full">
+    <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
+      <BackgroundRays />
       <Header />
       <ClientOnly fallback={<BaseChat />}>{() => <GitUrlImport />}</ClientOnly>
     </div>