@brainfish-ai/devdoc 0.1.42 → 0.1.43

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

@@ -1,202 +0,0 @@
-'use client'
-
-import { useEffect, useState, useCallback } from 'react'
-import Image from 'next/image'
-import { X, ArrowClockwise } from '@phosphor-icons/react'
-import type { BrainfishCollection, BrainfishRESTRequest } from '@/lib/api-docs/types'
-import type { PrefillData } from '@/lib/api-docs/agent/types'
-import type { DebugContext } from '../playground/response-viewer'
-import { AgentChat } from '../agent'
-import { Button } from '@/components/ui/button'
-import { useMobile } from '@/lib/api-docs/mobile-context'
-import { cn } from '@/lib/utils'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-
-interface RightSidebarProps {
-  /** Current endpoint - when null, only agent mode is available */
-  request: BrainfishRESTRequest | null
-  /** Full collection for agent context */
-  collection: BrainfishCollection
-  /** Pre-generated API summary (cached server-side) */
-  apiSummary?: string | null
-  /** Callback when agent navigates to an endpoint */
-  onNavigateToEndpoint: (endpointId: string) => void
-  /** Callback when agent prefills parameters */
-  onPrefillParameters: (data: PrefillData) => void
-  /** Debug context from playground response - triggers agent debug */
-  debugContext?: DebugContext | null
-  /** Callback to clear debug context after processing */
-  onClearDebugContext?: () => void
-  /** Explain context from playground response - triggers agent explanation */
-  explainContext?: DebugContext | null
-  /** Callback to clear explain context after processing */
-  onClearExplainContext?: () => void
-  /** Callback to open global auth dialog */
-  onOpenGlobalAuth?: () => void
-  /** Callback to navigate to authorization tab in playground */
-  onNavigateToAuthTab?: () => void
-  /** Callback to navigate to parameters tab in playground */
-  onNavigateToParamsTab?: () => void
-  /** Callback to navigate to body tab in playground */
-  onNavigateToBodyTab?: () => void
-  /** Callback to navigate to headers tab in playground */
-  onNavigateToHeadersTab?: () => void
-  /** Callback to navigate to a documentation section */
-  onNavigateToDocSection?: (sectionId: string) => void
-  /** Callback to navigate to a documentation page */
-  onNavigateToDocPage?: (slug: string) => void
-}
-
-export function RightSidebar({ 
-  request, 
-  collection,
-  apiSummary,
-  onNavigateToEndpoint,
-  onPrefillParameters,
-  debugContext,
-  onClearDebugContext,
-  explainContext,
-  onClearExplainContext,
-  onOpenGlobalAuth,
-  onNavigateToAuthTab,
-  onNavigateToParamsTab,
-  onNavigateToBodyTab,
-  onNavigateToHeadersTab,
-  onNavigateToDocSection,
-  onNavigateToDocPage,
-}: RightSidebarProps) {
-  // Mobile context
-  const { isMobile, isRightSidebarOpen, closeRightSidebar } = useMobile()
-  
-  // Debug context to send to agent (full context for card display)
-  const [pendingDebugContext, setPendingDebugContext] = useState<DebugContext | null>(null)
-
-  // Handle debug context
-  useEffect(() => {
-    if (debugContext) {
-      // Pass full context to agent
-      setPendingDebugContext(debugContext)
-      
-      // Clear the debug context from parent
-      onClearDebugContext?.()
-    }
-  }, [debugContext, onClearDebugContext])
-  
-  // Clear debug context after it's been used
-  const handleDebugContextConsumed = () => {
-    setPendingDebugContext(null)
-  }
-
-  // Key for resetting chat
-  const [chatKey, setChatKey] = useState(0)
-  
-  // Track if there are messages
-  const [hasMessages, setHasMessages] = useState(false)
-  
-  // Handle reset conversation
-  const handleResetConversation = useCallback(() => {
-    // Clear chat storage before remounting
-    localStorage.removeItem('brainfish-agent-chat')
-    setChatKey(prev => prev + 1)
-    setHasMessages(false)
-  }, [])
-
-  return (
-    <>
-      {/* Mobile overlay backdrop - z-[55] to cover header (z-50) but below panel (z-60) */}
-      {isMobile && isRightSidebarOpen && (
-        <div 
-          className="docs-agent-overlay fixed inset-0 bg-black/50 z-[55] lg:hidden"
-          onClick={closeRightSidebar}
-        />
-      )}
-      
-      <div 
-        className={cn(
-          "docs-agent-panel border-l border-border bg-background flex flex-col overflow-hidden",
-          // Desktop: always visible, fixed width
-          "lg:relative lg:w-96 lg:h-full lg:z-auto",
-          // Mobile: drawer behavior from right - z-[60] to appear above header (z-50)
-          "fixed inset-y-0 right-0 z-[60] w-[320px] sm:w-[360px] h-full",
-          "transform transition-transform duration-300 ease-in-out",
-          "lg:transform-none lg:translate-x-0",
-          isMobile && !isRightSidebarOpen && "translate-x-full",
-          isMobile && isRightSidebarOpen && "translate-x-0"
-        )}
-      >
-        {/* Header */}
-        <div className="docs-agent-header shrink-0 px-3 sm:px-4 h-[41px] flex items-center border-b border-border bg-muted/30">
-          <div className="flex items-center justify-between gap-2 w-full">
-            {/* Left: Assistant */}
-            <div className="docs-agent-title flex items-center gap-2.5">
-              <div className="docs-agent-avatar size-7 rounded-full overflow-hidden bg-muted flex items-center justify-center shrink-0">
-                <Image src="/icon.png" alt="Assistant" width={28} height={28} className="size-7 object-cover" />
-              </div>
-              <span className="text-sm font-medium">Assistant</span>
-            </div>
-            
-            {/* Right: Actions */}
-            <div className="flex items-center gap-1 shrink-0">
-              {/* Reset conversation button - only show when there are messages */}
-              {hasMessages && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={handleResetConversation}
-                      className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                    >
-                      <ArrowClockwise className="h-4 w-4" weight="bold" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom">New conversation</TooltipContent>
-                </Tooltip>
-              )}
-              
-              {/* Mobile close button */}
-              {isMobile && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={closeRightSidebar}
-                  className="h-7 w-7 lg:hidden"
-                >
-                  <X className="h-4 w-4" weight="bold" />
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-        
-        {/* Content */}
-        <div className="docs-agent-content flex-1 overflow-hidden">
-          <AgentChat 
-            key={chatKey}
-            collection={collection}
-            currentEndpoint={request}
-            apiSummary={apiSummary}
-            onNavigate={onNavigateToEndpoint}
-            onPrefill={onPrefillParameters}
-            debugContext={pendingDebugContext}
-            onDebugContextConsumed={handleDebugContextConsumed}
-            explainContext={explainContext}
-            onExplainContextConsumed={onClearExplainContext}
-            onOpenGlobalAuth={onOpenGlobalAuth}
-            onNavigateToAuthTab={onNavigateToAuthTab}
-            onNavigateToParamsTab={onNavigateToParamsTab}
-            onNavigateToBodyTab={onNavigateToBodyTab}
-            onNavigateToHeadersTab={onNavigateToHeadersTab}
-            onNavigateToDocSection={onNavigateToDocSection}
-            onNavigateToDocPage={onNavigateToDocPage}
-            onHasMessagesChange={setHasMessages}
-          />
-        </div>
-      </div>
-    </>
-  )
-}

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

