@brainfish-ai/devdoc 0.1.42 → 0.1.44

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

@@ -1,237 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-'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

@@ -1,93 +0,0 @@
-'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

@@ -1,16 +0,0 @@
-'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

@@ -1,23 +0,0 @@
-'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

@@ -1,268 +0,0 @@
-'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>
-  )
-}