@brainfish-ai/devdoc 0.1.42 → 0.1.43

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

@@ -1,671 +0,0 @@
-'use client'
-
-import { useState, useCallback, useEffect, useMemo, useRef } from 'react'
-import { PaperPlaneRight, X, ArrowCounterClockwise, ShieldCheck, ShieldWarning } from '@phosphor-icons/react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import type { BrainfishRESTRequest, BrainfishRESTReqBody, BrainfishRESTAuth, HTTPMethod } from '@/lib/api-docs/types'
-import { MethodSelector } from './method-selector'
-import { RequestTabs } from './request-tabs'
-import { ResponseViewer, type DebugContext } from './response-viewer'
-import type { PlaygroundResponseState } from '@/lib/api-docs/playground/types'
-import { createCancelableRequest, createCancelableStreamingRequest } from '@/lib/api-docs/playground/request-runner'
-import type { KeyValueItem } from './key-value-editor'
-import { useAuth, getAuthTypeLabel } from '@/lib/api-docs/auth'
-import { usePlaygroundPrefill, useCurrentRequestPayload, useSendTrigger } from '@/lib/api-docs/playground/context'
-
-// LocalStorage key prefix for playground state
-const PLAYGROUND_STORAGE_KEY = 'brainfish-playground-'
-
-interface PlaygroundStoredState {
-  body?: string | null
-  headers?: KeyValueItem[]
-  params?: KeyValueItem[]
-}
-
-// Helper to get storage key for a request
-function getStorageKey(request: BrainfishRESTRequest): string {
-  const id = request.name || request.endpoint
-  return `${PLAYGROUND_STORAGE_KEY}${btoa(id).replace(/[^a-zA-Z0-9]/g, '')}`
-}
-
-// Load stored state from localStorage
-function loadStoredState(request: BrainfishRESTRequest): PlaygroundStoredState | null {
-  if (typeof window === 'undefined') return null
-  
-  try {
-    const key = getStorageKey(request)
-    const stored = localStorage.getItem(key)
-    if (stored) {
-      return JSON.parse(stored)
-    }
-  } catch (e) {
-    console.warn('[Playground] Failed to load stored state:', e)
-  }
-  return null
-}
-
-// Save state to localStorage
-function saveStoredState(request: BrainfishRESTRequest, state: PlaygroundStoredState): void {
-  if (typeof window === 'undefined') return
-  
-  try {
-    const key = getStorageKey(request)
-    localStorage.setItem(key, JSON.stringify(state))
-  } catch (e) {
-    console.warn('[Playground] Failed to save state:', e)
-  }
-}
-
-// Clear stored state
-function clearStoredState(request: BrainfishRESTRequest): void {
-  if (typeof window === 'undefined') return
-  
-  try {
-    const key = getStorageKey(request)
-    localStorage.removeItem(key)
-  } catch (e) {
-    console.warn('[Playground] Failed to clear state:', e)
-  }
-}
-
-interface ApiPlaygroundProps {
-  request: BrainfishRESTRequest
-  onDebugRequest?: (context: DebugContext) => void
-  onExplainRequest?: (context: DebugContext) => void
-}
-
-export function ApiPlayground({ request, onDebugRequest, onExplainRequest }: ApiPlaygroundProps) {
-  // Global auth - takes priority over endpoint-specific auth
-  const { globalAuth } = useAuth()
-  
-  // Agent prefill context
-  const { pendingPrefill, clearPrefill } = usePlaygroundPrefill()
-  
-  // Current request payload context - share with agent
-  const { setCurrentRequestPayload } = useCurrentRequestPayload()
-  
-  // Send trigger from agent
-  const { triggerSend, clearSendTrigger } = useSendTrigger()
-  
-  // Track if we've loaded from localStorage
-  const hasLoadedRef = useRef(false)
-  
-  // Request state - initialize with defaults, will load from localStorage in useEffect
-  const [method, setMethod] = useState<HTTPMethod>(request.method)
-  const [endpoint, setEndpoint] = useState(request.endpoint)
-  
-  // Path variables (for URL path params like {id} or <<id>>)
-  const [pathVariables, setPathVariables] = useState<KeyValueItem[]>(
-    request.requestVariables.map((v, i) => ({
-      id: `pathvar_${i}`,
-      key: v.key,
-      value: v.value,
-      active: true,
-      description: '',
-    }))
-  )
-  
-  // Store the original endpoint template for path variable substitution
-  const endpointTemplateRef = useRef(request.endpoint)
-  
-  const [params, setParams] = useState<KeyValueItem[]>(
-    request.params.map((p, i) => ({
-      id: `param_${i}`,
-      key: p.key,
-      value: p.value,
-      active: p.active,
-      description: p.description,
-    }))
-  )
-  const [headers, setHeaders] = useState<KeyValueItem[]>(
-    request.headers.map((h, i) => ({
-      id: `header_${i}`,
-      key: h.key,
-      value: h.value,
-      active: h.active,
-      description: h.description,
-    }))
-  )
-  const [body, setBody] = useState<string | null>(
-    typeof request.body.body === 'string' ? request.body.body : null
-  )
-  const [bodyContentType, setBodyContentType] = useState<BrainfishRESTReqBody['contentType']>(
-    request.body.contentType
-  )
-  // Track if user has overridden global auth for this endpoint
-  const [authOverride, setAuthOverride] = useState<BrainfishRESTAuth | null>(null)
-
-  // Update endpoint URL when path variables change
-  useEffect(() => {
-    let newEndpoint = endpointTemplateRef.current
-    pathVariables.forEach((variable) => {
-      if (variable.value) {
-        // Replace <<variable>> pattern
-        newEndpoint = newEndpoint.replace(new RegExp(`<<${variable.key}>>`, 'g'), variable.value)
-        // Replace {variable} pattern
-        newEndpoint = newEndpoint.replace(new RegExp(`\\{${variable.key}\\}`, 'g'), variable.value)
-        // Replace URL-encoded patterns
-        newEndpoint = newEndpoint.replace(new RegExp(`%3C%3C${variable.key}%3E%3E`, 'gi'), variable.value)
-      }
-    })
-    setEndpoint(newEndpoint)
-  }, [pathVariables])
-
-  // Response state
-  const [responseState, setResponseState] = useState<PlaygroundResponseState>({ type: 'idle' })
-  const [cancelFunc, setCancelFunc] = useState<(() => void) | null>(null)
-  
-  // Save state to localStorage when values change (debounced)
-  useEffect(() => {
-    if (!hasLoadedRef.current) return // Don't save before initial load
-    
-    const timeoutId = setTimeout(() => {
-      saveStoredState(request, {
-        body,
-        headers,
-        params,
-      })
-    }, 500) // Debounce 500ms
-    
-    return () => clearTimeout(timeoutId)
-  }, [request, body, headers, params])
-  
-  // Update current request payload context for agent access
-  useEffect(() => {
-    setCurrentRequestPayload({
-      method,
-      endpoint,
-      params: params.filter(p => p.key).map(p => ({
-        key: p.key,
-        value: p.value,
-        active: p.active,
-      })),
-      headers: headers.filter(h => h.key).map(h => ({
-        key: h.key,
-        value: h.value,
-        active: h.active,
-      })),
-      body,
-      bodyContentType,
-    })
-    
-    // Cleanup on unmount
-    return () => setCurrentRequestPayload(null)
-  }, [method, endpoint, params, headers, body, bodyContentType, setCurrentRequestPayload])
-  
-  // Determine effective auth: override > global > endpoint default
-  // Global auth takes priority when available, unless user explicitly overrides
-  const effectiveAuth = useMemo(() => {
-    if (authOverride) {
-      return authOverride
-    }
-    // If global auth is configured, use it by default
-    if (globalAuth && globalAuth.authType !== 'none') {
-      return globalAuth
-    }
-    // Fall back to endpoint's own auth
-    return request.auth
-  }, [authOverride, globalAuth, request.auth])
-  
-  // Check if currently using global auth (global is set and no override)
-  const usingGlobalAuth = !authOverride && globalAuth !== null && globalAuth.authType !== 'none'
-
-  // Reset state when request changes - but load from localStorage if available
-  useEffect(() => {
-    // Load stored state from localStorage
-    const stored = loadStoredState(request)
-    
-    setMethod(request.method)
-    setEndpoint(request.endpoint)
-    
-    // Update endpoint template reference
-    endpointTemplateRef.current = request.endpoint
-    
-    // Reset path variables from request
-    setPathVariables(
-      request.requestVariables.map((v, i) => ({
-        id: `pathvar_${i}`,
-        key: v.key,
-        value: v.value,
-        active: true,
-        description: '',
-      }))
-    )
-    
-    // Use stored params if available, otherwise use request defaults
-    if (stored?.params && stored.params.length > 0) {
-      setParams(stored.params)
-    } else {
-      setParams(
-        request.params.map((p, i) => ({
-          id: `param_${i}`,
-          key: p.key,
-          value: p.value,
-          active: p.active,
-          description: p.description,
-        }))
-      )
-    }
-    
-    // Use stored headers if available, otherwise use request defaults
-    if (stored?.headers && stored.headers.length > 0) {
-      setHeaders(stored.headers)
-    } else {
-      setHeaders(
-        request.headers.map((h, i) => ({
-          id: `header_${i}`,
-          key: h.key,
-          value: h.value,
-          active: h.active,
-          description: h.description,
-        }))
-      )
-    }
-    
-    // Use stored body if available, otherwise use request default
-    if (stored?.body !== undefined) {
-      setBody(stored.body)
-    } else {
-      setBody(typeof request.body.body === 'string' ? request.body.body : null)
-    }
-    
-    setBodyContentType(request.body.contentType)
-    setAuthOverride(null) // Reset override when changing endpoints
-    setResponseState({ type: 'idle' })
-    
-    // Mark as loaded so saving can start
-    hasLoadedRef.current = true
-  }, [request])
-
-  // Apply prefill data from agent
-  useEffect(() => {
-    if (!pendingPrefill) return
-    
-    console.log('[Playground] Applying prefill:', pendingPrefill)
-    
-    // Apply params
-    if (pendingPrefill.params && pendingPrefill.params.length > 0) {
-      setParams(prev => {
-        const updated = [...prev]
-        pendingPrefill.params!.forEach(prefillParam => {
-          const existing = updated.find(p => p.key === prefillParam.key)
-          if (existing) {
-            existing.value = prefillParam.value
-            existing.active = true
-          } else {
-            updated.push({
-              id: `param_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-              key: prefillParam.key,
-              value: prefillParam.value,
-              active: true,
-              description: '',
-            })
-          }
-        })
-        return updated
-      })
-    }
-    
-    // Apply headers
-    if (pendingPrefill.headers && pendingPrefill.headers.length > 0) {
-      setHeaders(prev => {
-        const updated = [...prev]
-        pendingPrefill.headers!.forEach(prefillHeader => {
-          const existing = updated.find(h => h.key === prefillHeader.key)
-          if (existing) {
-            existing.value = prefillHeader.value
-            existing.active = true
-          } else {
-            updated.push({
-              id: `header_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-              key: prefillHeader.key,
-              value: prefillHeader.value,
-              active: true,
-              description: '',
-            })
-          }
-        })
-        return updated
-      })
-    }
-    
-    // Apply body
-    if (pendingPrefill.body) {
-      setBody(pendingPrefill.body)
-    }
-    
-    // Apply path variables (for URL path params like {id})
-    if (pendingPrefill.pathVariables && pendingPrefill.pathVariables.length > 0) {
-      setPathVariables(prev => {
-        const updated = [...prev]
-        pendingPrefill.pathVariables!.forEach(prefillVar => {
-          const existing = updated.find(v => v.key === prefillVar.key)
-          if (existing) {
-            existing.value = prefillVar.value
-          } else {
-            updated.push({
-              id: `pathvar_${Date.now()}_${Math.random().toString(36).slice(2)}`,
-              key: prefillVar.key,
-              value: prefillVar.value,
-              active: true,
-              description: '',
-            })
-          }
-        })
-        return updated
-      })
-    }
-    
-    // Clear the prefill after applying
-    clearPrefill()
-  }, [pendingPrefill, clearPrefill])
-
-  // Handle send trigger from agent
-  useEffect(() => {
-    if (triggerSend) {
-      // Clear the trigger immediately
-      clearSendTrigger()
-      // Trigger the send (handleSend is called below)
-      // We need to call it after this effect, so we use a timeout
-      setTimeout(() => {
-        const sendButton = document.querySelector('[data-send-button]') as HTMLButtonElement
-        if (sendButton) {
-          sendButton.click()
-        }
-      }, 0)
-    }
-  }, [triggerSend, clearSendTrigger])
-
-  const handleSend = useCallback(async () => {
-    if (!endpoint.trim()) {
-      return
-    }
-
-    setResponseState({ type: 'loading' })
-
-    // Always use streaming proxy - it auto-detects SSE from response content-type
-    // and falls back to regular JSON handling for non-streaming responses
-    const shouldStream = true
-
-    // Build request object - use effectiveAuth for authentication
-    const requestToSend: BrainfishRESTRequest = {
-      ...request,
-      method,
-      endpoint,
-      params: params.filter((p) => p.key).map((p) => ({
-        key: p.key,
-        value: p.value,
-        active: p.active,
-        description: p.description || '',
-      })),
-      headers: headers.filter((h) => h.key).map((h) => ({
-        key: h.key,
-        value: h.value,
-        active: h.active,
-        description: h.description || '',
-      })),
-      body: bodyContentType
-        ? { contentType: bodyContentType, body: body || '' } as BrainfishRESTReqBody
-        : { contentType: null, body: null },
-      auth: effectiveAuth,
-    }
-
-    const requestOptions = {
-      params: params.filter((p) => p.key).map((p) => ({
-        key: p.key,
-        value: p.value,
-        active: p.active,
-      })),
-      headers: headers.filter((h) => h.key).map((h) => ({
-        key: h.key,
-        value: h.value,
-        active: h.active,
-      })),
-      body,
-      variables: [],
-      // Streaming callbacks
-      onChunk: shouldStream ? (chunk: string, accumulated: string) => {
-        setResponseState(prev => {
-          if (prev.type === 'streaming' || prev.type === 'loading') {
-            return {
-              type: 'streaming',
-              response: {
-                ...(prev.type === 'streaming' ? prev.response : {
-                  status: 0,
-                  statusText: 'Streaming...',
-                  headers: {},
-                  responseTime: 0,
-                  size: 0,
-                }),
-                body: accumulated,
-                size: new Blob([accumulated]).size,
-                isStreaming: true,
-              },
-            }
-          }
-          return prev
-        })
-      } : undefined,
-      onStreamStart: shouldStream ? (metadata: { status: number; statusText: string; headers: Record<string, string> }) => {
-        setResponseState({
-          type: 'streaming',
-          response: {
-            status: metadata.status,
-            statusText: metadata.statusText,
-            headers: metadata.headers,
-            body: '',
-            responseTime: 0,
-            size: 0,
-            isStreaming: true,
-          },
-        })
-      } : undefined,
-    }
-
-    const createRequest = shouldStream ? createCancelableStreamingRequest : createCancelableRequest
-    const { execute, cancel } = createRequest(requestToSend, requestOptions)
-
-    setCancelFunc(() => cancel)
-
-    try {
-      const response = await execute()
-      if (response.error) {
-        setResponseState({
-          type: 'error',
-          response,
-          error: response.error,
-        })
-      } else {
-        setResponseState({
-          type: 'success',
-          response,
-        })
-      }
-    } catch (error) {
-      setResponseState({
-        type: 'error',
-        error: error instanceof Error ? error.message : 'Request failed',
-      })
-    } finally {
-      setCancelFunc(null)
-    }
-  }, [request, method, endpoint, params, headers, body, bodyContentType, effectiveAuth])
-
-  const handleCancel = useCallback(() => {
-    if (cancelFunc) {
-      cancelFunc()
-      setCancelFunc(null)
-      setResponseState({ type: 'idle' })
-    }
-  }, [cancelFunc])
-
-  const handleClear = useCallback(() => {
-    // Reset to original request values
-    setEndpoint(request.endpoint)
-    setParams(request.params.map((p, i) => ({
-      id: `param_${i}`,
-      key: p.key,
-      value: p.value,
-      active: p.active,
-      description: p.description,
-    })))
-    setHeaders(request.headers.map((h, i) => ({
-      id: `header_${i}`,
-      key: h.key,
-      value: h.value,
-      active: h.active,
-      description: h.description,
-    })))
-    setBody(typeof request.body.body === 'string' ? request.body.body : null)
-    setBodyContentType(request.body.contentType)
-    setAuthOverride(null) // Clear override, will use global auth
-    setResponseState({ type: 'idle' })
-    
-    // Clear stored state from localStorage
-    clearStoredState(request)
-  }, [request])
-
-  const isLoading = responseState.type === 'loading' || responseState.type === 'streaming'
-
-  return (
-    <TooltipProvider>
-      <div className="flex flex-col h-full bg-background">
-        {/* Request Bar */}
-        <div className="sticky top-0 z-20 flex flex-shrink-0 flex-wrap items-center gap-2 bg-muted/50 p-2 sm:p-4 border-b border-border">
-          {/* Method + URL + Auth Indicator */}
-          <div className="flex flex-1 min-w-0 items-center rounded-sm border border-border bg-background overflow-hidden">
-            <MethodSelector value={method} onChange={setMethod} disabled={isLoading} />
-            <Input
-              type="text"
-              value={endpoint}
-              onChange={(e) => setEndpoint(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !isLoading) {
-                  handleSend()
-                }
-              }}
-              placeholder="Enter URL"
-              className="flex-1 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0 text-sm"
-              disabled={isLoading}
-            />
-            {/* Auth Indicator - hidden on very small screens */}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className={`hidden xs:flex items-center gap-1.5 px-2 sm:px-3 h-full border-l border-border text-xs font-medium cursor-default ${
-                  effectiveAuth.authType !== 'none'
-                    ? 'text-green-600 dark:text-green-400'
-                    : 'text-muted-foreground'
-                }`}>
-                  {effectiveAuth.authType !== 'none' ? (
-                    <ShieldCheck className="h-3.5 w-3.5" weight="fill" />
-                  ) : (
-                    <ShieldWarning className="h-3.5 w-3.5" />
-                  )}
-                  <span className="hidden sm:inline">
-                    {effectiveAuth.authType !== 'none' 
-                      ? (usingGlobalAuth ? 'Global' : 'Custom')
-                      : 'No Auth'}
-                  </span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                {effectiveAuth.authType !== 'none' ? (
-                  <div className="text-xs">
-                    <p className="font-medium">{getAuthTypeLabel(effectiveAuth)}</p>
-                    <p className="text-muted-foreground">
-                      {usingGlobalAuth ? 'Using global auth' : 'Custom for this endpoint'}
-                    </p>
-                  </div>
-                ) : (
-                  <p className="text-xs">No authentication configured</p>
-                )}
-              </TooltipContent>
-            </Tooltip>
-          </div>
-
-          {/* Send Button */}
-          <Button
-            onClick={isLoading ? handleCancel : handleSend}
-            variant={isLoading ? 'destructive' : 'default'}
-            className="px-3 sm:px-6"
-            data-send-button
-          >
-            {isLoading ? (
-              <>
-                <X className="h-4 w-4 sm:mr-2" weight="bold" />
-                <span className="hidden sm:inline">Cancel</span>
-              </>
-            ) : (
-              <>
-                <PaperPlaneRight className="h-4 w-4 sm:mr-2" weight="fill" />
-                <span className="hidden sm:inline">Send</span>
-              </>
-            )}
-          </Button>
-
-          {/* Clear button */}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="outline" size="icon" onClick={handleClear} className="shrink-0">
-                <ArrowCounterClockwise className="h-4 w-4" weight="bold" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Clear all</TooltipContent>
-          </Tooltip>
-        </div>
-
-        {/* Main Content - Split view */}
-        <div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
-          {/* Request Section */}
-          <div className="flex-1 flex flex-col border-b lg:border-b-0 lg:border-r border-border min-h-[200px] sm:min-h-[300px] lg:min-h-0">
-            <RequestTabs
-              key={request.id}
-              params={params}
-              headers={headers}
-              body={body}
-              bodyContentType={bodyContentType}
-              auth={effectiveAuth}
-              usingGlobalAuth={usingGlobalAuth}
-              globalAuth={globalAuth}
-              onParamsChange={setParams}
-              onHeadersChange={setHeaders}
-              onBodyChange={setBody}
-              onBodyContentTypeChange={setBodyContentType}
-              onAuthChange={setAuthOverride}
-              onUseGlobalAuth={() => setAuthOverride(null)}
-            />
-          </div>
-
-          {/* Response Section */}
-          <div className="flex-1 flex flex-col min-h-[200px] sm:min-h-[300px] lg:min-h-0 overflow-hidden">
-            <ResponseViewer 
-              responseState={responseState} 
-              onDebugRequest={onDebugRequest ? (context) => {
-                // Enrich context with endpoint info
-                onDebugRequest({
-                  ...context,
-                  endpointName: request.name,
-                  endpointMethod: method,
-                  endpointPath: endpoint,
-                  requestBody: body || undefined,
-                })
-              } : undefined}
-              onExplainRequest={onExplainRequest ? (context) => {
-                // Enrich context with endpoint info
-                onExplainRequest({
-                  ...context,
-                  endpointName: request.name,
-                  endpointMethod: method,
-                  endpointPath: endpoint,
-                  requestBody: body || undefined,
-                })
-              } : undefined}
-            />
-          </div>
-        </div>
-      </div>
-    </TooltipProvider>
-  )
-}