@@ -1,118 +0,0 @@
-'use client'
-
-import { ReactNode, useState, useRef, useEffect } from 'react'
-import { CaretRight } from '@phosphor-icons/react'
-import { cn } from '@/lib/utils'
-
-interface SidebarGroupProps {
-  title: ReactNode
-  children: ReactNode
-  defaultOpen?: boolean
-  selected?: boolean
-  indent?: number
-  onClick?: () => void
-  asideContent?: ReactNode
-  /** Selected child slug - when this changes and a child is selected, auto-expand */
-  selectedChildSlug?: string | null
-}
-
-/**
- * Sidebar Group component - collapsible group with toggle
- * Arrow on right side with smooth rotation and expand animations
- */
-export function SidebarGroup({
-  title,
-  children,
-  defaultOpen = false,
-  selected = false,
-  indent = 0,
-  onClick,
-  asideContent,
-  selectedChildSlug,
-}: SidebarGroupProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen)
-  const contentRef = useRef<HTMLUListElement>(null)
-  const [contentHeight, setContentHeight] = useState<number | undefined>(
-    defaultOpen ? undefined : 0
-  )
-
-  // Auto-expand when a child is selected (e.g., via agent navigation)
-  // Triggers on defaultOpen change OR when selectedChildSlug changes (even if defaultOpen stays true)
-  useEffect(() => {
-    if (defaultOpen) {
-      setIsOpen(true)
-    }
-  }, [defaultOpen, selectedChildSlug])
-
-  // Update height when open state changes
-  useEffect(() => {
-    if (isOpen) {
-      const height = contentRef.current?.scrollHeight
-      setContentHeight(height)
-      // After animation, set to auto for dynamic content
-      const timer = setTimeout(() => setContentHeight(undefined), 200)
-      return () => clearTimeout(timer)
-    } else {
-      // First set the current height, then animate to 0
-      const height = contentRef.current?.scrollHeight
-      setContentHeight(height)
-      requestAnimationFrame(() => {
-        setContentHeight(0)
-      })
-    }
-  }, [isOpen])
-
-  const handleToggle = () => {
-    setIsOpen(!isOpen)
-    onClick?.()
-  }
-
-  return (
-    <li className="docs-sidebar-group flex flex-col">
-      <button
-        type="button"
-        aria-expanded={isOpen}
-        onClick={handleToggle}
-        className={cn(
-          // Base styles
-          'docs-sidebar-group-toggle group/button flex items-center rounded-lg px-3 py-2 w-full text-left',
-          'text-sm leading-5 transition-colors duration-150',
-          // State variants
-          selected
-            ? 'docs-sidebar-group-active bg-sidebar-primary text-sidebar-primary-foreground font-medium'
-            : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground'
-        )}
-        style={{ paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined }}
-      >
-        <span className="flex-1 truncate font-medium">{title}</span>
-        {asideContent && (
-          <span className="ml-2 shrink-0">{asideContent}</span>
-        )}
-        {/* Toggle icon - right side with rotation animation */}
-        <span className="docs-sidebar-group-icon ml-2 text-sidebar-foreground/50 group-hover/button:text-sidebar-foreground/70">
-          <CaretRight 
-            weight="bold" 
-            className={cn(
-              "h-3.5 w-3.5 transition-transform duration-200 ease-out",
-              isOpen && "rotate-90"
-            )}
-          />
-        </span>
-      </button>
-      {/* Child items with expand animation */}
-      <ul 
-        ref={contentRef}
-        className={cn(
-          "docs-sidebar-group-items flex flex-col overflow-hidden transition-all duration-200 ease-out",
-          !isOpen && "opacity-0",
-          isOpen && "opacity-100"
-        )}
-        style={{ 
-          height: contentHeight !== undefined ? `${contentHeight}px` : 'auto',
-        }}
-      >
-        {children}
-      </ul>
-    </li>
-  )
-}

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

