@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/playground/request-tabs.tsx

@@ -0,0 +1,237 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import type { BrainfishRESTReqBody, BrainfishRESTAuth } from '@/lib/api-docs/types'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Badge } from '@/components/ui/badge'
+// import { Button } from '@/components/ui/button'
+import { ShieldCheck, Link as LinkIcon, WarningCircle } from '@phosphor-icons/react'
+import { KeyValueEditor, KeyValueItem } from './key-value-editor'
+import { BodyEditor } from './body-editor'
+import { AuthEditor } from './auth-editor'
+import { getAuthTypeLabel } from '@/lib/api-docs/auth'
+import { usePlaygroundNavigation, type PlaygroundTab } from '@/lib/api-docs/playground/navigation-context'
+import { cn } from '@/lib/utils'
+
+interface RequestTabsProps {
+  params: KeyValueItem[]
+  headers: KeyValueItem[]
+  body: string | null
+  bodyContentType: BrainfishRESTReqBody['contentType']
+  auth: BrainfishRESTAuth
+  usingGlobalAuth?: boolean
+  globalAuth?: BrainfishRESTAuth | null
+  onParamsChange: (params: KeyValueItem[]) => void
+  onHeadersChange: (headers: KeyValueItem[]) => void
+  onBodyChange: (body: string | null) => void
+  onBodyContentTypeChange: (contentType: BrainfishRESTReqBody['contentType']) => void
+  onAuthChange: (auth: BrainfishRESTAuth) => void
+  onUseGlobalAuth?: () => void
+}
+
+export function RequestTabs({
+  params,
+  headers,
+  body,
+  bodyContentType,
+  auth,
+  usingGlobalAuth = false,
+  globalAuth,
+  onParamsChange,
+  onHeadersChange,
+  onBodyChange,
+  onBodyContentTypeChange,
+  onAuthChange,
+  onUseGlobalAuth,
+}: RequestTabsProps) {
+  const paramsCount = params.filter((p) => p.active && p.key).length
+  const headersCount = headers.filter((h) => h.active && h.key).length
+  const hasBody = body !== null && body.length > 0
+  const hasAuth = auth.authType !== 'none'
+
+  // Always default to Parameters tab for consistency
+  const [activeTab, setActiveTab] = useState<PlaygroundTab>('params')
+  
+  // Get navigation context
+  const { state: navState, setActiveTab: syncActiveTab, clearHighlight } = usePlaygroundNavigation()
+  
+  // Sync with navigation context
+  useEffect(() => {
+    if (navState.activeTab && navState.activeTab !== activeTab) {
+      setActiveTab(navState.activeTab)
+    }
+  }, [navState.activeTab, activeTab])
+  
+  // Update context when tab changes locally
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab as PlaygroundTab)
+    syncActiveTab(tab as PlaygroundTab)
+    clearHighlight()
+  }
+  
+  // Check if a tab should show error indicator
+  const shouldShowTabError = (tab: PlaygroundTab) => {
+    if (!navState.showError || !navState.highlightField) return false
+    
+    switch (tab) {
+      case 'params':
+        return navState.highlightField.type === 'param'
+      case 'headers':
+        return navState.highlightField.type === 'header'
+      case 'body':
+        return navState.highlightField.type === 'body'
+      case 'auth':
+        return navState.highlightField.type === 'auth'
+      default:
+        return false
+    }
+  }
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleTabChange} className="flex flex-col h-full gap-0">
+      <TabsList className="w-full justify-start rounded-none border-b bg-muted/30 h-auto p-0 overflow-x-auto overflow-y-hidden flex-shrink-0">
+        <TabsTrigger
+          value="params"
+          className={cn(
+            "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap",
+            shouldShowTabError('params') && "border-red-500 data-[state=active]:border-red-500"
+          )}
+        >
+          <span className="hidden sm:inline">Parameters</span>
+          <span className="sm:hidden">Params</span>
+          {shouldShowTabError('params') ? (
+            <WarningCircle className="ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse" weight="fill" />
+          ) : paramsCount > 0 ? (
+            <Badge variant="secondary" className="ml-1 sm:ml-2 h-4 sm:h-5 px-1 sm:px-1.5 text-xs">
+              {paramsCount}
+            </Badge>
+          ) : null}
+        </TabsTrigger>
+        <TabsTrigger
+          value="body"
+          className={cn(
+            "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap",
+            shouldShowTabError('body') && "border-red-500 data-[state=active]:border-red-500"
+          )}
+        >
+          Body
+          {shouldShowTabError('body') ? (
+            <WarningCircle className="ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse" weight="fill" />
+          ) : hasBody ? (
+            <span className="ml-1 sm:ml-2 w-2 h-2 bg-primary rounded-full" />
+          ) : null}
+        </TabsTrigger>
+        <TabsTrigger
+          value="headers"
+          className={cn(
+            "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap",
+            shouldShowTabError('headers') && "border-red-500 data-[state=active]:border-red-500"
+          )}
+        >
+          Headers
+          {shouldShowTabError('headers') ? (
+            <WarningCircle className="ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse" weight="fill" />
+          ) : headersCount > 0 ? (
+            <Badge variant="secondary" className="ml-1 sm:ml-2 h-4 sm:h-5 px-1 sm:px-1.5 text-xs">
+              {headersCount}
+            </Badge>
+          ) : null}
+        </TabsTrigger>
+        <TabsTrigger
+          value="auth"
+          className={cn(
+            "rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-background px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm whitespace-nowrap",
+            shouldShowTabError('auth') && "border-red-500 data-[state=active]:border-red-500"
+          )}
+        >
+          <span className="hidden sm:inline">Authorization</span>
+          <span className="sm:hidden">Auth</span>
+          {shouldShowTabError('auth') ? (
+            <WarningCircle className="ml-1 sm:ml-2 h-4 w-4 text-red-500 animate-pulse" weight="fill" />
+          ) : usingGlobalAuth ? (
+            <LinkIcon className="ml-1 sm:ml-2 h-3.5 w-3.5 text-green-600 dark:text-green-400" weight="bold" />
+          ) : hasAuth ? (
+            <span className="ml-1 sm:ml-2 w-2 h-2 bg-primary rounded-full" />
+          ) : null}
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="params" className="flex-1 m-0 overflow-auto">
+        <KeyValueEditor
+          items={params}
+          onChange={onParamsChange}
+          title="Query Parameters"
+          keyLabel="Name"
+          valueLabel="Value"
+          showError={navState.highlightField?.type === 'param' && navState.showError}
+        />
+      </TabsContent>
+
+      <TabsContent value="body" className="flex-1 m-0 overflow-auto">
+        <BodyEditor
+          body={body}
+          contentType={bodyContentType}
+          onBodyChange={onBodyChange}
+          onContentTypeChange={onBodyContentTypeChange}
+          showError={navState.highlightField?.type === 'body' && navState.showError}
+        />
+      </TabsContent>
+
+      <TabsContent value="headers" className="flex-1 m-0 overflow-auto">
+        <KeyValueEditor
+          items={headers}
+          onChange={onHeadersChange}
+          title="Request Headers"
+          keyLabel="Name"
+          valueLabel="Value"
+          showError={navState.highlightField?.type === 'header' && navState.showError}
+        />
+      </TabsContent>
+
+      <TabsContent value="auth" className="flex-1 m-0 overflow-hidden flex flex-col">
+        {/* Subtle Auth Status Bar */}
+        {globalAuth && globalAuth.authType !== 'none' && (
+          <div className="flex items-center justify-between px-4 py-1.5 bg-muted/40 border-b border-border text-xs">
+            {usingGlobalAuth ? (
+              <>
+                <span className="flex items-center gap-1.5 text-muted-foreground">
+                  <LinkIcon className="h-3 w-3 text-green-600 dark:text-green-400" weight="bold" />
+                  <span>Global: <span className="text-foreground font-medium">{getAuthTypeLabel(globalAuth)}</span></span>
+                </span>
+                <button
+                  onClick={() => onAuthChange({ ...globalAuth })}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  Customize
+                </button>
+              </>
+            ) : (
+              <>
+                <span className="flex items-center gap-1.5 text-muted-foreground">
+                  <ShieldCheck className="h-3 w-3" weight="bold" />
+                  <span>Custom auth</span>
+                </span>
+                {onUseGlobalAuth && (
+                  <button
+                    onClick={onUseGlobalAuth}
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    Use global
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+        )}
+        
+        <div className="flex-1 overflow-auto">
+          <AuthEditor 
+            auth={auth} 
+            onChange={onAuthChange} 
+            showError={navState.highlightField?.type === 'auth' && navState.showError}
+          />
+        </div>
+      </TabsContent>
+    </Tabs>
+  )
+}

package/renderer/components/docs-viewer/playground/response-cards/idle-card.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { WifiHigh } from '@phosphor-icons/react'
+import { Badge } from '@/components/ui/badge'
+
+export function IdleCard() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-center flex-1 p-8">
+        <div className="text-center">
+          <WifiHigh className="h-16 w-16 text-muted-foreground/30 mx-auto mb-4" weight="thin" />
+          <p className="text-muted-foreground mb-2">Send a request to see the response</p>
+          <p className="text-sm text-muted-foreground/70">
+            Press <kbd className="px-2 py-1 bg-muted rounded text-xs font-mono">Enter</kbd> or click{' '}
+            <Badge variant="default" className="text-xs">Send</Badge>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,93 @@
+'use client'
+
+// Export types
+export * from './types'
+
+// Export individual cards
+export { IdleCard } from './idle-card'
+export { LoadingCard } from './loading-card'
+export { NetworkErrorCard } from './network-error-card'
+export { ResponseBodyCard } from './response-body-card'
+
+import { IdleCard } from './idle-card'
+import { LoadingCard } from './loading-card'
+import { NetworkErrorCard } from './network-error-card'
+import { ResponseBodyCard } from './response-body-card'
+import type { PlaygroundResponseState } from '@/lib/api-docs/playground/types'
+import type { DebugContext } from '../response-viewer'
+
+interface ResponseCardRendererProps {
+  responseState: PlaygroundResponseState
+  onDebugRequest?: (context: DebugContext) => void
+  onExplainRequest?: (context: DebugContext) => void
+}
+
+/**
+ * Renders the appropriate response card based on the response state.
+ * This is the main entry point for response visualization.
+ */
+export function ResponseCardRenderer({ responseState, onDebugRequest, onExplainRequest }: ResponseCardRendererProps) {
+  // Idle state
+  if (responseState.type === 'idle') {
+    return <IdleCard />
+  }
+
+  // Loading state (but not streaming)
+  if (responseState.type === 'loading') {
+    return <LoadingCard />
+  }
+
+  // Error state with no response (network error)
+  if (responseState.type === 'error' && !responseState.response) {
+    return <NetworkErrorCard errorMessage={responseState.error} />
+  }
+
+  // Get response for success, streaming, or error with response
+  const response = responseState.response
+  if (!response) {
+    return null
+  }
+
+  const isStreaming = responseState.type === 'streaming'
+  const isError = response.status >= 400
+  
+  // Get content type
+  const contentType = response.headers['content-type'] || response.headers['Content-Type'] || null
+
+  // Build context for AI
+  const buildContext = () => ({
+    status: response.status,
+    statusText: response.statusText,
+    responseBody: typeof response.body === 'string' ? response.body : '[Binary content]',
+    errorMessage: response.error,
+  })
+
+  // Handle debug request (for errors)
+  const handleDebug = onDebugRequest ? () => {
+    onDebugRequest(buildContext())
+  } : undefined
+
+  // Handle explain request (for success)
+  const handleExplain = onExplainRequest ? () => {
+    onExplainRequest(buildContext())
+  } : undefined
+
+  return (
+    <ResponseBodyCard
+      meta={{
+        status: response.status,
+        statusText: response.statusText,
+        responseTime: response.responseTime,
+        size: response.size,
+        isStreaming: isStreaming || response.isStreaming,
+      }}
+      body={typeof response.body === 'string' ? response.body : '[Binary content]'}
+      headers={response.headers}
+      contentType={contentType}
+      isError={isError}
+      errorMessage={response.error}
+      onDebug={isError ? handleDebug : undefined}
+      onExplain={!isError ? handleExplain : undefined}
+    />
+  )
+}

package/renderer/components/docs-viewer/playground/response-cards/loading-card.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { Spinner } from '@phosphor-icons/react'
+
+export function LoadingCard() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-center flex-1 p-8">
+        <div className="text-center">
+          <Spinner size={32} className="text-muted-foreground animate-spin mx-auto" />
+          <p className="text-sm text-muted-foreground mt-3">Sending request...</p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/renderer/components/docs-viewer/playground/response-cards/network-error-card.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { WifiSlash } from '@phosphor-icons/react'
+
+interface NetworkErrorCardProps {
+  errorMessage?: string
+}
+
+export function NetworkErrorCard({ errorMessage }: NetworkErrorCardProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-center flex-1 p-8">
+        <div className="text-center">
+          <WifiSlash className="h-16 w-16 text-red-500/50 mx-auto mb-4" weight="thin" />
+          <p className="text-red-500 font-medium mb-2">Request Failed</p>
+          <p className="text-sm text-muted-foreground max-w-md">
+            {errorMessage || 'An error occurred while sending the request'}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/renderer/components/docs-viewer/playground/response-cards/response-body-card.tsx

@@ -0,0 +1,268 @@
+'use client'
+
+import { useState, useMemo, useCallback } from 'react'
+import { Copy, Check, Clock, Database, WarningCircle, Lightning, Bug, Lightbulb } from '@phosphor-icons/react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { CodeViewer, SupportedLanguage } from '../code-editor'
+import type { ResponseMeta } from './types'
+
+interface ResponseBodyCardProps {
+  meta: ResponseMeta
+  body: string
+  headers: Record<string, string>
+  contentType: string | null
+  isError?: boolean
+  errorMessage?: string
+  onDebug?: () => void
+  onExplain?: () => void
+}
+
+// Detect language from content type
+function detectLanguage(contentType: string | null, body?: string): SupportedLanguage {
+  if (!contentType) return 'plaintext'
+  
+  if (contentType.includes('json')) return 'json'
+  if (contentType.includes('xml')) return 'xml'
+  if (contentType.includes('html')) return 'html'
+  if (contentType.includes('javascript')) return 'javascript'
+  if (contentType.includes('typescript')) return 'typescript'
+  if (contentType.includes('event-stream')) return 'json'
+  if (body && body.trim().startsWith('{')) return 'json'
+  
+  return 'plaintext'
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+}
+
+// Format response body - handles both SSE and regular JSON
+function formatBody(body: string, contentType: string | null, isSSE: boolean): string {
+  if (!body) return ''
+  
+  // Check if this is SSE format
+  if (isSSE || body.includes('data: ')) {
+    const lines = body.split(/\r?\n/).filter(line => line.trim())
+    const events: string[] = []
+    
+    for (const line of lines) {
+      if (line.startsWith('data: ')) {
+        const data = line.slice(6)
+        try {
+          const parsed = JSON.parse(data)
+          events.push(JSON.stringify(parsed, null, 2))
+        } catch {
+          events.push(data)
+        }
+      } else {
+        events.push(line)
+      }
+    }
+    
+    return events.join('\n')
+  }
+  
+  // Regular JSON - try to parse and format
+  if (contentType?.includes('json')) {
+    try {
+      const parsed = JSON.parse(body)
+      return JSON.stringify(parsed, null, 2)
+    } catch {
+      return body
+    }
+  }
+  
+  return body
+}
+
+export function ResponseBodyCard({ 
+  meta, 
+  body, 
+  headers, 
+  contentType, 
+  isError = false,
+  errorMessage,
+  onDebug,
+  onExplain
+}: ResponseBodyCardProps) {
+  const [copied, setCopied] = useState(false)
+  
+  const isSSE = contentType?.includes('event-stream')
+  const detectedLanguage = useMemo(() => detectLanguage(contentType, body), [contentType, body])
+  const formattedBody = useMemo(() => formatBody(body, contentType, !!isSSE), [body, contentType, isSSE])
+  const headersCount = Object.keys(headers).length
+  
+  const copyToClipboard = useCallback((text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [])
+  
+  const statusVariant = isError ? 'destructive' : 'default'
+
+  return (
+    <TooltipProvider>
+      <div className="flex flex-col h-full">
+        {/* Response Meta */}
+        <div className="sticky top-0 z-10 flex items-center justify-between bg-muted/50 px-4 py-3 border-b border-border">
+          <div className="flex items-center gap-4 text-sm">
+            {/* Status */}
+            <Badge variant={statusVariant} className="font-semibold">
+              {meta.status} {meta.statusText}
+            </Badge>
+
+            {/* Time */}
+            <span className="flex items-center gap-1.5 text-muted-foreground">
+              <Clock className="h-4 w-4" weight="bold" />
+              <span>{meta.responseTime}ms</span>
+            </span>
+
+            {/* Size */}
+            <span className="flex items-center gap-1.5 text-muted-foreground">
+              <Database className="h-4 w-4" weight="bold" />
+              <span>{formatSize(meta.size)}</span>
+            </span>
+
+            {/* Streaming indicator */}
+            {meta.isStreaming && (
+              <span className="flex items-center gap-1.5 text-amber-600 dark:text-amber-400">
+                <Lightning className="h-4 w-4 animate-pulse" weight="fill" />
+                <span>SSE</span>
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {errorMessage && (
+              <span className="flex items-center gap-1.5 text-red-500 text-sm">
+                <WarningCircle className="h-4 w-4" weight="fill" />
+                Error
+              </span>
+            )}
+            
+            {/* Copy button */}
+            {formattedBody && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => copyToClipboard(formattedBody)}
+                  >
+                    {copied ? (
+                      <Check className="h-4 w-4 text-green-500" weight="bold" />
+                    ) : (
+                      <Copy className="h-4 w-4" weight="bold" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{copied ? 'Copied!' : 'Copy response'}</TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <Tabs defaultValue="body" className="flex flex-col flex-1 gap-0">
+          <TabsList className="w-full justify-start rounded-none border-b bg-background h-auto p-0">
+            <TabsTrigger
+              value="body"
+              className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary px-4 py-3"
+            >
+              Body
+            </TabsTrigger>
+            <TabsTrigger
+              value="headers"
+              className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary px-4 py-3"
+            >
+              Headers
+              <Badge variant="secondary" className="ml-2 h-5 px-1.5">
+                {headersCount}
+              </Badge>
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="body" className="flex-1 m-0 overflow-hidden relative">
+            {formattedBody ? (
+              <CodeViewer
+                value={formattedBody}
+                language={detectedLanguage}
+                height="100%"
+                minHeight={200}
+                theme="dark"
+                showLineNumbers={false}
+                showBorder={false}
+                rounded={false}
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                No response body
+              </div>
+            )}
+            
+            {/* Action buttons - overlay on code viewer */}
+            <div className="absolute top-2.5 right-3 z-20 flex items-center gap-2">
+              {/* Explain button - for success responses */}
+              {!isError && onExplain && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-white/70 bg-white/10 hover:bg-white/20 hover:text-white transition-colors rounded-md backdrop-blur-sm"
+                      onClick={onExplain}
+                    >
+                      <Lightbulb className="h-3.5 w-3.5" weight="bold" />
+                      <span>Explain</span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">Ask AI to explain this response</TooltipContent>
+                </Tooltip>
+              )}
+              
+              {/* Debug button - for error responses */}
+              {isError && onDebug && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-white/70 bg-white/10 hover:bg-white/20 hover:text-white transition-colors rounded-md backdrop-blur-sm"
+                      onClick={onDebug}
+                    >
+                      <Bug className="h-3.5 w-3.5" weight="bold" />
+                      <span>Debug</span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">Ask AI to help debug this error</TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="headers" className="flex-1 m-0 overflow-auto">
+            <div className="divide-y divide-border">
+              {Object.entries(headers).map(([key, value]) => (
+                <div key={key} className="flex items-start gap-4 px-4 py-3">
+                  <span className="font-mono text-sm font-semibold text-foreground min-w-[180px]">
+                    {key}
+                  </span>
+                  <span className="font-mono text-sm text-muted-foreground break-all">
+                    {value}
+                  </span>
+                </div>
+              ))}
+              {headersCount === 0 && (
+                <div className="flex items-center justify-center p-8 text-muted-foreground">
+                  No response headers
+                </div>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </TooltipProvider>
+  )
+}