feat: confirmation dialog for deeplinks (#783)

ui/desktop/src/App.tsx

@@ -4,23 +4,74 @@ import { useNavigate } from 'react-router-dom';
 import LauncherWindow from './LauncherWindow';
 import ChatWindow from './ChatWindow';
 import ErrorScreen from './components/ErrorScreen';
+import { ConfirmationModal } from './components/ui/ConfirmationModal';
 import 'react-toastify/dist/ReactToastify.css';
 import { ToastContainer } from 'react-toastify';
 import { ModelProvider } from './components/settings/models/ModelContext';
 import { ActiveKeysProvider } from './components/settings/api_keys/ActiveKeysContext';
+import { extractExtensionName } from './components/settings/extensions/utils';
 
 export default function App() {
   const [fatalError, setFatalError] = useState<string | null>(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [pendingLink, setPendingLink] = useState<string | null>(null);
+  const [modalMessage, setModalMessage] = useState<string>('');
+  const [isInstalling, setIsInstalling] = useState(false); // Track installation progress
   const searchParams = new URLSearchParams(window.location.search);
   const isLauncher = searchParams.get('window') === 'launcher';
   const navigate = useNavigate();
 
+  // Utility function to extract the command from the link
+  function extractCommand(link: string): string {
+    const url = new URL(link);
+    const cmd = url.searchParams.get('cmd') || 'Unknown Command';
+    const args = url.searchParams.getAll('arg').map(decodeURIComponent);
+    return `${cmd} ${args.join(' ')}`.trim(); // Combine the command and arguments
+  }
+
   useEffect(() => {
-    window.electron.on('add-extension', (_, link) => {
+    const handleAddExtension = (_, link: string) => {
+      const command = extractCommand(link); // Extract and format the command
+      const extName = extractExtensionName(link);
       window.electron.logInfo(`Adding extension from deep link ${link}`);
-      addExtensionFromDeepLink(link, navigate);
-    });
-  }, [navigate]);
+      setPendingLink(link); // Save the link for later use
+      setModalMessage(
+        `Are you sure you want to install the ${extName} extension?\n\nCommand: ${command}`
+      ); // Display command
+      setModalVisible(true); // Show confirmation modal
+    };
+
+    window.electron.on('add-extension', handleAddExtension);
+
+    return () => {
+      // Clean up the event listener when the component unmounts
+      window.electron.off('add-extension', handleAddExtension);
+    };
+  }, []);
+
+  const handleConfirm = async () => {
+    if (pendingLink && !isInstalling) {
+      setIsInstalling(true); // Disable further attempts
+      console.log('Confirming installation for link:', pendingLink);
+
+      try {
+        await addExtensionFromDeepLink(pendingLink, navigate); // Proceed with adding the extension
+      } catch (error) {
+        console.error('Failed to add extension:', error);
+      } finally {
+        // Always reset states
+        setModalVisible(false);
+        setPendingLink(null);
+        setIsInstalling(false);
+      }
+    }
+  };
+
+  const handleCancel = () => {
+    console.log('Cancelled extension installation.');
+    setModalVisible(false);
+    setPendingLink(null); // Clear the link if the user cancels
+  };
 
   useEffect(() => {
     const handleFatalError = (_: any, errorMessage: string) => {
@@ -40,17 +91,29 @@ export default function App() {
   }
 
   return (
-    <ModelProvider>
-      <ActiveKeysProvider>
-        {isLauncher ? <LauncherWindow /> : <ChatWindow />}
-        <ToastContainer
-          aria-label="Toast notifications"
-          position="top-right"
-          autoClose={3000}
-          closeOnClick
-          pauseOnHover
+    <>
+      {modalVisible && (
+        <ConfirmationModal
+          isOpen={modalVisible}
+          title="Confirm Extension Installation"
+          message={modalMessage}
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          isSubmitting={isInstalling}
         />
-      </ActiveKeysProvider>
-    </ModelProvider>
+      )}
+      <ModelProvider>
+        <ActiveKeysProvider>
+          {isLauncher ? <LauncherWindow /> : <ChatWindow />}
+          <ToastContainer
+            aria-label="Toast notifications"
+            position="top-right"
+            autoClose={3000}
+            closeOnClick
+            pauseOnHover
+          />
+        </ActiveKeysProvider>
+      </ModelProvider>
+    </>
   );
 }

ui/desktop/src/components/settings/extensions/utils.tsx

@@ -0,0 +1,14 @@
+export function extractCommand(link: string): string {
+  const url = new URL(link);
+  const cmd = url.searchParams.get('cmd') || 'Unknown Command';
+  const args = url.searchParams.getAll('arg').map(decodeURIComponent);
+
+  // Combine the command and its arguments into a reviewable format
+  return `${cmd} ${args.join(' ')}`.trim();
+}
+
+export function extractExtensionName(link: string): string {
+  const url = new URL(link);
+  const name = url.searchParams.get('name');
+  return name ? decodeURIComponent(name) : 'Unknown Extension';
+}

ui/desktop/src/components/ui/BaseModal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Card } from './card';
+
+export function BaseModal({
+  isOpen,
+  title,
+  children,
+  actions,
+  onClose,
+}: {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  actions: React.ReactNode; // Buttons for actions
+  onClose: () => void;
+}) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[9999]">
+      <Card className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[440px] bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-[16px] pt-[24px] pb-0">
+        <div className="px-8 pb-0 space-y-8">
+          {/* Header */}
+          <div className="flex">
+            <h2 className="text-2xl font-regular dark:text-white text-gray-900">{title}</h2>
+          </div>
+
+          {/* Content */}
+          {children && <div className="px-8">{children}</div>}
+
+          {/* Actions */}
+          <div className="mt-[8px] ml-[-24px] mr-[-24px] pt-[16px]">{actions}</div>
+        </div>
+      </Card>
+    </div>
+  );
+}

ui/desktop/src/components/ui/ConfirmationModal.tsx

@@ -0,0 +1,50 @@
+import { BaseModal } from './BaseModal';
+import React from 'react';
+
+export function ConfirmationModal({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmLabel = 'Yes',
+  cancelLabel = 'No',
+  isSubmitting = false,
+}: {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  isSubmitting?: boolean; // To handle debounce state
+}) {
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      title={title}
+      onClose={onCancel}
+      actions={
+        <>
+          <button
+            onClick={onConfirm}
+            disabled={isSubmitting}
+            className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 dark:border-gray-600 text-lg font-regular"
+          >
+            {isSubmitting ? 'Processing...' : confirmLabel}
+          </button>
+          <button
+            onClick={onCancel}
+            disabled={isSubmitting}
+            className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-gray-400 text-lg font-regular hover:bg-gray-50"
+          >
+            {cancelLabel}
+          </button>
+        </>
+      }
+    >
+      <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap">{message}</p>
+    </BaseModal>
+  );
+}