364 lines
12 KiB
TypeScript
364 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Label } from '@/components/ui/label'
|
|
import { LoadingSpinner } from '@/components/ui/loading-spinner'
|
|
import {
|
|
Play,
|
|
Settings,
|
|
Zap,
|
|
Copy,
|
|
Download,
|
|
AlertCircle,
|
|
CheckCircle,
|
|
Clock,
|
|
DollarSign
|
|
} from 'lucide-react'
|
|
|
|
interface TestResult {
|
|
testRun: {
|
|
id: string
|
|
input: string
|
|
output: string | null
|
|
success: boolean
|
|
error: string | null
|
|
createdAt: string
|
|
}
|
|
result: {
|
|
success: boolean
|
|
output: string | null
|
|
error: string | null
|
|
}
|
|
cost: number
|
|
model: string
|
|
timestamp: string
|
|
}
|
|
|
|
interface PromptDebuggerProps {
|
|
promptId: string
|
|
userId: string
|
|
content: string
|
|
onTestComplete?: (result: TestResult) => void
|
|
}
|
|
|
|
const AI_MODELS = [
|
|
{ id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', provider: 'OpenAI', cost: '$0.001/1K tokens' },
|
|
{ id: 'gpt-4', name: 'GPT-4', provider: 'OpenAI', cost: '$0.03/1K tokens' },
|
|
{ id: 'gpt-4-turbo', name: 'GPT-4 Turbo', provider: 'OpenAI', cost: '$0.01/1K tokens' },
|
|
{ id: 'claude-3-sonnet', name: 'Claude 3 Sonnet', provider: 'Anthropic', cost: '$0.003/1K tokens' },
|
|
{ id: 'claude-3-haiku', name: 'Claude 3 Haiku', provider: 'Anthropic', cost: '$0.00025/1K tokens' }
|
|
]
|
|
|
|
export function PromptDebugger({
|
|
promptId,
|
|
userId,
|
|
content,
|
|
onTestComplete
|
|
}: PromptDebuggerProps) {
|
|
const t = useTranslations('studio')
|
|
const [selectedModel, setSelectedModel] = useState('gpt-3.5-turbo')
|
|
const [temperature, setTemperature] = useState(0.7)
|
|
const [maxTokens, setMaxTokens] = useState(1000)
|
|
const [isRunning, setIsRunning] = useState(false)
|
|
const [testResult, setTestResult] = useState<TestResult | null>(null)
|
|
const [showSettings, setShowSettings] = useState(false)
|
|
|
|
const handleRunTest = async () => {
|
|
if (!content.trim() || isRunning) return
|
|
|
|
setIsRunning(true)
|
|
setTestResult(null)
|
|
|
|
try {
|
|
const response = await fetch(`/api/prompts/${promptId}/test`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
content,
|
|
model: selectedModel,
|
|
temperature,
|
|
maxTokens,
|
|
userId
|
|
})
|
|
})
|
|
|
|
if (response.ok) {
|
|
const result = await response.json()
|
|
setTestResult(result)
|
|
onTestComplete?.(result)
|
|
} else {
|
|
const error = await response.json()
|
|
setTestResult({
|
|
testRun: {
|
|
id: '',
|
|
input: content,
|
|
output: null,
|
|
success: false,
|
|
error: error.error || 'Test failed',
|
|
createdAt: new Date().toISOString()
|
|
},
|
|
result: {
|
|
success: false,
|
|
output: null,
|
|
error: error.error || 'Test failed'
|
|
},
|
|
cost: 0,
|
|
model: selectedModel,
|
|
timestamp: new Date().toISOString()
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('Error running test:', error)
|
|
setTestResult({
|
|
testRun: {
|
|
id: '',
|
|
input: content,
|
|
output: null,
|
|
success: false,
|
|
error: 'Network error occurred',
|
|
createdAt: new Date().toISOString()
|
|
},
|
|
result: {
|
|
success: false,
|
|
output: null,
|
|
error: 'Network error occurred'
|
|
},
|
|
cost: 0,
|
|
model: selectedModel,
|
|
timestamp: new Date().toISOString()
|
|
})
|
|
} finally {
|
|
setIsRunning(false)
|
|
}
|
|
}
|
|
|
|
const copyToClipboard = (text: string) => {
|
|
navigator.clipboard.writeText(text)
|
|
}
|
|
|
|
const downloadResult = () => {
|
|
if (!testResult) return
|
|
|
|
const data = {
|
|
prompt: content,
|
|
model: testResult.model,
|
|
timestamp: testResult.timestamp,
|
|
result: testResult.result,
|
|
cost: testResult.cost
|
|
}
|
|
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `prompt-test-${Date.now()}.json`
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
const selectedModelInfo = AI_MODELS.find(m => m.id === selectedModel)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Controls */}
|
|
<div className="bg-card rounded-lg border border-border p-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-semibold text-foreground">{t('runTest')}</h3>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowSettings(!showSettings)}
|
|
className="flex items-center space-x-1"
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
<span>Settings</span>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Model Selection */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<Label className="text-sm font-medium">AI Model</Label>
|
|
<select
|
|
value={selectedModel}
|
|
onChange={(e) => setSelectedModel(e.target.value)}
|
|
className="mt-1 w-full bg-background border border-input rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
|
|
>
|
|
{AI_MODELS.map(model => (
|
|
<option key={model.id} value={model.id}>
|
|
{model.name} ({model.provider}) - {model.cost}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Advanced Settings */}
|
|
{showSettings && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 border-t border-border">
|
|
<div>
|
|
<Label className="text-sm font-medium">
|
|
Temperature: {temperature}
|
|
</Label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.1"
|
|
value={temperature}
|
|
onChange={(e) => setTemperature(parseFloat(e.target.value))}
|
|
className="mt-1 w-full"
|
|
/>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Controls randomness (0 = deterministic, 2 = very random)
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-sm font-medium">Max Tokens</Label>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="4000"
|
|
value={maxTokens}
|
|
onChange={(e) => setMaxTokens(parseInt(e.target.value))}
|
|
className="mt-1 w-full bg-background border border-input rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Maximum response length
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Run Button */}
|
|
<div className="flex items-center justify-between pt-4">
|
|
<div className="text-sm text-muted-foreground">
|
|
{selectedModelInfo && (
|
|
<span>Using {selectedModelInfo.name} • {selectedModelInfo.cost}</span>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleRunTest}
|
|
disabled={isRunning || !content.trim()}
|
|
className="flex items-center space-x-2"
|
|
>
|
|
{isRunning ? (
|
|
<LoadingSpinner size="sm" />
|
|
) : (
|
|
<Play className="h-4 w-4" />
|
|
)}
|
|
<span>{isRunning ? 'Running...' : t('runTest')}</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Results */}
|
|
<div className="bg-card rounded-lg border border-border">
|
|
<div className="p-4 border-b border-border">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-semibold text-foreground">{t('testResults')}</h3>
|
|
{testResult && (
|
|
<div className="flex items-center space-x-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => testResult.result.output && copyToClipboard(testResult.result.output)}
|
|
disabled={!testResult.result.output}
|
|
className="h-7"
|
|
>
|
|
<Copy className="h-3 w-3 mr-1" />
|
|
Copy
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={downloadResult}
|
|
className="h-7"
|
|
>
|
|
<Download className="h-3 w-3 mr-1" />
|
|
Export
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
{isRunning ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="text-center">
|
|
<LoadingSpinner size="lg" />
|
|
<p className="mt-4 text-muted-foreground">Running prompt test...</p>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Testing with {selectedModelInfo?.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : testResult ? (
|
|
<div className="space-y-4">
|
|
{/* Status */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
{testResult.result.success ? (
|
|
<CheckCircle className="h-5 w-5 text-green-500" />
|
|
) : (
|
|
<AlertCircle className="h-5 w-5 text-red-500" />
|
|
)}
|
|
<span className={`font-medium ${
|
|
testResult.result.success ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
|
|
}`}>
|
|
{testResult.result.success ? 'Test Successful' : 'Test Failed'}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4 text-sm text-muted-foreground">
|
|
<div className="flex items-center space-x-1">
|
|
<Clock className="h-3 w-3" />
|
|
<span>{new Date(testResult.timestamp).toLocaleTimeString()}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<DollarSign className="h-3 w-3" />
|
|
<span>${testResult.cost.toFixed(6)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Output */}
|
|
<div className="bg-muted rounded-lg p-4">
|
|
{testResult.result.success && testResult.result.output ? (
|
|
<pre className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">
|
|
{testResult.result.output}
|
|
</pre>
|
|
) : (
|
|
<div className="text-red-600 dark:text-red-400">
|
|
<p className="font-medium">Error:</p>
|
|
<p className="text-sm mt-1">{testResult.result.error}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center py-12 text-center">
|
|
<div>
|
|
<Zap className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
<p className="text-muted-foreground mb-2">
|
|
{t('clickRunTestToSee')}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Test your prompt with AI models to see the output
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|