@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/playground/code-editor.tsx

@@ -0,0 +1,224 @@
+'use client'
+
+import { useRef, useCallback, useMemo } from 'react'
+import Editor, { OnMount, OnChange, loader } from '@monaco-editor/react'
+import type { editor } from 'monaco-editor'
+
+// Configure Monaco to use CDN
+loader.config({
+  paths: {
+    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs',
+  },
+})
+
+export type SupportedLanguage = 
+  | 'json' 
+  | 'xml' 
+  | 'html' 
+  | 'plaintext' 
+  | 'javascript' 
+  | 'typescript' 
+  | 'shell'
+  | 'python'
+  | 'go'
+  | 'java'
+  | 'csharp'
+  | 'ruby'
+  | 'php'
+  | 'swift'
+  | 'kotlin'
+  | 'rust'
+  | 'c'
+  | 'powershell'
+  | 'clojure'
+  | 'objective-c'
+  | 'r'
+
+interface CodeEditorProps {
+  value: string
+  onChange?: (value: string) => void
+  language?: SupportedLanguage
+  readOnly?: boolean
+  height?: string | number
+  minHeight?: number
+  maxHeight?: number
+  className?: string
+  placeholder?: string
+  theme?: 'light' | 'dark'
+  showBorder?: boolean
+  rounded?: boolean
+  showLineNumbers?: boolean
+}
+
+// Helper to format JSON properly
+function formatValue(value: string, language: string): string {
+  if (language === 'json') {
+    try {
+      // Try to parse and re-stringify with proper formatting
+      const parsed = JSON.parse(value)
+      return JSON.stringify(parsed, null, 2)
+    } catch {
+      // If it's not valid JSON, return as-is
+      return value
+    }
+  }
+  return value
+}
+
+// Calculate height based on content lines
+function calculateHeight(value: string, minHeight: number, maxHeight?: number): number {
+  const lineHeight = 20 // Approximate line height in pixels
+  const padding = 24 // Top + bottom padding
+  const lines = value.split('\n').length
+  const contentHeight = (lines * lineHeight) + padding
+  
+  let height = Math.max(contentHeight, minHeight)
+  if (maxHeight) {
+    height = Math.min(height, maxHeight)
+  }
+  return height
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  language = 'json',
+  readOnly = false,
+  height = '100%',
+  minHeight = 100,
+  maxHeight,
+  className = '',
+  placeholder,
+  theme = 'light',
+  showBorder = true,
+  rounded = true,
+  showLineNumbers = true,
+}: CodeEditorProps) {
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
+
+  // Format value for display
+  const formattedValue = useMemo(() => formatValue(value, language), [value, language])
+
+  const handleMount: OnMount = useCallback((editor) => {
+    editorRef.current = editor
+  }, [])
+
+  const handleChange: OnChange = useCallback(
+    (newValue) => {
+      if (onChange && newValue !== undefined) {
+        onChange(newValue)
+      }
+    },
+    [onChange]
+  )
+
+  const monacoTheme = theme === 'dark' ? 'vs-dark' : 'vs'
+  const bgColor = theme === 'dark' ? '!bg-[#1e1e1e]' : 'bg-white'
+
+  // Calculate the actual height for Monaco
+  const computedHeight = height === 'auto' 
+    ? calculateHeight(formattedValue, minHeight, maxHeight)
+    : (typeof height === 'number' ? height : height)
+
+  const borderClass = showBorder ? 'border border-border' : ''
+  const roundedClass = rounded ? 'rounded-sm' : ''
+
+  const inlineStyle = {
+    height: typeof computedHeight === 'number' ? `${computedHeight}px` : computedHeight,
+    backgroundColor: theme === 'dark' ? '#1e1e1e' : undefined,
+  }
+
+  return (
+    <div 
+      className={`relative overflow-hidden ${borderClass} ${roundedClass} ${bgColor} ${className}`}
+      style={inlineStyle}
+    >
+      {!formattedValue && placeholder && (
+        <div className="absolute inset-0 flex items-center justify-center text-gray-500 text-sm z-10 pointer-events-none">
+          {placeholder}
+        </div>
+      )}
+      <Editor
+        height="100%"
+        language={language}
+        value={formattedValue}
+        onChange={handleChange}
+        onMount={handleMount}
+        theme={monacoTheme}
+        options={{
+          readOnly,
+          domReadOnly: readOnly,
+          contextmenu: !readOnly,
+          minimap: { enabled: false },
+          scrollBeyondLastLine: false,
+          fontSize: 13,
+          fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace",
+          lineNumbers: showLineNumbers ? (readOnly ? 'on' : 'on') : 'off',
+          renderLineHighlight: readOnly ? 'none' : 'line',
+          scrollbar: {
+            vertical: 'auto',
+            horizontal: 'auto',
+          },
+          padding: { top: 12, bottom: 12 },
+          wordWrap: 'on',
+          automaticLayout: true,
+          overviewRulerBorder: false,
+          overviewRulerLanes: 0,
+          hideCursorInOverviewRuler: true,
+          guides: { indentation: !readOnly },
+          cursorBlinking: readOnly ? 'solid' : 'smooth',
+          lineDecorationsWidth: showLineNumbers ? 8 : 0,
+          lineNumbersMinChars: showLineNumbers ? 3 : 0,
+        }}
+        loading={
+          <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+            Loading editor...
+          </div>
+        }
+      />
+    </div>
+  )
+}
+
+// Lightweight read-only viewer version
+interface CodeViewerProps {
+  value: string
+  language?: SupportedLanguage
+  height?: string | number
+  minHeight?: number
+  maxHeight?: number
+  className?: string
+  theme?: 'light' | 'dark'
+  showBorder?: boolean
+  rounded?: boolean
+  showLineNumbers?: boolean
+}
+
+export function CodeViewer({
+  value,
+  language = 'json',
+  height = 'auto',
+  minHeight = 100,
+  maxHeight,
+  className = '',
+  theme = 'light',
+  showBorder = false,
+  rounded = false,
+  showLineNumbers = true,
+}: CodeViewerProps) {
+  return (
+    <CodeEditor
+      value={value}
+      language={language}
+      readOnly={true}
+      height={height}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      className={className}
+      theme={theme}
+      showBorder={showBorder}
+      rounded={rounded}
+      showLineNumbers={showLineNumbers}
+    />
+  )
+}

