@brainfish-ai/devdoc 0.1.26 → 0.1.28

package/renderer/components/docs-viewer/content/not-found-page.tsx

@@ -0,0 +1,330 @@
+'use client'
+
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { FileX, House, ArrowLeft, MagnifyingGlass, Spinner } from '@phosphor-icons/react'
+import { Button } from '@/components/ui/button'
+import { useDocsNavigation } from '@/lib/docs-navigation-context'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { useCodeCopy } from '@/hooks/use-code-copy'
+
+// Import MDX components for custom 404 pages
+import {
+  Note,
+  Warning,
+  Info,
+  Tip,
+  Check,
+  Error as ErrorCallout,
+  Callout,
+  Card,
+  CardGroup,
+  Accordion,
+  AccordionGroup,
+  Steps,
+  Step,
+  Tabs,
+  Tab,
+  CodeGroup,
+  Frame,
+  Columns,
+  Snippet,
+  Latex,
+  ParamField,
+  ResponseField,
+  Expandable,
+  Iframe,
+  Video,
+  Loom,
+  Image,
+  Screenshot,
+  Logo,
+  Icon,
+  Highlight,
+  Marker,
+  Underline,
+  Badge,
+  Mermaid,
+  PDF,
+  Audio,
+  Download,
+  Hero,
+  Pre,
+  Tagline,
+  Headline,
+  Description,
+  CommandBox,
+  Section,
+  Center,
+  FeatureGrid,
+  FeatureItem,
+  ButtonLink,
+  Spacer,
+  Divider,
+} from '../../docs/mdx/index'
+
+// MDX components mapping for custom 404 pages
+const mdxComponents = {
+  Note,
+  Warning,
+  Info,
+  Tip,
+  Check,
+  Error: ErrorCallout,
+  Callout,
+  Card,
+  CardGroup,
+  Accordion,
+  AccordionGroup,
+  Steps,
+  Step,
+  Tabs,
+  Tab,
+  CodeGroup,
+  Frame,
+  Columns,
+  Snippet,
+  Latex,
+  ParamField,
+  ResponseField,
+  Expandable,
+  Iframe,
+  Video,
+  Loom,
+  Image,
+  Screenshot,
+  Logo,
+  Icon,
+  Highlight,
+  Marker,
+  Underline,
+  Badge,
+  Mermaid,
+  PDF,
+  Audio,
+  Download,
+  Hero,
+  Pre,
+  Tagline,
+  Headline,
+  Description,
+  CommandBox,
+  Section,
+  Center,
+  FeatureGrid,
+  FeatureItem,
+  ButtonLink,
+  Spacer,
+  Divider,
+}
+
+interface NotFoundPageProps {
+  slug?: string
+  onGoBack?: () => void
+  onSearch?: () => void
+}
+
+interface Custom404Data {
+  frontmatter: {
+    title?: string
+    description?: string
+    mode?: 'default' | 'wide' | 'custom'
+    hideHeader?: boolean
+    background?: string
+  }
+  mdxSource: MDXRemoteSerializeResult
+}
+
+export function NotFoundPage({ slug, onGoBack, onSearch }: NotFoundPageProps) {
+  const docsNav = useDocsNavigation()
+  const [customPage, setCustomPage] = useState<Custom404Data | null>(null)
+  const [loading, setLoading] = useState(true)
+  const contentRef = useRef<HTMLDivElement>(null)
+  
+  // Add copy buttons to code blocks after content loads
+  useCodeCopy(contentRef, [customPage])
+  
+  // Try to load custom 404.mdx page
+  useEffect(() => {
+    async function loadCustom404() {
+      try {
+        const response = await fetch('/api/docs?slug=404&is404=true')
+        if (response.ok) {
+          const data = await response.json()
+          setCustomPage(data)
+        }
+      } catch {
+        // No custom 404 page, use default
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadCustom404()
+  }, [])
+  
+  const handleGoHome = useCallback(() => {
+    // Navigate to the first page of the current tab or just switch to first tab
+    if (docsNav?.switchToTab) {
+      window.location.hash = ''
+      window.location.reload()
+    } else {
+      window.location.hash = ''
+    }
+  }, [docsNav])
+  
+  const handleGoBack = useCallback(() => {
+    if (onGoBack) {
+      onGoBack()
+    } else {
+      window.history.back()
+    }
+  }, [onGoBack])
+  
+  // Show loading state briefly while checking for custom 404
+  if (loading) {
+    return (
+      <div className="docs-page docs-page-not-found w-full min-h-[200px]">
+        <div className="flex items-center justify-center py-12">
+          <Spinner className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    )
+  }
+  
+  // Render custom 404 page if available
+  if (customPage) {
+    const { mode = 'default', hideHeader, background } = customPage.frontmatter
+    const isCustomMode = mode === 'custom'
+    const showHeader = !hideHeader && !isCustomMode
+    
+    // Custom mode: Full-width layout
+    if (isCustomMode) {
+      return (
+        <div 
+          ref={contentRef}
+          className="docs-page docs-page-not-found docs-content w-full min-h-full"
+          style={{ background: background || 'var(--background)' }}
+        >
+          <div className="docs-custom-content [&>*]:w-full">
+            <MDXRemote {...customPage.mdxSource} components={mdxComponents} />
+          </div>
+        </div>
+      )
+    }
+    
+    // Default mode with optional header
+    const containerClass = mode === 'wide' ? 'max-w-6xl' : 'max-w-4xl'
+    
+    return (
+      <div ref={contentRef} className={`docs-page docs-page-not-found docs-content ${containerClass} mx-auto px-4 py-6 sm:px-8 sm:py-8`}>
+        {showHeader && customPage.frontmatter.title && (
+          <div className="docs-page-header mb-6">
+            <h1 className="docs-content-title text-2xl sm:text-3xl font-bold mb-2 text-foreground">
+              {customPage.frontmatter.title}
+            </h1>
+            {customPage.frontmatter.description && (
+              <p className="docs-content-description text-lg text-muted-foreground">
+                {customPage.frontmatter.description}
+              </p>
+            )}
+          </div>
+        )}
+        <div className="docs-prose prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground">
+          <MDXRemote {...customPage.mdxSource} components={mdxComponents} />
+        </div>
+        
+        {/* Always show navigation actions for custom 404 */}
+        <div className="mt-8 pt-6 border-t border-border">
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
+            <Button variant="outline" size="sm" onClick={handleGoBack} className="gap-2 min-w-[120px]">
+              <ArrowLeft className="w-4 h-4" />
+              Go back
+            </Button>
+            <Button variant="default" size="sm" onClick={handleGoHome} className="gap-2 min-w-[120px]">
+              <House className="w-4 h-4" />
+              Go home
+            </Button>
+            {onSearch && (
+              <Button variant="outline" size="sm" onClick={onSearch} className="gap-2 min-w-[120px]">
+                <MagnifyingGlass className="w-4 h-4" />
+                Search
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
+  // Default 404 page
+  return (
+    <div className="docs-page docs-page-not-found w-full min-h-[calc(100vh-200px)] flex items-center justify-center">
+      <div className="text-center px-4 py-12 max-w-md mx-auto">
+        {/* Icon */}
+        <div className="mb-6">
+          <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-muted/50 text-muted-foreground">
+            <FileX className="w-10 h-10" weight="light" />
+          </div>
+        </div>
+        
+        {/* Title */}
+        <h1 className="text-2xl font-semibold text-foreground mb-2">
+          Page not found
+        </h1>
+        
+        {/* Description */}
+        <p className="text-muted-foreground mb-2">
+          The page you&apos;re looking for doesn&apos;t exist or has been moved.
+        </p>
+        
+        {/* Show the slug that wasn't found */}
+        {slug && (
+          <p className="text-sm text-muted-foreground/70 mb-6 font-mono bg-muted/30 px-3 py-1.5 rounded-md inline-block">
+            /{slug}
+          </p>
+        )}
+        
+        {!slug && <div className="mb-6" />}
+        
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleGoBack}
+            className="gap-2 min-w-[120px]"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Go back
+          </Button>
+          
+          <Button
+            variant="default"
+            size="sm"
+            onClick={handleGoHome}
+            className="gap-2 min-w-[120px]"
+          >
+            <House className="w-4 h-4" />
+            Go home
+          </Button>
+          
+          {onSearch && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSearch}
+              className="gap-2 min-w-[120px]"
+            >
+              <MagnifyingGlass className="w-4 h-4" />
+              Search
+            </Button>
+          )}
+        </div>
+        
+        {/* Help text */}
+        <p className="text-xs text-muted-foreground/60 mt-8">
+          If you believe this is an error, please check the URL or contact the documentation maintainer.
+        </p>
+      </div>
+    </div>
+  )
+}

package/renderer/components/docs-viewer/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useCallback, useRef } from 'react'
 import { Spinner } from '@phosphor-icons/react'
 import type { BrainfishCollection, BrainfishRESTRequest, BrainfishDocGroup } from '@/lib/api-docs/types'
 import { DocsSidebar } from './sidebar'
+import { NotFoundPage } from './content/not-found-page'
 import { ApiPlayground } from './playground'
 import type { DebugContext } from './playground/response-viewer'
 import { RightSidebar } from './sidebar/right-sidebar'
@@ -391,6 +392,7 @@ function DocsContent() {
   const [isVersionLoading, setIsVersionLoading] = useState(false) // For version switch only
   const [error, setError] = useState<string | null>(null)
   const [showAuthModal, setShowAuthModal] = useState(false)
+  const [notFoundSlug, setNotFoundSlug] = useState<string | null>(null) // Track 404 for invalid URLs
   
   // Prefill context for agent
   const { setPrefill } = usePlaygroundPrefill()
@@ -481,13 +483,16 @@ function DocsContent() {
         setSelectedRequest(request)
         setSelectedDocSection(null)
         setSelectedDocPage(null)
+        setNotFoundSlug(null)
       } else {
-        // Endpoint not found - clear selection
+        // Endpoint not found - show 404 page
         setSelectedRequest(null)
         setSelectedDocSection(null)
         setSelectedDocPage(null)
+        setNotFoundSlug(`endpoint/${actualId}`)
       }
     } else if (actualType === 'page' && actualId) {
+      setNotFoundSlug(null) // Clear not found state - DocPage handles its own 404
       setSelectedDocPage(actualId)
       setSelectedRequest(null)
       setSelectedDocSection(null)
@@ -515,6 +520,7 @@ function DocsContent() {
     setSelectedRequest(request)
     setSelectedDocSection(null)
     setSelectedDocPage(null)
+    setNotFoundSlug(null) // Clear 404 state when selecting an endpoint
     updateUrlHash(`endpoint/${request.id}`)
     // Reset tab navigation so the new endpoint can determine its default tab
     resetNavigation()
@@ -527,6 +533,7 @@ function DocsContent() {
     setSelectedDocSection(isIntro ? null : headingId)
     setSelectedRequest(null)
     setSelectedDocPage(null)
+    setNotFoundSlug(null) // Clear 404 state
     
     updateUrlHash(isIntro ? '' : `doc/${headingId}`)
     
@@ -599,6 +606,7 @@ function DocsContent() {
     setSelectedDocPage(pageSlug)
     setSelectedRequest(null)
     setSelectedDocSection(null)
+    setNotFoundSlug(null) // Clear 404 state
     updateUrlHash(`page/${pageSlug}`, targetTab)
     switchToDocs()
     
@@ -1162,6 +1170,7 @@ function DocsContent() {
         selectedApiVersion={selectedApiVersion}
         handleApiVersionChange={handleApiVersionChange}
         isVersionLoading={isVersionLoading}
+        notFoundSlug={notFoundSlug}
       />
     </NavigationProvider>
   )
@@ -1193,6 +1202,7 @@ interface DocsWithModeProps {
   selectedApiVersion: string | null
   handleApiVersionChange: (version: string) => void
   isVersionLoading: boolean
+  notFoundSlug: string | null
 }
 
 // Mode toggle tabs - switches between Docs, API Client, and Notes
@@ -1268,6 +1278,7 @@ function DocsWithMode({
   selectedApiVersion,
   handleApiVersionChange,
   isVersionLoading,
+  notFoundSlug,
 }: DocsWithModeProps) {
   const { mode, switchToDocs } = useModeContext()
   const { setTheme } = useTheme()
@@ -1562,7 +1573,9 @@ function DocsWithMode({
                 ) : selectedRequest ? (
                   <RequestDetails request={selectedRequest} />
                 ) : selectedDocPage ? (
-                  <DocPage slug={selectedDocPage} />
+                  <DocPage slug={selectedDocPage} onSearch={openSearch} />
+                ) : notFoundSlug ? (
+                  <NotFoundPage slug={notFoundSlug} onSearch={openSearch} />
                 ) : (
                   <div className="flex-1 flex items-center justify-center bg-background">
                     <div className="text-center text-muted-foreground">