From b304749b21f340e03c94abc0cc91ccf82f559195 Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Sun, 8 Dec 2024 22:53:20 +0530
Subject: [PATCH 1/5] added backdrop and loading screen

---
 app/components/git/GitUrlImport.client.tsx | 21 +++++-
 app/components/ui/LoadingOverlay.tsx       | 14 ++++
 app/components/ui/Settings.tsx             | 75 +++++++++++++---------
 app/components/ui/SettingsSlider.tsx       |  6 +-
 4 files changed, 81 insertions(+), 35 deletions(-)
 create mode 100644 app/components/ui/LoadingOverlay.tsx

diff --git a/app/components/git/GitUrlImport.client.tsx b/app/components/git/GitUrlImport.client.tsx
index cbdeaa5..c2c949e 100644
--- a/app/components/git/GitUrlImport.client.tsx
+++ b/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>
+  );
 }
diff --git a/app/components/ui/LoadingOverlay.tsx b/app/components/ui/LoadingOverlay.tsx
new file mode 100644
index 0000000..6c69798
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/app/components/ui/Settings.tsx b/app/components/ui/Settings.tsx
index 109163d..58295eb 100644
--- a/app/components/ui/Settings.tsx
+++ b/app/components/ui/Settings.tsx
@@ -10,7 +10,6 @@ import { toast } from 'react-toastify';
 import { useNavigate } from '@remix-run/react';
 import commit from '~/commit.json';
 import Cookies from 'js-cookie';
-import { SettingsSlider } from './SettingsSlider';
 import '~/styles/components/SettingsSlider.scss';
 import '~/styles/components/Settings.scss';
 
@@ -219,9 +218,7 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                   <button
                     key={tab.id}
                     onClick={() => setActiveTab(tab.id)}
-                    className={classNames(
-                      activeTab === tab.id ? 'active' : ''
-                    )}
+                    className={classNames(activeTab === tab.id ? 'active' : '')}
                   >
                     <div className={tab.icon} />
                     {tab.label}
@@ -250,7 +247,9 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
               </div>
 
               <div className="flex-1 flex flex-col p-8 bg-gray-50 dark:bg-gray-800">