@@ -1,212 +0,0 @@
-'use client'
-
-import { ReactNode, useRef, useEffect, useLayoutEffect, useState, createContext, useContext } from 'react'
-import { cn } from '@/lib/utils'
-import { getPhosphorIcon } from '@/lib/utils/icons'
-
-// Context for the sliding indicator
-interface SlidingIndicatorContextType {
-  registerItem: (id: string, element: HTMLElement | null) => void
-  selectedId: string | null
-  setSelectedId: (id: string) => void
-}
-
-const SlidingIndicatorContext = createContext<SlidingIndicatorContextType | null>(null)
-
-/**
- * Wrapper component that provides sliding indicator animation
- */
-interface SlidingIndicatorProviderProps {
-  children: ReactNode
-  className?: string
-}
-
-export function SlidingIndicatorProvider({ children, className }: SlidingIndicatorProviderProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const itemsRef = useRef<Map<string, HTMLElement>>(new Map())
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
-    opacity: 0,
-    top: 0,
-    height: 0,
-  })
-
-  const registerItem = (id: string, element: HTMLElement | null) => {
-    if (element) {
-      itemsRef.current.set(id, element)
-    } else {
-      itemsRef.current.delete(id)
-    }
-  }
-
-  // Update indicator position when selection changes
-  useLayoutEffect(() => {
-    if (!selectedId || !containerRef.current) {
-      setIndicatorStyle(prev => ({ ...prev, opacity: 0 }))
-      return
-    }
-
-    const selectedElement = itemsRef.current.get(selectedId)
-    if (!selectedElement) {
-      setIndicatorStyle(prev => ({ ...prev, opacity: 0 }))
-      return
-    }
-
-    const containerRect = containerRef.current.getBoundingClientRect()
-    const itemRect = selectedElement.getBoundingClientRect()
-
-    setIndicatorStyle({
-      opacity: 1,
-      top: itemRect.top - containerRect.top + containerRef.current.scrollTop,
-      height: itemRect.height,
-      left: 8,
-      right: 8,
-    })
-  }, [selectedId])
-
-  // Also update on scroll to keep indicator in sync
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) return
-
-    const handleScroll = () => {
-      if (!selectedId) return
-      const selectedElement = itemsRef.current.get(selectedId)
-      if (!selectedElement) return
-
-      const containerRect = container.getBoundingClientRect()
-      const itemRect = selectedElement.getBoundingClientRect()
-
-      setIndicatorStyle(prev => ({
-        ...prev,
-        top: itemRect.top - containerRect.top + container.scrollTop,
-      }))
-    }
-
-    container.addEventListener('scroll', handleScroll, { passive: true })
-    return () => container.removeEventListener('scroll', handleScroll)
-  }, [selectedId])
-
-  return (
-    <SlidingIndicatorContext.Provider value={{ registerItem, selectedId, setSelectedId }}>
-      <div ref={containerRef} className={cn('relative', className)}>
-        {/* Sliding indicator background */}
-        <div
-          className="docs-sidebar-indicator absolute rounded-lg bg-background dark:bg-stone-800/50 pointer-events-none z-0"
-          style={{
-            ...indicatorStyle,
-            transition: 'top 350ms cubic-bezier(0.4, 0, 0.2, 1), height 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out',
-          }}
-        />
-        {children}
-      </div>
-    </SlidingIndicatorContext.Provider>
-  )
-}
-
-interface SidebarItemProps {
-  children: ReactNode
-  selected?: boolean
-  active?: boolean
-  disabled?: boolean
-  indent?: number
-  onClick?: () => void
-  className?: string
-  asideContent?: ReactNode
-  /** Unique ID for sliding animation */
-  itemId?: string
-  /** Phosphor icon name */
-  icon?: string
-}
-
-/**
- * Sidebar Item component - individual clickable item in the sidebar
- * Uses subtle sage/mint style when selected with smooth sliding animation
- */
-export function SidebarItem({
-  children,
-  selected = false,
-  active = false,
-  disabled = false,
-  indent = 0,
-  onClick,
-  className,
-  asideContent,
-  itemId,
-  icon,
-}: SidebarItemProps) {
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const context = useContext(SlidingIndicatorContext)
-  const id = itemId || String(children)
-  const IconComponent = getPhosphorIcon(icon)
-
-  // Register this item with the sliding indicator provider
-  useEffect(() => {
-    if (context && buttonRef.current) {
-      context.registerItem(id, buttonRef.current)
-      return () => context.registerItem(id, null)
-    }
-  }, [context, id])
-
-  // Update selected state in context
-  useEffect(() => {
-    if (context && selected) {
-      context.setSelectedId(id)
-    }
-  }, [context, selected, id])
-  
-  // Auto-scroll into view when selected (e.g., via agent navigation)
-  useEffect(() => {
-    if (selected && buttonRef.current) {
-      // Small delay to allow folder expansion animation to complete
-      setTimeout(() => {
-        buttonRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center',
-        })
-      }, 100)
-    }
-  }, [selected])
-
-  // Check if we're inside a sliding indicator provider
-  const hasSliding = context !== null
-
-  return (
-    <li className="docs-sidebar-item-wrapper flex flex-col">
-      <button
-        ref={buttonRef}
-        type="button"
-        disabled={disabled}
-        aria-selected={selected}
-        onClick={onClick}
-        className={cn(
-          // Base styles
-          'docs-sidebar-item group/button flex items-center rounded-lg px-3 py-2 w-full text-left relative z-10',
-          'text-sm leading-5 transition-colors duration-150',
-          // Indentation
-          indent > 0 && `ml-${indent * 3}`,
-          // State variants
-          selected
-            ? hasSliding
-              ? 'docs-sidebar-item-active text-green-700 font-semibold dark:text-green-400' // No bg when sliding
-              : 'docs-sidebar-item-active bg-background text-green-700 font-semibold dark:bg-stone-800/50 dark:text-green-400'
-            : active
-              ? 'text-sidebar-foreground font-medium hover:bg-sidebar-accent/50'
-              : disabled
-                ? 'text-sidebar-foreground/50 cursor-default'
-                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground',
-          className
-        )}
-        style={{ paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined }}
-      >
-        {IconComponent && (
-          <IconComponent className="h-4 w-4 mr-2 shrink-0 opacity-60" weight="regular" />
-        )}
-        <span className="flex-1 truncate">{children}</span>
-        {asideContent && (
-          <span className="ml-2 shrink-0">{asideContent}</span>
-        )}
-      </button>
-    </li>
-  )
-}

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

