@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/sidebar/endpoint-options.tsx

@@ -0,0 +1,316 @@
+'use client'
+
+import { useState } from 'react'
+import { CaretDown, CaretRight } from '@phosphor-icons/react'
+import { Badge } from '@/components/ui/badge'
+import type { BrainfishRESTRequest } from '@/lib/api-docs/types'
+import { MethodBadge } from '../shared/method-badge'
+import { MarkdownRenderer } from '../shared/markdown-renderer'
+import { CodeViewer } from '../playground/code-editor'
+import { ResponseSchema } from '../shared/schema-viewer'
+import { CodeSnippetCompact } from '../playground/code-snippet'
+
+interface EndpointOptionsSidebarProps {
+  request: BrainfishRESTRequest
+}
+
+interface CollapsibleSectionProps {
+  title: string
+  children: React.ReactNode
+  defaultOpen?: boolean
+}
+
+function CollapsibleSection({ title, children, defaultOpen = true }: CollapsibleSectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+
+  return (
+    <div className="border-b border-border">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors"
+      >
+        <span className="font-semibold text-sm">{title}</span>
+        {isOpen ? (
+          <CaretDown className="h-4 w-4 text-muted-foreground" weight="bold" />
+        ) : (
+          <CaretRight className="h-4 w-4 text-muted-foreground" weight="bold" />
+        )}
+      </button>
+      {isOpen && <div className="px-4 pb-4">{children}</div>}
+    </div>
+  )
+}
+
+export function EndpointOptionsSidebar({ request }: EndpointOptionsSidebarProps) {
+  return (
+    <div className="w-96 h-full border-l bg-muted/30 flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="p-4 border-b border-border bg-background">
+        <div className="flex items-center gap-2 mb-2">
+          <MethodBadge method={request.method} />
+          <h2 className="font-semibold text-lg truncate">{request.name}</h2>
+        </div>
+        <code className="text-xs text-muted-foreground font-mono break-all">
+          {request.endpoint}
+        </code>
+      </div>
+
+      {/* Scrollable Content */}
+      <div className="flex-1 overflow-y-auto bg-background">
+        {/* Code Snippet - First Section */}
+        <CodeSnippetCompact request={request} />
+
+        {/* Description */}
+        {request.description && (
+          <CollapsibleSection title="Description" defaultOpen={true}>
+            <div className="text-sm text-muted-foreground">
+              <MarkdownRenderer content={request.description} />
+            </div>
+          </CollapsibleSection>
+        )}
+
+        {/* Parameters */}
+        {request.params.length > 0 && (
+          <CollapsibleSection title="Parameters" defaultOpen={false}>
+            <div className="border rounded-sm overflow-hidden">
+              <table className="w-full text-sm">
+                <thead className="bg-muted/50">
+                  <tr>
+                    <th className="px-3 py-2 text-left text-xs font-semibold">Name</th>
+                    <th className="px-3 py-2 text-left text-xs font-semibold">Description</th>
+                    <th className="px-3 py-2 text-left text-xs font-semibold">Required</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {request.params.map((param) => (
+                    <tr key={param.key} className="border-t">
+                      <td className="px-3 py-2 font-mono text-xs">{param.key}</td>
+                      <td className="px-3 py-2 text-xs text-muted-foreground">
+                        {param.description || '-'}
+                      </td>
+                      <td className="px-3 py-2 text-xs">
+                        {param.active ? (
+                          <Badge variant="default" className="text-xs">Required</Badge>
+                        ) : (
+                          <span className="text-muted-foreground">Optional</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CollapsibleSection>
+        )}
+
+        {/* Headers */}
+        {request.headers.length > 0 && (
+          <CollapsibleSection title="Headers" defaultOpen={false}>
+            <div className="border rounded-sm overflow-hidden">
+              <table className="w-full text-sm">
+                <thead className="bg-muted/50">
+                  <tr>
+                    <th className="px-3 py-2 text-left text-xs font-semibold">Name</th>
+                    <th className="px-3 py-2 text-left text-xs font-semibold">Description</th>
+                    <th className="px-3 py-2 text-left text-xs font-semibold">Required</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {request.headers.map((header) => (
+                    <tr key={header.key} className="border-t">
+                      <td className="px-3 py-2 font-mono text-xs">{header.key}</td>
+                      <td className="px-3 py-2 text-xs text-muted-foreground">
+                        {header.description || '-'}
+                      </td>
+                      <td className="px-3 py-2 text-xs">
+                        {header.active ? (
+                          <Badge variant="default" className="text-xs">Required</Badge>
+                        ) : (
+                          <span className="text-muted-foreground">Optional</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </CollapsibleSection>
+        )}
+
+        {/* Authentication */}
+        {request.auth.authType !== 'none' && (
+          <CollapsibleSection title="Authentication" defaultOpen={false}>
+            <div className="border rounded-sm overflow-hidden">
+              {request.auth.authType === 'basic' && (
+                <>
+                  <div className="px-3 py-2 border-b bg-muted/30">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-sm">Basic Auth</span>
+                      <span className="text-xs text-orange-500 font-medium">required</span>
+                    </div>
+                  </div>
+                  <div className="p-3 space-y-2">
+                    <div className="flex items-center justify-between py-2 border-b border-border/50">
+                      <span className="text-sm font-medium">username</span>
+                      <span className="text-xs text-muted-foreground">string</span>
+                    </div>
+                    <div className="flex items-center justify-between py-2">
+                      <span className="text-sm font-medium">password</span>
+                      <span className="text-xs text-muted-foreground">string</span>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {request.auth.authType === 'bearer' && (
+                <>
+                  <div className="px-3 py-2 border-b bg-muted/30">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-sm">Bearer Token</span>
+                      <span className="text-xs text-orange-500 font-medium">required</span>
+                    </div>
+                  </div>
+                  <div className="p-3">
+                    <div className="flex items-center justify-between py-2">
+                      <span className="text-sm font-medium">Authorization</span>
+                      <span className="text-xs text-muted-foreground font-mono">Bearer &lt;token&gt;</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Pass the token in the Authorization header
+                    </p>
+                  </div>
+                </>
+              )}
+
+              {request.auth.authType === 'api-key' && (
+                <>
+                  <div className="px-3 py-2 border-b bg-muted/30">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-sm">API Key</span>
+                      <span className="text-xs text-orange-500 font-medium">required</span>
+                    </div>
+                  </div>
+                  <div className="p-3 space-y-3">
+                    <div className="border-b border-border/50 pb-3">
+                      <div className="flex items-start gap-2 flex-wrap">
+                        <span className="font-semibold text-sm">{request.auth.key}</span>
+                        <span className="text-xs text-muted-foreground">string</span>
+                        <span className="text-xs text-orange-500 font-medium">required</span>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        Your API key for authentication
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span className="text-muted-foreground">Location:</span>
+                      <code className="bg-muted px-2 py-0.5 rounded font-mono">
+                        {request.auth.addTo === 'HEADERS' ? 'Header' : 'Query'}
+                      </code>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {request.auth.authType === 'oauth-2' && (
+                <>
+                  <div className="px-3 py-2 border-b bg-muted/30">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-sm">OAuth 2.0</span>
+                      <span className="text-xs text-orange-500 font-medium">required</span>
+                    </div>
+                  </div>
+                  <div className="p-3 space-y-3">
+                    <div className="border-b border-border/50 pb-3">
+                      <div className="flex items-start gap-2 flex-wrap">
+                        <span className="font-semibold text-sm">Grant Type</span>
+                        <span className="text-xs text-muted-foreground">
+                          {request.auth.grantTypeInfo.grantType.replace('_', ' ')}
+                        </span>
+                      </div>
+                    </div>
+                    {request.auth.grantTypeInfo.authEndpoint && (
+                      <div className="border-b border-border/50 pb-3">
+                        <div className="flex items-start gap-2 flex-wrap">
+                          <span className="font-semibold text-sm">authEndpoint</span>
+                          <span className="text-xs text-muted-foreground">string</span>
+                        </div>
+                        <code className="text-xs text-muted-foreground mt-1 block break-all">
+                          {request.auth.grantTypeInfo.authEndpoint}
+                        </code>
+                      </div>
+                    )}
+                    {request.auth.grantTypeInfo.tokenEndpoint && (
+                      <div className="pb-1">
+                        <div className="flex items-start gap-2 flex-wrap">
+                          <span className="font-semibold text-sm">tokenEndpoint</span>
+                          <span className="text-xs text-muted-foreground">string</span>
+                        </div>
+                        <code className="text-xs text-muted-foreground mt-1 block break-all">
+                          {request.auth.grantTypeInfo.tokenEndpoint}
+                        </code>
+                      </div>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </CollapsibleSection>
+        )}
+
+        {/* Body */}
+        {request.body.body !== null && (
+          <CollapsibleSection title="Request Body" defaultOpen={false}>
+            <div className="border rounded-sm overflow-hidden">
+              <div className="bg-muted/50 px-3 py-2 border-b">
+                <span className="text-xs font-medium">Content-Type: </span>
+                <code className="text-xs">{request.body.contentType}</code>
+              </div>
+              {Array.isArray(request.body.body) ? (
+                <div className="p-3 space-y-1">
+                  {request.body.body.map((item, index) => (
+                    <div key={index} className="flex items-center gap-2 text-xs">
+                      <code className="bg-background px-2 py-1 rounded">{item.key}</code>
+                      <span className="text-muted-foreground">
+                        {item.isFile ? '(file)' : '(text)'}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="dark-editor">
+                  <CodeViewer
+                    value={typeof request.body.body === 'string' ? request.body.body : JSON.stringify(request.body.body)}
+                    language={request.body.contentType?.includes('json') ? 'json' : request.body.contentType?.includes('xml') ? 'xml' : 'plaintext'}
+                    theme="dark"
+                    height="auto"
+                    minHeight={80}
+                    maxHeight={250}
+                    showBorder={false}
+                    rounded={false}
+                  />
+                </div>
+              )}
+            </div>
+          </CollapsibleSection>
+        )}
+
+        {/* Responses */}
+        {Object.keys(request.responses).length > 0 && (
+          <CollapsibleSection title="Responses" defaultOpen={true}>
+            <div>
+              {Object.entries(request.responses).map(([name, response]) => (
+                <ResponseSchema
+                  key={name}
+                  code={response.code}
+                  status={response.status}
+                  description={name !== response.status ? name : undefined}
+                  schema={response.body}
+                />
+              ))}
+            </div>
+          </CollapsibleSection>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,343 @@
+'use client'
+
+import { useMemo } from 'react'
+import { X, Spinner } from '@phosphor-icons/react'
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import type { BrainfishCollection, BrainfishRESTRequest, BrainfishDocPage } from '@/lib/api-docs/types'
+import { CollectionTree } from './collection-tree'
+import { SidebarSection } from './sidebar-section'
+import { SidebarItem, SlidingIndicatorProvider } from './sidebar-item'
+import { SidebarGroup } from './sidebar-group'
+import { extractMarkdownHeadings, type MarkdownHeading } from '@/lib/api-docs/utils'
+import { useMobile } from '@/lib/api-docs/mobile-context'
+import { cn } from '@/lib/utils'
+
+interface ApiVersion {
+  version: string
+  spec: string
+  default: boolean
+}
+
+interface ApiDocsSidebarProps {
+  collection: BrainfishCollection
+  selectedRequest: BrainfishRESTRequest | null
+  selectedDocSection: string | null
+  selectedDocPage?: string | null
+  activeTab?: string
+  onSelectRequest: (request: BrainfishRESTRequest) => void
+  onSelectDocumentation?: (headingId: string) => void
+  onSelectDocPage?: (slug: string) => void
+  apiVersions?: ApiVersion[]
+  selectedApiVersion?: string | null
+  onApiVersionChange?: (version: string) => void
+  isVersionLoading?: boolean
+}
+
+export function DocsSidebar({
+  collection,
+  selectedRequest,
+  selectedDocSection,
+  selectedDocPage,
+  activeTab,
+  onSelectRequest,
+  onSelectDocumentation,
+  onSelectDocPage,
+  apiVersions,
+  selectedApiVersion,
+  onApiVersionChange,
+  isVersionLoading,
+}: ApiDocsSidebarProps) {
+  const { isMobile, isLeftSidebarOpen, closeLeftSidebar } = useMobile()
+  
+  // Handle request selection with mobile close
+  const handleSelectRequest = (request: BrainfishRESTRequest) => {
+    onSelectRequest(request)
+    if (isMobile) {
+      closeLeftSidebar()
+    }
+  }
+  
+  // Handle doc click with mobile close
+  const handleDocClickWithClose = (headingId: string) => {
+    if (onSelectDocumentation) {
+      onSelectDocumentation(headingId)
+    }
+    if (isMobile) {
+      closeLeftSidebar()
+    }
+  }
+  
+  // Handle doc page click with mobile close
+  const handleDocPageClick = (slug: string) => {
+    if (onSelectDocPage) {
+      onSelectDocPage(slug)
+    }
+    if (isMobile) {
+      closeLeftSidebar()
+    }
+  }
+  
+  // Extract documentation headings from collection description
+  const docHeadings = useMemo(() => {
+    return collection.description 
+      ? extractMarkdownHeadings(collection.description)
+      : []
+  }, [collection.description])
+  
+  // Get doc groups from collection
+  const docGroups = collection.docGroups || []
+
+  const handleDocClick = (headingId: string) => {
+    handleDocClickWithClose(headingId)
+  }
+  
+  // Determine if Introduction should be highlighted
+  const isIntroductionSelected = !selectedRequest && !selectedDocSection && !selectedDocPage
+
+  // Check if a heading or any of its children is selected
+  const isHeadingSelected = (heading: MarkdownHeading): boolean => {
+    if (selectedDocSection === heading.id) return true
+    if (heading.children?.some(child => selectedDocSection === child.id)) return true
+    return false
+  }
+  
+  // Get the selected child heading ID for a heading group
+  const getSelectedChildHeading = (heading: MarkdownHeading): string | null => {
+    if (selectedDocSection === heading.id) return heading.id
+    const selected = heading.children?.find(child => selectedDocSection === child.id)
+    return selected?.id || null
+  }
+
+  // Render a documentation heading item (may have children)
+  const renderHeading = (heading: MarkdownHeading, index: number) => {
+    const hasChildren = heading.children && heading.children.length > 0
+    const isSelected = selectedDocSection === heading.id
+    
+    // If heading is "Introduction", handle it specially
+    if (heading.text === 'Introduction') {
+      return (
+        <SidebarItem
+          key={`${heading.id}-${index}`}
+          itemId={`heading-introduction`}
+          selected={isIntroductionSelected}
+          onClick={() => handleDocClick('introduction')}
+        >
+          Introduction
+        </SidebarItem>
+      )
+    }
+    
+    if (hasChildren) {
+      return (
+        <SidebarGroup
+          key={`${heading.id}-${index}`}
+          title={heading.text}
+          defaultOpen={isHeadingSelected(heading)}
+          selected={isSelected}
+          selectedChildSlug={getSelectedChildHeading(heading)}
+          onClick={() => handleDocClick(heading.id)}
+        >
+          {heading.children!.map((child, childIndex) => (
+            <SidebarItem
+              key={`${child.id}-${childIndex}`}
+              itemId={`heading-${child.id}`}
+              selected={selectedDocSection === child.id}
+              indent={1}
+              onClick={() => handleDocClick(child.id)}
+            >
+              {child.text}
+            </SidebarItem>
+          ))}
+        </SidebarGroup>
+      )
+    }
+    
+    return (
+      <SidebarItem
+        key={`${heading.id}-${index}`}
+        itemId={`heading-${heading.id}`}
+        selected={isSelected}
+        onClick={() => handleDocClick(heading.id)}
+      >
+        {heading.text}
+      </SidebarItem>
+    )
+  }
+  
+  // Check if any child in a group is selected
+  const isChildSelected = (page: BrainfishDocPage): boolean => {
+    if (!page.children) return false
+    return page.children.some(child => selectedDocPage === child.slug)
+  }
+  
+  // Get the selected child slug for a group (for triggering auto-expand)
+  const getSelectedChildSlug = (page: BrainfishDocPage): string | null => {
+    if (!page.children) return null
+    const selected = page.children.find(child => selectedDocPage === child.slug)
+    return selected?.slug || null
+  }
+  
+  // Render a doc page item (may be a collapsible group with children)
+  const renderDocPage = (page: BrainfishDocPage) => {
+    // Handle collapsible group with children
+    if (page.isGroup && page.children && page.children.length > 0) {
+      return (
+        <SidebarGroup
+          key={page.id}
+          title={page.title}
+          defaultOpen={isChildSelected(page)}
+          selectedChildSlug={getSelectedChildSlug(page)}
+        >
+          {page.children.map(child => {
+            const isSelected = selectedDocPage === child.slug
+            return (
+              <SidebarItem
+                key={child.id}
+                itemId={`doc-${child.slug}`}
+                selected={isSelected}
+                indent={1}
+                icon={child.icon}
+                onClick={() => handleDocPageClick(child.slug)}
+              >
+                {child.title}
+              </SidebarItem>
+            )
+          })}
+        </SidebarGroup>
+      )
+    }
+    
+    // Regular page item
+    const isSelected = selectedDocPage === page.slug
+    
+    return (
+      <SidebarItem
+        key={page.id}
+        itemId={`doc-${page.slug}`}
+        selected={isSelected}
+        icon={page.icon}
+        onClick={() => handleDocPageClick(page.slug)}
+      >
+        {page.title}
+      </SidebarItem>
+    )
+  }
+
+  return (
+    <>
+      {/* Mobile overlay backdrop */}
+      {isMobile && isLeftSidebarOpen && (
+        <div 
+          className="docs-sidebar-overlay fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={closeLeftSidebar}
+        />
+      )}
+      
+      <aside 
+        className={cn(
+          "docs-sidebar flex flex-col border-r border-sidebar-border overflow-hidden bg-muted dark:bg-background",
+          // Desktop: always visible, fixed width
+          "lg:relative lg:w-72 lg:h-full",
+          // Mobile: drawer behavior
+          "fixed inset-y-0 left-0 z-50 w-[280px] h-full",
+          "transform transition-transform duration-300 ease-in-out",
+          "lg:transform-none lg:translate-x-0",
+          isMobile && !isLeftSidebarOpen && "-translate-x-full",
+          isMobile && isLeftSidebarOpen && "translate-x-0"
+        )}
+      >
+        {/* Mobile close button */}
+        {isMobile && (
+          <div className="px-4 h-[41px] flex items-center justify-end border-b border-sidebar-border shrink-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={closeLeftSidebar}
+              className="h-7 w-7 lg:hidden"
+            >
+              <X className="h-4 w-4" weight="bold" />
+            </Button>
+          </div>
+        )}
+
+        {/* API Version Selector - Only show when multiple versions exist and on API Reference tab */}
+        {activeTab === 'api-reference' && apiVersions && apiVersions.length > 1 && (
+          <div className="docs-sidebar-version-selector px-4 py-3 border-b border-sidebar-border shrink-0">
+            <div className="flex items-center justify-between mb-1.5">
+              <label className="docs-sidebar-version-label text-xs font-medium text-muted-foreground">
+                API Version
+              </label>
+              {isVersionLoading && (
+                <Spinner className="h-3 w-3 animate-spin text-muted-foreground" />
+              )}
+            </div>
+            <Select
+              value={selectedApiVersion || apiVersions.find(v => v.default)?.version || apiVersions[0]?.version}
+              onValueChange={(value) => onApiVersionChange?.(value)}
+              disabled={isVersionLoading}
+            >
+              <SelectTrigger className={cn("docs-sidebar-version-trigger w-full h-9 text-sm", isVersionLoading && "opacity-50")}>
+                <SelectValue placeholder="Select version" />
+              </SelectTrigger>
+              <SelectContent>
+                {apiVersions.map((v) => (
+                  <SelectItem key={v.version} value={v.version}>
+                    {v.version}
+                    {v.default && <span className="ml-2 text-xs text-muted-foreground">(latest)</span>}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* Scrollable content with sliding indicator */}
+        <SlidingIndicatorProvider className="docs-sidebar-content flex-1 overflow-y-auto overflow-x-hidden custom-scroll">
+          {/* Documentation Section (from description headings) - Only shown in API Reference tab */}
+          {activeTab === 'api-reference' && docHeadings.length > 0 && (
+            <SidebarSection title="Documentation">
+              {docHeadings.map((heading, index) => renderHeading(heading, index))}
+            </SidebarSection>
+          )}
+          
+          {/* Documentation Pages Section (from docs.json) */}
+          {docGroups.length > 0 && (
+            <>
+              {docGroups.map((group, index) => (
+                <SidebarSection 
+                  key={group.id} 
+                  title={group.title}
+                  icon={group.icon}
+                  className={index > 0 || (activeTab === 'api-reference' && docHeadings.length > 0) ? '' : ''}
+                >
+                  {group.pages.map(renderDocPage)}
+                </SidebarSection>
+              ))}
+            </>
+          )}
+
+          {/* Endpoints Section */}
+          {(collection.folders.length > 0 || collection.requests.length > 0) && (
+            <SidebarSection 
+              title="Endpoints" 
+              className={((activeTab === 'api-reference' && docHeadings.length > 0) || docGroups.length > 0) ? 'border-t border-sidebar-border' : ''}
+            >
+              <CollectionTree
+                collection={collection}
+                selectedRequest={selectedRequest}
+                onSelectRequest={handleSelectRequest}
+              />
+            </SidebarSection>
+          )}
+        </SlidingIndicatorProvider>
+      </aside>
+    </>
+  )
+}