@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/content/sections/responses.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import type { BrainfishRESTRequestResponses } from '@/lib/api-docs/types'
+import { CodeViewer } from '../../playground/code-editor'
+
+interface ResponsesSectionProps {
+  responses: BrainfishRESTRequestResponses
+}
+
+export function ResponsesSection({ responses }: ResponsesSectionProps) {
+  const responseEntries = Object.entries(responses)
+
+  if (responseEntries.length === 0) {
+    return null
+  }
+
+  return (
+    <section>
+      <h2 className="text-2xl font-semibold mb-4">Responses</h2>
+      <div className="space-y-4">
+        {responseEntries.map(([name, response]) => {
+          // Pass raw JSON - CodeViewer will format it
+          const bodyContent = response.body
+            ? typeof response.body === 'string'
+              ? response.body
+              : JSON.stringify(response.body)
+            : null
+
+          return (
+            <div key={name} className="border rounded-sm overflow-hidden">
+              <div className="bg-muted/50 px-4 py-3 border-b">
+                <div className="flex items-center gap-3">
+                  <span
+                    className={`px-2 py-1 rounded text-xs font-semibold ${
+                      response.code >= 200 && response.code < 300
+                        ? 'bg-green-500 text-white'
+                        : response.code >= 400
+                          ? 'bg-red-500 text-white'
+                          : 'bg-gray-500 text-white'
+                    }`}
+                  >
+                    {response.code}
+                  </span>
+                  <span className="font-medium">{response.status}</span>
+                  {name !== response.status && (
+                    <span className="text-sm text-muted-foreground">({name})</span>
+                  )}
+                </div>
+              </div>
+
+              {response.headers.length > 0 && (
+                <div className="px-4 py-3 border-b bg-muted/30">
+                  <p className="text-sm font-medium mb-2">Headers:</p>
+                  <div className="space-y-1">
+                    {response.headers.map((header, index) => (
+                      <div key={index} className="text-sm">
+                        <code className="bg-background px-2 py-1 rounded">
+                          {header.key}
+                        </code>
+                        <span className="text-muted-foreground ml-2">{header.value}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {bodyContent && (
+                <div className="dark-editor">
+                  <CodeViewer
+                    value={bodyContent}
+                    language="json"
+                    theme="dark"
+                    height="auto"
+                    minHeight={100}
+                    maxHeight={500}
+                    showBorder={false}
+                    rounded={false}
+                  />
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}

package/renderer/components/docs-viewer/global-auth-modal.tsx

@@ -0,0 +1,352 @@
+'use client'
+
+import { useState, useEffect, useMemo } from 'react'
+import { ShieldCheck, Key, Lock, User, X, Star } from '@phosphor-icons/react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogClose,
+} from '@/components/ui/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useAuth } from '@/lib/api-docs/auth'
+import type { BrainfishRESTAuth } from '@/lib/api-docs/types'
+import { cn } from '@/lib/utils'
+
+const BASE_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 GlobalAuthModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function GlobalAuthModal({ open, onClose }: GlobalAuthModalProps) {
+  const { globalAuth, setGlobalAuth, clearAuth, specSchemes, specDefaultAuth } = useAuth()
+  
+  // Local state for editing
+  const [authType, setAuthType] = useState<string>('none')
+  const [basicUsername, setBasicUsername] = useState('')
+  const [basicPassword, setBasicPassword] = useState('')
+  const [bearerToken, setBearerToken] = useState('')
+  const [apiKeyName, setApiKeyName] = useState('X-API-Key')
+  const [apiKeyValue, setApiKeyValue] = useState('')
+  const [apiKeyLocation, setApiKeyLocation] = useState<'HEADERS' | 'QUERY_PARAMS'>('HEADERS')
+  const [showPassword, setShowPassword] = useState(false)
+
+  // Build auth types with spec-recommended first
+  const AUTH_TYPES = useMemo(() => {
+    // If we have a spec default auth, put it first with a recommended label
+    if (specDefaultAuth && specDefaultAuth.authType !== 'none') {
+      const specType = specDefaultAuth.authType
+      const baseType = BASE_AUTH_TYPES.find(t => t.value === specType)
+      
+      if (baseType) {
+        // Get scheme info but use short label
+        const scheme = specSchemes.find(s => s.type === specType)
+        const label = `${baseType.label} (Recommended)`
+        const description = scheme?.description
+        
+        return [
+          { ...baseType, label, isRecommended: true, description },
+          ...BASE_AUTH_TYPES.filter(t => t.value !== specType).map(t => ({ ...t, isRecommended: false, description: undefined })),
+        ]
+      }
+    }
+    return BASE_AUTH_TYPES.map(t => ({ ...t, isRecommended: false, description: undefined }))
+  }, [specDefaultAuth, specSchemes])
+
+  // Sync local state with global auth when modal opens
+  useEffect(() => {
+    if (open && globalAuth) {
+      setAuthType(globalAuth.authType)
+      
+      if (globalAuth.authType === 'basic') {
+        setBasicUsername(globalAuth.username)
+        setBasicPassword(globalAuth.password)
+      } else if (globalAuth.authType === 'bearer') {
+        setBearerToken(globalAuth.token)
+      } else if (globalAuth.authType === 'api-key') {
+        setApiKeyName(globalAuth.key)
+        setApiKeyValue(globalAuth.value)
+        setApiKeyLocation(globalAuth.addTo)
+      }
+    } else if (open) {
+      // If no global auth set, use spec default as the initial type
+      if (specDefaultAuth && specDefaultAuth.authType !== 'none') {
+        setAuthType(specDefaultAuth.authType)
+        
+        // Pre-populate fields from spec (like API key name)
+        if (specDefaultAuth.authType === 'api-key') {
+          setApiKeyName(specDefaultAuth.key || 'X-API-Key')
+          setApiKeyLocation(specDefaultAuth.addTo || 'HEADERS')
+          setApiKeyValue('') // User needs to enter value
+        }
+      } else {
+        setAuthType('none')
+      }
+      setBasicUsername('')
+      setBasicPassword('')
+      setBearerToken('')
+      if (!specDefaultAuth || specDefaultAuth.authType !== 'api-key') {
+        setApiKeyName('X-API-Key')
+        setApiKeyValue('')
+        setApiKeyLocation('HEADERS')
+      }
+    }
+  }, [open, globalAuth, specDefaultAuth])
+
+  const handleSave = () => {
+    let auth: BrainfishRESTAuth
+
+    switch (authType) {
+      case 'basic':
+        auth = {
+          authType: 'basic',
+          authActive: true,
+          username: basicUsername.trim(),
+          password: basicPassword,
+        }
+        break
+      case 'bearer':
+        auth = {
+          authType: 'bearer',
+          authActive: true,
+          token: bearerToken.trim(),
+        }
+        break
+      case 'api-key':
+        auth = {
+          authType: 'api-key',
+          authActive: true,
+          addTo: apiKeyLocation,
+          key: apiKeyName.trim(),
+          value: apiKeyValue.trim(),
+        }
+        break
+      default:
+        auth = { authType: 'none', authActive: true }
+    }
+
+    setGlobalAuth(auth)
+    onClose()
+  }
+
+  const handleClear = () => {
+    clearAuth()
+    setAuthType('none')
+    setBasicUsername('')
+    setBasicPassword('')
+    setBearerToken('')
+    setApiKeyName('X-API-Key')
+    setApiKeyValue('')
+    onClose()
+  }
+
+  const currentType = AUTH_TYPES.find((t) => t.value === authType) || AUTH_TYPES[0]
+  const CurrentIcon = currentType.icon
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Global Authentication</DialogTitle>
+          <DialogClose className="text-muted-foreground hover:text-foreground transition-colors p-1 hover:bg-muted rounded">
+            <X className="h-4 w-4" />
+          </DialogClose>
+        </DialogHeader>
+
+        {/* Content */}
+        <div className="p-5 space-y-4">
+          {/* Auth Type Selector */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Type</label>
+            <Select value={authType} onValueChange={setAuthType}>
+              <SelectTrigger className="w-full h-9">
+                <SelectValue>
+                  <span className="flex items-center gap-2">
+                    <CurrentIcon className="h-3.5 w-3.5" weight="bold" />
+                    <span className="text-sm truncate">{currentType.label}</span>
+                    {currentType.isRecommended && (
+                      <Star className="h-3 w-3 text-amber-500 flex-shrink-0" weight="fill" />
+                    )}
+                  </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>
+                      {type.isRecommended && (
+                        <Star className="h-3 w-3 text-amber-500 ml-1" weight="fill" />
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {currentType.description && (
+              <p className="text-xs text-muted-foreground mt-1.5 line-clamp-2">
+                {currentType.description.split('\n')[0]}
+              </p>
+            )}
+          </div>
+
+          {/* Auth Type Specific Fields */}
+          {authType === 'none' && (
+            <div className="flex items-center justify-center py-8 text-center">
+              <p className="text-sm text-muted-foreground">
+                No authentication will be applied
+              </p>
+            </div>
+          )}
+
+          {authType === 'basic' && (
+            <div className="space-y-3">
+              <div className="space-y-1.5">
+                <label className="text-xs font-medium text-muted-foreground">Username</label>
+                <Input
+                  type="text"
+                  value={basicUsername}
+                  onChange={(e) => setBasicUsername(e.target.value)}
+                  placeholder="Enter username"
+                  className="h-9"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <label className="text-xs font-medium text-muted-foreground">Password</label>
+                <div className="relative">
+                  <Input
+                    type={showPassword ? 'text' : 'password'}
+                    value={basicPassword}
+                    onChange={(e) => setBasicPassword(e.target.value)}
+                    placeholder="Enter password"
+                    className="h-9 pr-14"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground text-xs px-1.5 py-0.5 rounded hover:bg-muted"
+                  >
+                    {showPassword ? 'Hide' : 'Show'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {authType === 'bearer' && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium text-muted-foreground">Token</label>
+              <textarea
+                value={bearerToken}
+                onChange={(e) => setBearerToken(e.target.value)}
+                placeholder="Paste your bearer token..."
+                className="w-full min-h-[80px] px-3 py-2 rounded-md border border-input bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring placeholder:text-muted-foreground/50"
+              />
+            </div>
+          )}
+
+          {authType === 'api-key' && (
+            <div className="space-y-3">
+              {/* Location toggle */}
+              <div className="space-y-1.5">
+                <label className="text-xs font-medium text-muted-foreground">Add to</label>
+                <div className="flex p-0.5 bg-muted rounded-md">
+                  <button
+                    type="button"
+                    onClick={() => setApiKeyLocation('HEADERS')}
+                    className={cn(
+                      'flex-1 px-3 py-1 rounded text-xs font-medium transition-all',
+                      apiKeyLocation === 'HEADERS'
+                        ? 'bg-background text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground'
+                    )}
+                  >
+                    Header
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setApiKeyLocation('QUERY_PARAMS')}
+                    className={cn(
+                      'flex-1 px-3 py-1 rounded text-xs font-medium transition-all',
+                      apiKeyLocation === 'QUERY_PARAMS'
+                        ? 'bg-background text-foreground shadow-sm'
+                        : 'text-muted-foreground hover:text-foreground'
+                    )}
+                  >
+                    Query
+                  </button>
+                </div>
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-medium text-muted-foreground">Key Name</label>
+                <Input
+                  type="text"
+                  value={apiKeyName}
+                  onChange={(e) => setApiKeyName(e.target.value)}
+                  placeholder="X-API-Key"
+                  className="font-mono h-9"
+                />
+              </div>
+
+              <div className="space-y-1.5">
+                <label className="text-xs font-medium text-muted-foreground">Key Value</label>
+                <div className="relative">
+                  <Input
+                    type={showPassword ? 'text' : 'password'}
+                    value={apiKeyValue}
+                    onChange={(e) => setApiKeyValue(e.target.value)}
+                    placeholder="Enter API key"
+                    className="font-mono h-9 pr-14"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground text-xs px-1.5 py-0.5 rounded hover:bg-muted"
+                  >
+                    {showPassword ? 'Hide' : 'Show'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <button
+            onClick={handleClear}
+            className="text-xs text-muted-foreground hover:text-destructive transition-colors"
+          >
+            Clear
+          </button>
+          <div className="flex gap-2">
+            <Button variant="ghost" size="sm" onClick={onClose} className="h-8 px-3 text-xs">
+              Cancel
+            </Button>
+            <Button size="sm" onClick={handleSave} className="h-8 px-4 text-xs">
+              Apply
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}