@@ -1,38 +0,0 @@
-'use client'
-
-import { ReactNode } from 'react'
-import { cn } from '@/lib/utils'
-import { getPhosphorIcon } from '@/lib/utils/icons'
-
-interface SidebarSectionProps {
-  title: string
-  children: ReactNode
-  className?: string
-  /** Phosphor icon name (e.g., "rocket", "book-open", "sliders") */
-  icon?: string
-}
-
-/**
- * Sidebar Section component - groups items under a title with optional icon
- */
-export function SidebarSection({ title, children, className = '', icon }: SidebarSectionProps) {
-  const IconComponent = getPhosphorIcon(icon)
-  
-  return (
-    <div className={cn('docs-sidebar-section flex flex-col', className)}>
-      {/* Section title with optional icon */}
-      <div className="docs-sidebar-section-header flex items-center gap-2 px-4 py-3">
-        {IconComponent && (
-          <IconComponent className="docs-sidebar-section-icon h-4 w-4 text-sidebar-foreground/70" weight="regular" />
-        )}
-        <span className="docs-sidebar-section-title text-sm font-semibold text-sidebar-foreground">
-          {title}
-        </span>
-      </div>
-      {/* Section items */}
-      <ul className="docs-sidebar-section-items flex flex-col gap-0.5 px-2 pb-4">
-        {children}
-      </ul>
-    </div>
-  )
-}

