@brainfish-ai/devdoc 0.1.21

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

@@ -0,0 +1,280 @@
+'use client'
+
+import { ShieldCheck, Key, Lock, User, Hash, WarningCircle } from '@phosphor-icons/react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
+import type { BrainfishRESTAuth } from '@/lib/api-docs/types'
+import { cn } from '@/lib/utils'
+import { usePlaygroundNavigation } from '@/lib/api-docs/playground/navigation-context'
+
+const AUTH_TYPES = [
+  { value: 'none', label: 'No Auth', icon: ShieldCheck },
+  { value: 'basic', label: 'Basic Auth', icon: User },
+  { value: 'bearer', label: 'Bearer Token', icon: Key },
+  { value: 'api-key', label: 'API Key', icon: Lock },
+] as const
+
+interface AuthEditorProps {
+  auth: BrainfishRESTAuth
+  onChange: (auth: BrainfishRESTAuth) => void
+  /** Show error styling to indicate this section needs attention */
+  showError?: boolean
+}
+
+export function AuthEditor({ auth, onChange, showError = false }: AuthEditorProps) {
+  const { state: navState } = usePlaygroundNavigation()
+  
+  // Check if auth field should be highlighted (from either prop or context)
+  const isHighlighted = showError || (navState.highlightField?.type === 'auth' && navState.showError)
+  const handleTypeChange = (type: string) => {
+    switch (type) {
+      case 'none':
+        onChange({ authType: 'none', authActive: true })
+        break
+      case 'basic':
+        onChange({ authType: 'basic', authActive: true, username: '', password: '' })
+        break
+      case 'bearer':
+        onChange({ authType: 'bearer', authActive: true, token: '' })
+        break
+      case 'api-key':
+        onChange({ authType: 'api-key', authActive: true, addTo: 'HEADERS', key: 'X-API-Key', value: '' })
+        break
+    }
+  }
+
+  const currentType = AUTH_TYPES.find((t) => t.value === auth.authType) || AUTH_TYPES[0]
+  const CurrentIcon = currentType.icon
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with Auth Type Selector */}
+      <div className={cn(
+        "flex items-center border-b bg-muted/30 px-4 py-2",
+        isHighlighted ? "border-red-500 bg-red-500/5" : "border-border"
+      )}>
+        {isHighlighted && (
+          <WarningCircle className="h-4 w-4 text-red-500 animate-pulse mr-2" weight="fill" />
+        )}
+        <span className={cn(
+          "text-xs font-medium mr-3",
+          isHighlighted ? "text-red-500" : "text-muted-foreground"
+        )}>
+          {isHighlighted ? "Auth required" : "Type"}
+        </span>
+        <Select value={auth.authType} onValueChange={handleTypeChange}>
+          <SelectTrigger className="h-8 w-auto min-w-[140px] text-sm border-0 bg-transparent hover:bg-muted/50">
+            <SelectValue>
+              <span className="flex items-center gap-2">
+                <CurrentIcon className="h-3.5 w-3.5" weight="bold" />
+                <span>{currentType.label}</span>
+              </span>
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {AUTH_TYPES.map((type) => (
+              <SelectItem key={type.value} value={type.value}>
+                <div className="flex items-center gap-2">
+                  <type.icon className="h-3.5 w-3.5" weight="bold" />
+                  <span>{type.label}</span>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Auth Content */}
+      <div className="flex-1 overflow-auto">
+        {auth.authType === 'none' && (
+          <div className={cn(
+            "flex flex-col items-center justify-center py-12 px-6 text-center",
+            isHighlighted && "bg-red-500/5 border-2 border-red-500/30 rounded-lg m-4 animate-pulse"
+          )}>
+            {isHighlighted ? (
+              <>
+                <WarningCircle className="h-10 w-10 text-red-500 mb-3" weight="fill" />
+                <p className="text-sm font-medium text-red-600 dark:text-red-400 mb-1">
+                  Authentication Required
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Select an auth type above to configure credentials
+                </p>
+              </>
+            ) : (
+              <>
+                <ShieldCheck className="h-10 w-10 text-muted-foreground/50 mb-3" weight="duotone" />
+                <p className="text-sm text-muted-foreground">
+                  No authentication required
+                </p>
+              </>
+            )}
+          </div>
+        )}
+
+        {auth.authType === 'basic' && (
+          <table className="w-full text-sm">
+            <thead className="bg-muted/20 text-xs text-muted-foreground">
+              <tr>
+                <th className="text-left font-medium px-4 py-2 w-32">Field</th>
+                <th className="text-left font-medium px-4 py-2">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-b border-border/50">
+                <td className="px-4 py-1">
+                  <div className="flex items-center gap-2 text-sm font-medium">
+                    <User className="h-3.5 w-3.5 text-muted-foreground" />
+                    username
+                  </div>
+                </td>
+                <td className="px-2 py-1">
+                  <Input
+                    type="text"
+                    value={auth.username}
+                    onChange={(e) => onChange({ ...auth, username: e.target.value })}
+                    placeholder="Enter username..."
+                    className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
+                  />
+                </td>
+              </tr>
+              <tr className="border-b border-border/50">
+                <td className="px-4 py-1">
+                  <div className="flex items-center gap-2 text-sm font-medium">
+                    <Lock className="h-3.5 w-3.5 text-muted-foreground" />
+                    password
+                  </div>
+                </td>
+                <td className="px-2 py-1">
+                  <Input
+                    type="password"
+                    value={auth.password}
+                    onChange={(e) => onChange({ ...auth, password: e.target.value })}
+                    placeholder="Enter password..."
+                    className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        )}
+
+        {auth.authType === 'bearer' && (
+          <table className="w-full text-sm">
+            <thead className="bg-muted/20 text-xs text-muted-foreground">
+              <tr>
+                <th className="text-left font-medium px-4 py-2 w-32">Field</th>
+                <th className="text-left font-medium px-4 py-2">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-b border-border/50">
+                <td className="px-4 py-1 align-top pt-3">
+                  <div className="flex items-center gap-2 text-sm font-medium">
+                    <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                    token
+                  </div>
+                </td>
+                <td className="px-2 py-1">
+                  <textarea
+                    value={auth.token}
+                    onChange={(e) => onChange({ ...auth, token: e.target.value })}
+                    placeholder="Paste your bearer token..."
+                    className="w-full min-h-[80px] px-3 py-2 rounded-md border border-border/50 bg-transparent font-mono text-sm resize-none focus:outline-none focus:ring-1 focus:ring-ring placeholder:text-muted-foreground/50"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        )}
+
+        {auth.authType === 'api-key' && (
+          <>
+            {/* Location toggle */}
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-border/50 bg-muted/10">
+              <span className="text-xs text-muted-foreground font-medium">Add to</span>
+              <div className="flex p-0.5 bg-muted rounded-sm">
+                <button
+                  type="button"
+                  onClick={() => onChange({ ...auth, addTo: 'HEADERS' })}
+                  className={cn(
+                    "px-3 py-1 rounded text-xs font-medium transition-all",
+                    auth.addTo === 'HEADERS'
+                      ? "bg-background text-foreground shadow-sm"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  Header
+                </button>
+                <button
+                  type="button"
+                  onClick={() => onChange({ ...auth, addTo: 'QUERY_PARAMS' })}
+                  className={cn(
+                    "px-3 py-1 rounded text-xs font-medium transition-all",
+                    auth.addTo === 'QUERY_PARAMS'
+                      ? "bg-background text-foreground shadow-sm"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  Query
+                </button>
+              </div>
+            </div>
+            
+            {/* Key-value inputs */}
+            <table className="w-full text-sm">
+              <thead className="bg-muted/20 text-xs text-muted-foreground">
+                <tr>
+                  <th className="text-left font-medium px-4 py-2 w-32">Field</th>
+                  <th className="text-left font-medium px-4 py-2">Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-border/50">
+                  <td className="px-4 py-1">
+                    <div className="flex items-center gap-2 text-sm font-medium">
+                      <Hash className="h-3.5 w-3.5 text-muted-foreground" />
+                      key
+                    </div>
+                  </td>
+                  <td className="px-2 py-1">
+                    <Input
+                      type="text"
+                      value={auth.key}
+                      onChange={(e) => onChange({ ...auth, key: e.target.value })}
+                      placeholder="X-API-Key"
+                      className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
+                    />
+                  </td>
+                </tr>
+                <tr className="border-b border-border/50">
+                  <td className="px-4 py-1">
+                    <div className="flex items-center gap-2 text-sm font-medium">
+                      <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                      value
+                    </div>
+                  </td>
+                  <td className="px-2 py-1">
+                    <Input
+                      type="password"
+                      value={auth.value}
+                      onChange={(e) => onChange({ ...auth, value: e.target.value })}
+                      placeholder="Enter API key..."
+                      className="h-9 border-border/50 bg-transparent focus-visible:ring-1 focus-visible:ring-ring font-mono"
+                    />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,221 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { FileText, WarningCircle } from '@phosphor-icons/react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import type { BrainfishRESTReqBody } from '@/lib/api-docs/types'
+import { KeyValueEditor, KeyValueItem } from './key-value-editor'
+import { CodeEditor, SupportedLanguage } from './code-editor'
+import { cn } from '@/lib/utils'
+
+type ContentType = BrainfishRESTReqBody['contentType']
+
+const CONTENT_TYPES: { label: string; value: string; language?: SupportedLanguage }[] = [
+  { label: 'None', value: 'none' },
+  { label: 'JSON', value: 'application/json', language: 'json' },
+  { label: 'XML', value: 'application/xml', language: 'xml' },
+  { label: 'Plain Text', value: 'text/plain', language: 'plaintext' },
+  { label: 'HTML', value: 'text/html', language: 'html' },
+  { label: 'Form URL Encoded', value: 'application/x-www-form-urlencoded' },
+  { label: 'Multipart Form', value: 'multipart/form-data' },
+  { label: 'Binary', value: 'application/octet-stream' },
+]
+
+interface BodyEditorProps {
+  body: string | null
+  contentType: ContentType
+  onBodyChange: (body: string | null) => void
+  onContentTypeChange: (contentType: ContentType) => void
+  /** Show error styling to indicate this section needs attention */
+  showError?: boolean
+}
+
+export function BodyEditor({
+  body,
+  contentType,
+  onBodyChange,
+  onContentTypeChange,
+  showError = false,
+}: BodyEditorProps) {
+  const [formData, setFormData] = useState<KeyValueItem[]>([])
+
+  // Parse form data from body when content type changes
+  useEffect(() => {
+    if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
+      try {
+        if (body) {
+          const parsed = JSON.parse(body)
+          if (Array.isArray(parsed)) {
+            setFormData(parsed.map((item: { key: string; value: string }, i: number) => ({
+              id: `form_${i}`,
+              key: item.key || '',
+              value: item.value || '',
+              active: true,
+            })))
+          }
+        }
+      } catch {
+        setFormData([])
+      }
+    }
+  }, [contentType, body])
+
+  // Default templates for each content type
+  const DEFAULT_TEMPLATES: Record<string, string> = {
+    'application/json': '{\n  \n}',
+    'application/xml': '<?xml version="1.0" encoding="UTF-8"?>\n<root>\n  \n</root>',
+    'text/html': '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+    'text/plain': '',
+  }
+
+  // Check if current body is a default template or invalid (should be replaced when switching types)
+  const isDefaultTemplate = (currentBody: string | null): boolean => {
+    if (!currentBody || currentBody.trim() === '' || currentBody.trim() === 'null') return true
+    return Object.values(DEFAULT_TEMPLATES).some(
+      template => currentBody.trim() === template.trim()
+    )
+  }
+
+  // Normalize body value - convert "null" string to empty
+  const normalizedBody = (body === 'null' || body === null) ? '' : body
+
+  const handleContentTypeChange = (value: string) => {
+    console.log('[BodyEditor] Content type changed to:', value)
+    const newType = value === 'none' ? null : value as ContentType
+    onContentTypeChange(newType)
+    
+    // Set default body content based on type
+    if (newType === null) {
+      onBodyChange(null)
+    } else if (isDefaultTemplate(body)) {
+      // Replace with new template if current body is empty or a default template
+      const template = DEFAULT_TEMPLATES[newType] ?? ''
+      onBodyChange(template)
+    }
+    // If body has custom content, keep it when switching types
+  }
+
+  const handleFormDataChange = (items: KeyValueItem[]) => {
+    setFormData(items)
+    onBodyChange(JSON.stringify(items.map(({ key, value }) => ({ key, value }))))
+  }
+
+  const currentValue = contentType || 'none'
+  const currentTypeInfo = CONTENT_TYPES.find((t) => t.value === currentValue)
+  const editorLanguage = currentTypeInfo?.language || 'plaintext'
+
+  // Content type selector header component
+  const ContentTypeHeader = () => (
+    <div className={cn(
+      "flex items-center border-b bg-muted/30 px-4 py-2",
+      showError ? "border-red-500 bg-red-500/5" : "border-border"
+    )}>
+      {showError && (
+        <WarningCircle className="h-4 w-4 text-red-500 animate-pulse mr-2" weight="fill" />
+      )}
+      <span className={cn(
+        "text-xs font-medium mr-3",
+        showError ? "text-red-500" : "text-muted-foreground"
+      )}>
+        {showError ? "Body needs attention" : "Type"}
+      </span>
+      <Select value={currentValue} onValueChange={handleContentTypeChange}>
+        <SelectTrigger className="h-8 w-auto min-w-[140px] text-sm border-0 bg-transparent hover:bg-muted/50">
+          <SelectValue placeholder="Select type" />
+        </SelectTrigger>
+        <SelectContent>
+          {CONTENT_TYPES.map((type) => (
+            <SelectItem key={type.value} value={type.value}>
+              {type.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+
+  // Form data editors (URL encoded, multipart)
+  if (contentType === 'application/x-www-form-urlencoded' || contentType === 'multipart/form-data') {
+    return (
+      <div className="flex flex-col h-full">
+        <ContentTypeHeader />
+        <div className="flex-1 overflow-auto">
+          <KeyValueEditor
+            items={formData}
+            onChange={handleFormDataChange}
+            title={contentType === 'multipart/form-data' ? 'Form Data' : 'URL Encoded'}
+            keyLabel="Field"
+            valueLabel="Value"
+            showDescription={false}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Binary file (placeholder)
+  if (contentType === 'application/octet-stream') {
+    return (
+      <div className="flex flex-col h-full">
+        <ContentTypeHeader />
+        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center">
+          <FileText className="h-10 w-10 text-muted-foreground/50 mb-3" weight="duotone" />
+          <p className="text-sm text-muted-foreground">Binary file upload not supported</p>
+        </div>
+      </div>
+    )
+  }
+
+  // No body
+  if (contentType === null) {
+    return (
+      <div className="flex flex-col h-full">
+        <ContentTypeHeader />
+        <div className="flex-1 flex flex-col items-center justify-center p-8 text-center">
+          <FileText className="h-10 w-10 text-muted-foreground/50 mb-3" weight="duotone" />
+          <p className="text-sm text-muted-foreground">No request body</p>
+          <p className="text-xs text-muted-foreground/70 mt-1">Select a type to add body</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Monaco editor for JSON, XML, Text, HTML
+  const editorValue = normalizedBody || ''
+  
+  // Placeholder text based on content type
+  const placeholderMap: Record<string, string> = {
+    'application/json': 'Enter JSON body...',
+    'application/xml': 'Enter XML body...',
+    'text/html': 'Enter HTML body...',
+    'text/plain': 'Enter text...',
+  }
+  
+  const placeholder = placeholderMap[contentType || ''] || 'Enter request body...'
+  
+  return (
+    <div className="flex flex-col h-full">
+      <ContentTypeHeader />
+      <div className="flex-1 dark-editor h-full">
+        <CodeEditor
+          key={`editor-${contentType}`}
+          value={editorValue}
+          onChange={onBodyChange}
+          language={editorLanguage}
+          height="100%"
+          theme="dark"
+          showLineNumbers={false}
+          showBorder={false}
+          rounded={false}
+          placeholder={placeholder}
+        />
+      </div>
+    </div>
+  )
+}