Integrate Pagefind search functionality; update package dependencies to version 1.4.0; enhance global styles for search components; refactor SearchBar to utilize PagefindSearch component; improve documentation chapter titles for clarity.

Author: harish876

app/global.css

@@ -218,4 +218,61 @@
     opacity: 0.8;
     pointer-events: none;
   }
+
+  /* Custom Pagefind Search Styles */
+  .pagefind-search {
+    position: relative;
+    z-index: 10000;
+  }
+
+  .pagefind-search-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    z-index: 10000;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 10vh;
+  }
+
+  .pagefind-search-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    min-width: 600px;
+    max-width: 90vw;
+    max-height: 80vh;
+    overflow: hidden;
+  }
+
+  .pagefind-search-input {
+    background: transparent;
+    border: none;
+    outline: none;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 16px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .pagefind-search-result {
+    padding: 16px 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .pagefind-search-result:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .pagefind-search-result:last-child {
+    border-bottom: none;
+  }
 }

app/search/page.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { PagefindSearch } from '../../components/SearchBar/PagefindSearch';
+
+export default function SearchPage() {
+  return (
+    <div style={{ 
+      minHeight: '100vh', 
+      background: 'transparent',
+      padding: '20px'
+    }}>
+      <div style={{ maxWidth: 800, margin: '0 auto' }}>
+        <h1 style={{ 
+          color: 'rgba(255, 255, 255, 0.9)', 
+          marginBottom: '20px',
+          fontSize: '2rem',
+          fontWeight: 600
+        }}>
+          Search Documentation
+        </h1>
+        <PagefindSearch />
+      </div>
+    </div>
+  );
+}

components/FloatingAssistant.tsx

@@ -47,7 +47,7 @@ export function FloatingAssistant() {
   const [isAskingQuestion, setIsAskingQuestion] = useState(false);
   const [debounceTimer, setDebounceTimer] = useState<NodeJS.Timeout | null>(null);
   const [lastSelection, setLastSelection] = useState('');
-  const [highlightMode, setHighlightMode] = useState(true);
+  const [highlightMode, setHighlightMode] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
 
   // Function to check if element is within a code editor
@@ -185,6 +185,17 @@ Please:
     setQuestion('');
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (question.trim()) {
+        setIsAskingQuestion(true);
+        getExplanation(selectedText || '', question);
+        setQuestion('');
+      }
+    }
+  };
+
   return (
     <>
       <div
@@ -684,6 +695,7 @@ Please:
                     : "Ask any question..."}
                   value={question}
                   onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setQuestion(e.target.value)}
+                  onKeyDown={handleKeyDown}
                   style={{ flex: 1 }}
                   disabled={isLoading}
                   autosize

components/MantineNavBar/MantineNavBar.tsx

@@ -20,7 +20,7 @@ export const MantineNavBar = () => {
   return (
     <>
       <MantineNextraThemeObserver />
-      <Box style={{ position: 'sticky', top: 0, zIndex: 50 }}>
+      <Box>
         <Header />
       </Box>
     </>