package/renderer/components/theme-provider.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

package/renderer/components/theme-toggle.tsx

@@ -1,76 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Moon, Sun, Desktop, Check } from "@phosphor-icons/react"
-import { useTheme } from "next-themes"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { cn } from "@/lib/utils"
-
-export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-
-  // Avoid hydration mismatch
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="h-9 w-9">
-          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[140px]">
-        <DropdownMenuItem 
-          onClick={() => setTheme("light")}
-          className={cn(
-            "flex items-center justify-between gap-2",
-            mounted && theme === "light" && "bg-accent"
-          )}
-        >
-          <div className="flex items-center gap-2">
-            <Sun className="h-4 w-4" />
-            <span>Light</span>
-          </div>
-          {mounted && theme === "light" && <Check className="h-4 w-4" />}
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          onClick={() => setTheme("dark")}
-          className={cn(
-            "flex items-center justify-between gap-2",
-            mounted && theme === "dark" && "bg-accent"
-          )}
-        >
-          <div className="flex items-center gap-2">
-            <Moon className="h-4 w-4" />
-            <span>Dark</span>
-          </div>
-          {mounted && theme === "dark" && <Check className="h-4 w-4" />}
-        </DropdownMenuItem>
-        <DropdownMenuItem 
-          onClick={() => setTheme("system")}
-          className={cn(
-            "flex items-center justify-between gap-2",
-            mounted && theme === "system" && "bg-accent"
-          )}
-        >
-          <div className="flex items-center gap-2">
-            <Desktop className="h-4 w-4" />
-            <span>System</span>
-          </div>
-          {mounted && theme === "system" && <Check className="h-4 w-4" />}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}