package/renderer/components/docs-viewer/playground/code-snippet.tsx

@@ -0,0 +1,387 @@
+'use client'
+
+import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import { Copy, Check, Spinner, Code, MagnifyingGlass } from '@phosphor-icons/react'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { CodeViewer, type SupportedLanguage } from './code-editor'
+import {
+  generateCodeAsync,
+  getCodegenByCategory,
+  getMonacoLanguage,
+  type CodegenName,
+} from '@/lib/api-docs/codegen'
+import type { BrainfishRESTRequest } from '@/lib/api-docs/types'
+
+interface CodeSnippetProps {
+  request: BrainfishRESTRequest
+  defaultLanguage?: CodegenName
+  className?: string
+}
+
+export function CodeSnippet({
+  request,
+  defaultLanguage = 'shell-curl',
+  className = '',
+}: CodeSnippetProps) {
+  const [selectedLanguage, setSelectedLanguage] = useState<CodegenName>(defaultLanguage)
+  const [copied, setCopied] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [generatedCode, setGeneratedCode] = useState<string>('// Loading...')
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Get codegen definitions grouped by category
+  const codegenByCategory = useMemo(() => getCodegenByCategory(), [])
+
+  // Filter definitions based on search
+  const filteredCategories = useMemo(() => {
+    if (!searchQuery) return codegenByCategory
+
+    const filtered: typeof codegenByCategory = {}
+    const query = searchQuery.toLowerCase()
+
+    for (const [category, definitions] of Object.entries(codegenByCategory)) {
+      const matchedDefs = definitions.filter(
+        (def) =>
+          def.caption.toLowerCase().includes(query) ||
+          def.category.toLowerCase().includes(query) ||
+          def.lang.toLowerCase().includes(query)
+      )
+      if (matchedDefs.length > 0) {
+        filtered[category] = matchedDefs
+      }
+    }
+
+    return filtered
+  }, [codegenByCategory, searchQuery])
+
+  // Generate code async when language or request changes
+  useEffect(() => {
+    let cancelled = false
+    setIsLoading(true)
+
+    generateCodeAsync(selectedLanguage, request).then((result) => {
+      if (!cancelled) {
+        setGeneratedCode(result.success ? result.code || '' : `// Error: ${result.error}`)
+        setIsLoading(false)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [selectedLanguage, request])
+
+  // Get Monaco language for syntax highlighting
+  const monacoLanguage = useMemo(
+    () => getMonacoLanguage(selectedLanguage),
+    [selectedLanguage]
+  )
+
+  // Handle copy to clipboard
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(generatedCode)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }, [generatedCode])
+
+  // Get current language display name
+  const currentLanguageDisplay = useMemo(() => {
+    for (const definitions of Object.values(codegenByCategory)) {
+      const found = definitions.find((def) => def.name === selectedLanguage)
+      if (found) {
+        return `${found.category} - ${found.caption}`
+      }
+    }
+    return selectedLanguage
+  }, [codegenByCategory, selectedLanguage])
+
+  return (
+    <div className={`flex flex-col h-full ${className}`}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-2 border-b border-border bg-muted/30 px-4 py-2">
+        <div className="flex items-center gap-2 flex-1">
+          <Code size={16} className="text-muted-foreground" />
+          <span className="text-sm font-medium text-muted-foreground">Code Snippet</span>
+        </div>
+
+        {/* Language Selector */}
+        <Select
+          value={selectedLanguage}
+          onValueChange={(value) => setSelectedLanguage(value as CodegenName)}
+        >
+          <SelectTrigger className="w-[200px] h-8 text-xs">
+            <SelectValue placeholder="Select language">
+              {currentLanguageDisplay}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent className="max-h-[300px]">
+            {/* Search */}
+            <div className="sticky top-0 bg-popover p-2 border-b border-border">
+              <div className="relative">
+                <MagnifyingGlass
+                  size={14}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+                />
+                <Input
+                  placeholder="Search languages..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="h-7 pl-7 text-xs"
+                />
+              </div>
+            </div>
+
+            {/* Grouped languages */}
+            {Object.entries(filteredCategories).map(([category, definitions]) => (
+              <SelectGroup key={category}>
+                <SelectLabel className="text-xs text-muted-foreground font-medium px-2 py-1">
+                  {category}
+                </SelectLabel>
+                {definitions.map((def) => (
+                  <SelectItem
+                    key={def.name}
+                    value={def.name}
+                    className="text-xs pl-4"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span>{def.caption}</span>
+                      {def.name === selectedLanguage && (
+                        <Check size={12} className="text-primary" />
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
+
+            {Object.keys(filteredCategories).length === 0 && (
+              <div className="p-4 text-center text-sm text-muted-foreground">
+                No languages found for &ldquo;{searchQuery}&rdquo;
+              </div>
+            )}
+          </SelectContent>
+        </Select>
+
+        {/* Copy Button */}
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleCopy}
+                disabled={isLoading}
+              >
+                {copied ? (
+                  <Check size={16} className="text-green-500" />
+                ) : (
+                  <Copy size={16} />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{copied ? 'Copied!' : 'Copy to clipboard'}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      {/* Code Display */}
+      <div className="flex-1 min-h-0 relative">
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
+            <Spinner size={24} className="animate-spin text-muted-foreground" />
+          </div>
+        )}
+        <CodeViewer
+          value={generatedCode}
+          language={monacoLanguage as SupportedLanguage}
+          height="100%"
+          theme="dark"
+          showLineNumbers={false}
+          className="border-0"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Compact version for sidebar - styled like the reference image
+ */
+interface CodeSnippetCompactProps {
+  request: BrainfishRESTRequest
+}
+
+// Method color mapping
+const methodColors: Record<string, string> = {
+  GET: 'text-green-400',
+  POST: 'text-blue-400',
+  PUT: 'text-orange-400',
+  PATCH: 'text-yellow-400',
+  DELETE: 'text-red-400',
+  HEAD: 'text-purple-400',
+  OPTIONS: 'text-gray-400',
+}
+
+export function CodeSnippetCompact({ request }: CodeSnippetCompactProps) {
+  const [selectedLanguage, setSelectedLanguage] = useState<CodegenName>('shell-curl')
+  const [copied, setCopied] = useState(false)
+  const [generatedCode, setGeneratedCode] = useState<string>('// Loading...')
+  const [isLoading, setIsLoading] = useState(true)
+
+  const codegenByCategory = useMemo(() => getCodegenByCategory(), [])
+
+  // Generate code async when language or request changes
+  useEffect(() => {
+    let cancelled = false
+    setIsLoading(true)
+
+    generateCodeAsync(selectedLanguage, request).then((result) => {
+      if (!cancelled) {
+        setGeneratedCode(result.success ? result.code || '' : `// Error: ${result.error}`)
+        setIsLoading(false)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [selectedLanguage, request])
+
+  const monacoLanguage = useMemo(
+    () => getMonacoLanguage(selectedLanguage),
+    [selectedLanguage]
+  )
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(generatedCode)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }, [generatedCode])
+
+  const currentCaption = useMemo(() => {
+    for (const definitions of Object.values(codegenByCategory)) {
+      const found = definitions.find((def) => def.name === selectedLanguage)
+      if (found) return `${found.category} ${found.caption}`
+    }
+    return 'Shell Curl'
+  }, [codegenByCategory, selectedLanguage])
+
+  // Get shortened endpoint path (decode URL-encoded characters like <<id>>)
+  const endpointPath = useMemo(() => {
+    try {
+      const url = new URL(request.endpoint)
+      // Decode URL-encoded characters to show original path placeholders like <<id>>
+      return decodeURIComponent(url.pathname)
+    } catch {
+      return request.endpoint
+    }
+  }, [request.endpoint])
+
+  return (
+    <div className="border-b border-border">
+      {/* Dark code block container */}
+      <div className="bg-[#1e1e1e] overflow-hidden">
+        {/* Header with method, path, and language selector */}
+        <div className="flex items-center justify-between px-4 py-2 border-b border-[#333]">
+          <div className="flex items-center gap-2 font-mono text-sm">
+            <span className={`font-semibold ${methodColors[request.method] || 'text-gray-400'}`}>
+              {request.method}
+            </span>
+            <span className="text-gray-300">{endpointPath}</span>
+          </div>
+          
+          {/* Language Selector */}
+          <Select
+            value={selectedLanguage}
+            onValueChange={(value) => setSelectedLanguage(value as CodegenName)}
+          >
+            <SelectTrigger className="h-7 w-auto gap-1 border-0 bg-transparent text-gray-300 text-xs hover:bg-[#333] focus:ring-0 focus:ring-offset-0">
+              <SelectValue>{currentCaption}</SelectValue>
+            </SelectTrigger>
+            <SelectContent className="max-h-[300px]">
+              {Object.entries(codegenByCategory).map(([category, definitions]) => (
+                <SelectGroup key={category}>
+                  <SelectLabel className="text-xs">{category}</SelectLabel>
+                  {definitions.map((def) => (
+                    <SelectItem key={def.name} value={def.name} className="text-xs">
+                      {def.caption}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Code Display */}
+        <div className="relative bg-[#1e1e1e] dark-editor">
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-[#1e1e1e]/80 z-10">
+              <Spinner size={20} className="animate-spin text-gray-400" />
+            </div>
+          )}
+          <CodeViewer
+            value={generatedCode}
+            language={monacoLanguage as SupportedLanguage}
+            height="auto"
+            minHeight={80}
+            maxHeight={200}
+            theme="dark"
+            showLineNumbers={false}
+            className="!bg-[#1e1e1e]"
+          />
+        </div>
+      </div>
+
+      {/* Copy button row */}
+      <div className="flex justify-end px-2 py-1 bg-muted/30">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 text-xs gap-1"
+          onClick={handleCopy}
+          disabled={isLoading}
+        >
+          {copied ? (
+            <>
+              <Check size={12} className="text-green-500" />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy size={12} />
+              Copy
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}