[MLC-29] Index loading spinner, auto-focus, auto recenter, finish redux setup

app/main/main.ts

@@ -250,6 +250,7 @@ app.whenReady().then(() => {
     win.setBounds({
       height: arg.height,
     });
+    win.center();
   });
 
   createSplashScreen();

app/package.json

@@ -23,6 +23,11 @@
     "lint": "npx eslint --max-warnings 0 --ext=.ts ."
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
@@ -47,6 +52,7 @@
     "react-dom": "18.2.0",
     "react-redux": "^9.1.0",
     "react-resizable-panels": "^2.0.11",
+    "rxjs": "^7.8.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.7",

app/src/app/layout.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import StoreProvider from '../AppProvider';
 import './globals.css';
 
 export default function RootLayout({
@@ -15,7 +16,9 @@ export default function RootLayout({
           userSelect: 'none',
         }}
       >
-        {children}
+        <StoreProvider>
+          {children}
+        </StoreProvider>
       </body>
     </html>
   );

app/src/app/page.tsx

@@ -7,11 +7,20 @@ import React, {
 import Chat from '../components/chat/Chat';
 import SelectDirectory from '../components/options/SelectDirectory';
 import SelectModel from '../components/options/SelectModel';
+import {
+  useAppDispatch,
+} from '../lib/hooks';
+import {
+  startDirectoryIndexing,
+  stopDirectoryIndexing,
+} from '../lib/store';
 
 export default function Home() {
   const [selectedDirectory, setSelectedDirectory] = useState<string | null>(null);
   const [selectedModel, setSelectedModel] = useState<string | null>(null);
 
+  const dispatch = useAppDispatch();
+
   function handleOpen() {
     if (typeof window !== 'undefined') {
       window.electronAPI.selectDirectory();
@@ -22,6 +31,7 @@ export default function Home() {
     window.electronAPI.onSelectDirectory(async (customData) => {
       setSelectedDirectory(customData[0]);
       try {
+        dispatch(startDirectoryIndexing());
         await fetch('http://localhost:8080/api/index', {
           method: 'POST',
           headers: {
@@ -31,10 +41,12 @@ export default function Home() {
             directory: customData[0],
           }),
         });
+        dispatch(stopDirectoryIndexing());
         // TODO: spinner while indexing
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error('Error sending message: ', error);
+        dispatch(stopDirectoryIndexing());
       }
     });
   }, []);

app/src/components/chat/Chat.tsx

@@ -56,9 +56,9 @@ const Chat = () => {
       </div>
       <div
         className={cn(
-          'flex-grow min-w-full rounded-sm border-0 flex h-0',
+          'flex-grow min-w-full border-0 flex h-0',
           {
-            'border h-[400px]': chatHistory.length > 0,
+            'h-[400px]': chatHistory.length > 0,
           },
         )}
       >

app/src/components/chat/ChatInput.tsx

@@ -1,7 +1,11 @@
 import React, {
+  useEffect,
   useRef,
   useState,
 } from 'react';
+import {
+  useAppSelector,
+} from '../../lib/hooks';
 import {
   Input,
 } from '../ui/input';
@@ -23,6 +27,22 @@ const ChatInput = ({
     sendMessage(message);
   };
 
+  // detect website focus and focus the input
+  const handleFocus = () => {
+    if (document.activeElement !== inputRef.current) {
+      inputRef.current?.focus();
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('focus', handleFocus);
+    return () => {
+      window.removeEventListener('focus', handleFocus);
+    };
+  }, []);
+
+  const isDirectoryIndexing = useAppSelector((state) => state.isDirectoryIndexing);
+
   return (
     <div
       className='w-full py-2'
@@ -40,9 +60,10 @@ const ChatInput = ({
       <Input
         value={message}
         onChange={(e) => setMessage(e.target.value)}
-        placeholder='Enter prompt here'
+        placeholder={isDirectoryIndexing ? 'Indexing your files..' : 'Enter prompt here'}
         onKeyDown={handleSend}
         ref={inputRef}
+        disabled={isDirectoryIndexing}
         className={'text-xl border-0 focus-visible:outline-transparent focus-visible:ring-0 focus-visible:shadow-0 w-full shadow-0'}
         style={{
           // @ts-expect-error -- WebkitAppRegion is a valid property

app/src/components/options/SelectDirectory.tsx

@@ -1,4 +1,20 @@
-import React from 'react';
+import {
+  faCheckCircle,
+  faCircleNotch,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  FontAwesomeIcon,
+} from '@fortawesome/react-fontawesome';
+import React, {
+  useEffect,
+} from 'react';
+import {
+  useAppSelector,
+  usePrevious,
+} from '../../lib/hooks';
+import {
+  cn,
+} from '../../lib/utils';
 import {
   Button,
 } from '../ui/button';
@@ -13,14 +29,39 @@ const SelectDirectory = ({
   const shortenedDirectory = selectedDirectory
     ? `/${selectedDirectory.split('/')[1]}/../${selectedDirectory.split('/').pop()}`
     : 'Select Directory';
+  const [isCheckShowing, setIsCheckShowing] = React.useState(false);
+
+  const isDirectoryIndexing = useAppSelector((state) => state.isDirectoryIndexing);
+
+  const oldLoadingState = usePrevious(isDirectoryIndexing);
+
+  useEffect(() => {
+    if (oldLoadingState && !isDirectoryIndexing) {
+      setIsCheckShowing(true);
+      setTimeout(() => {
+        setIsCheckShowing(false);
+      }, 3000);
+    }
+  }, [isDirectoryIndexing]);
 
   return (
-    <Button
-      className='bg-transparent text-neutral-800 dark:text-white text-sm font-normal shadow-none hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-all border-0 border-zinc-600 w-fit rounded-md py-1 px-3 flex items-center cursor-pointer'
-      onClick={handleOpen}
-    >
-      {shortenedDirectory}
-    </Button>
+    <div className='flex'>
+      <Button
+        className={cn(
+          'bg-transparent text-neutral-800 dark:text-white text-sm font-normal shadow-none hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-all border-0 border-zinc-600 w-fit rounded-md py-1 px-3 flex items-center cursor-pointer',
+          {
+            'hover:bg-transparent dark:hover:bg-transparent cursor-default': isDirectoryIndexing,
+          },
+        )}
+        onClick={isDirectoryIndexing ? undefined : handleOpen}
+      >
+        <div className='pr-1'>
+          {isDirectoryIndexing && <FontAwesomeIcon className='animate-spin' icon={faCircleNotch} />}
+          {isCheckShowing && <FontAwesomeIcon className='text-green-500' icon={faCheckCircle} />}
+        </div>
+        {shortenedDirectory}
+      </Button>
+    </div>
   );
 };
 

app/src/components/ui/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     <input
       type={type}
       className={cn(
-        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-0 transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       ref={ref}

app/src/lib/hooks.ts

@@ -1,3 +1,7 @@
+import {
+  useEffect,
+  useRef,
+} from 'react';
 import {
   useDispatch,
   useSelector,
@@ -16,3 +20,11 @@ import type {
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 export const useAppStore: () => AppStore = useStore;
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}