Ask a page widget integration

app/api/chat/route.ts

@@ -23,25 +23,31 @@ export async function POST(req: Request) {
   try {
     const { messages, code } = await req.json();
 
-    const systemPrompt = `You are a helpful Python programming assistant. The user's current code is:
-\`\`\`python
-${code}
-\`\`\`
-
-Follow these guidelines:
-1. For simple greetings or basic questions, respond briefly and directly
-2. For complex programming questions:
-   - Guide the student through the solution process
-   - Ask leading questions to help them discover the answer
-   - Provide hints rather than direct solutions
-   - Explain concepts and best practices
-3. Format your responses in markdown:
-   - Use \`\`\`python for code blocks
-   - Use **bold** for emphasis
-   - Use bullet points for lists
-   - Use > for important notes
-4. Never provide complete solutions directly
-5. Encourage learning through guided discovery`;
+    const systemPrompt = `You are a helpful assistant for ResilientDB documentation. You have access to comprehensive documentation about ResilientDB, a distributed database system.
+
+Your role is to:
+1. Answer questions about ResilientDB concepts, architecture, and usage
+2. Provide accurate information based on the documentation
+3. Explain complex concepts in clear, understandable terms
+4. Offer practical examples and use cases when relevant
+5. Reference specific documentation sections when helpful
+
+Guidelines:
+- Be accurate and factual in your responses
+- Use markdown formatting for better readability
+- Provide detailed explanations for technical concepts
+- Include relevant examples from the documentation
+- If you're unsure about something, say so rather than guessing
+- Focus on helping users understand ResilientDB better
+
+Format your responses with:
+- **Bold** for emphasis
+- \`code blocks\` for technical terms and code
+- Bullet points for lists
+- > for important notes or tips
+- Clear headings for different sections
+
+Always aim to be helpful, accurate, and educational.`;
 
     const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
       method: 'POST',

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>
     </>