-                <DialogTitle className="flex-shrink-0 text-lg font-semibold text-bolt-elements-textPrimary">Settings</DialogTitle>
+                <DialogTitle className="flex-shrink-0 text-lg font-semibold text-bolt-elements-textPrimary">
+                  Settings
+                </DialogTitle>
                 <div className="flex-1 overflow-y-auto">
                   {activeTab === 'chat-history' && (
                     <div className="p-4">
@@ -304,14 +303,20 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                                 checked={provider.isEnabled}
                                 onChange={() => handleToggleProvider(provider.name)}
                               />
-                              <div className={classNames(
-                                'settings-toggle__track',
-                                provider.isEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled'
-                              )}></div>
-                              <div className={classNames(
-                                'settings-toggle__thumb',
-                                provider.isEnabled ? 'settings-toggle__thumb--enabled' : ''
-                              )}></div>
+                              <div
+                                className={classNames(
+                                  'settings-toggle__track',
+                                  provider.isEnabled
+                                    ? 'settings-toggle__track--enabled'
+                                    : 'settings-toggle__track--disabled',
+                                )}
+                              ></div>
+                              <div
+                                className={classNames(
+                                  'settings-toggle__thumb',
+                                  provider.isEnabled ? 'settings-toggle__thumb--enabled' : '',
+                                )}
+                              ></div>
                             </label>
                           </div>
                           {/* Base URL input for configurable providers */}
@@ -343,14 +348,18 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                             checked={isDebugEnabled}
                             onChange={() => setIsDebugEnabled(!isDebugEnabled)}
                           />
-                          <div className={classNames(
-                            'settings-toggle__track',
-                            isDebugEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled'
-                          )}></div>
-                          <div className={classNames(
-                            'settings-toggle__thumb',
-                            isDebugEnabled ? 'settings-toggle__thumb--enabled' : ''
-                          )}></div>
+                          <div
+                            className={classNames(
+                              'settings-toggle__track',
+                              isDebugEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled',
+                            )}
+                          ></div>
+                          <div
+                            className={classNames(
+                              'settings-toggle__thumb',
+                              isDebugEnabled ? 'settings-toggle__thumb--enabled' : '',
+                            )}
+                          ></div>
                         </label>
                       </div>
                     </div>
@@ -367,14 +376,18 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                             checked={isJustSayEnabled}
                             onChange={() => setIsJustSayEnabled(!isJustSayEnabled)}
                           />
-                          <div className={classNames(
-                            'settings-toggle__track',
-                            isJustSayEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled'
-                          )}></div>
-                          <div className={classNames(
-                            'settings-toggle__thumb',
-                            isJustSayEnabled ? 'settings-toggle__thumb--enabled' : ''
-                          )}></div>
+                          <div
+                            className={classNames(
+                              'settings-toggle__track',
+                              isJustSayEnabled ? 'settings-toggle__track--enabled' : 'settings-toggle__track--disabled',
+                            )}
+                          ></div>
+                          <div
+                            className={classNames(
+                              'settings-toggle__thumb',
+                              isJustSayEnabled ? 'settings-toggle__thumb--enabled' : '',
+                            )}
+                          ></div>
                         </label>
                       </div>
                     </div>
@@ -408,7 +421,9 @@ export const Settings = ({ open, onClose }: SettingsProps) => {
                       <ul>
                         <li className="text-bolt-elements-textSecondary">Ollama: {process.env.REACT_APP_OLLAMA_URL}</li>
                         <li className="text-bolt-elements-textSecondary">OpenAI: {process.env.REACT_APP_OPENAI_URL}</li>
-                        <li className="text-bolt-elements-textSecondary">LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}</li>
+                        <li className="text-bolt-elements-textSecondary">
+                          LM Studio: {process.env.REACT_APP_LM_STUDIO_URL}
+                        </li>
                       </ul>
 
                       <h4 className="text-md font-medium text-bolt-elements-textPrimary mt-4">Version Information</h4>
diff --git a/app/components/ui/SettingsSlider.tsx b/app/components/ui/SettingsSlider.tsx
index 4cc4dcc..e5a3f88 100644
--- a/app/components/ui/SettingsSlider.tsx
+++ b/app/components/ui/SettingsSlider.tsx
@@ -27,7 +27,7 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
       <motion.div
         className={classNames(
           'settings-slider__thumb',
-          isLeftSelected ? 'settings-slider__thumb--left' : 'settings-slider__thumb--right'
+          isLeftSelected ? 'settings-slider__thumb--left' : 'settings-slider__thumb--right',
         )}
         initial={false}
         animate={{
@@ -44,7 +44,7 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
         onClick={() => setSelected?.(options.left.value)}
         className={classNames(
           'settings-slider__button',
-          isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected'
+          isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected',
         )}
       >
         {options.left.text}
@@ -53,7 +53,7 @@ export const SettingsSlider = memo(<T,>({ selected, options, setSelected }: Sett
         onClick={() => setSelected?.(options.right.value)}
         className={classNames(
           'settings-slider__button',
-          !isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected'
+          !isLeftSelected ? 'settings-slider__button--selected' : 'settings-slider__button--unselected',
         )}
       >
         {options.right.text}

From e3bdd6944be8e4b4a6bb6c81f569fb3d5f444942 Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Fri, 13 Dec 2024 00:58:02 +0530
Subject: [PATCH 2/5] added prompt url params

---
 app/components/chat/Chat.client.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index cd651cb..5d523c9 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/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',
@@ -93,6 +94,7 @@ export const ChatImpl = memo(
     const [uploadedFiles, setUploadedFiles] = useState<File[]>([]); // Move here
     const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
     const { activeProviders } = useSettings();
+    const [searchParams, setSearchParams] = useSearchParams();
 
     const [model, setModel] = useState(() => {
       const savedModel = Cookies.get('selectedModel');
@@ -126,6 +128,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();

From 0a2e0f2f3a0aae681cfb9de918d4a65003d7257b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Dec 2024 18:38:04 +0000
Subject: [PATCH 3/5] chore: update commit hash to
 43e1f436f57fc4adb43b5481b403967803d4786d

---
 app/commit.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/commit.json b/app/commit.json
index 060af13..f6de645 100644
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "e3bdd6944be8e4b4a6bb6c81f569fb3d5f444942" }
+{ "commit": "43e1f436f57fc4adb43b5481b403967803d4786d" , "version": "0.0.1" }

From bf76a0b2e765d824ae08d24d4659f28b3aa4b78d Mon Sep 17 00:00:00 2001
From: Anirban Kar <thecodacus@gmail.com>
Date: Tue, 17 Dec 2024 00:14:42 +0530
Subject: [PATCH 4/5] added UI fix for loading screen

---
 app/commit.json    | 2 +-
 app/routes/git.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/commit.json b/app/commit.json
index 1bdbb28..520ad7e 100644
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "b304749b21f340e03c94abc0cc91ccf82f559195" }
+{ "commit": "7e650af56926d88f03e543c38d2f25280e10baa3" }
diff --git a/app/routes/git.tsx b/app/routes/git.tsx
index aa1689a..5793e22 100644
--- a/app/routes/git.tsx
+++ b/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>

From 7a0223d21a2b64e3f6e1fc6d0fd06f36c349c2bf Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 16 Dec 2024 18:46:41 +0000
Subject: [PATCH 5/5] chore: update commit hash to
 0a4ef117ae5d3687b04415e64a22794ea55841d1

---
 app/commit.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/commit.json b/app/commit.json
index 6b30ae8..1310172 100644
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "43e1f436f57fc4adb43b5481b403967803d4786d" , "version": "0.0.1" }
\ No newline at end of file
+{ "commit": "0a4ef117ae5d3687b04415e64a22794ea55841d1" , "version": "0.0.1" }