Skip to content

Commit

Permalink
format
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronvg
aaronvg committed Jan 11, 2025
1 parent cfcd0bf commit b92edf5
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 73 deletions.
56 changes: 28 additions & 28 deletions ...-project-panel/playground-panel/prompt-preview/test-panel/components/ResponseRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
const [llmCopied, setLlmCopied] = useState(false)

if (!response) {
return <div className="text-xs text-muted-foreground">Waiting for response...</div>
return <div className='text-xs text-muted-foreground'>Waiting for response...</div>
}

const llmFailure = response.llm_failure()
Expand Down Expand Up @@ -54,10 +54,10 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
}

return (
<div className="space-y-4">
<div className='space-y-4'>
{/* Metadata Section */}
{llmResponse && (
<div className="flex flex-wrap gap-2">
<div className='flex flex-wrap gap-2'>
<MetadataBadges llmResponse={llmResponse} />
</div>
)}
Expand All @@ -66,9 +66,9 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
<div className={`grid ${shouldShowParsedSeparately() ? 'grid-cols-2' : 'grid-cols-1'} gap-4`}>
{/* LLM Response */}
{llmResponse && (
<div className="relative group">
<div className="space-y-2">
<span className="text-xs text-muted-foreground">Raw LLM Response</span>
<div className='relative group'>
<div className='space-y-2'>
<span className='text-xs text-muted-foreground'>Raw LLM Response</span>
<RenderPromptPart text={llmResponse.content} />
</div>
<CopyButton copied={llmCopied} onCopy={handleLlmCopy} />
Expand All @@ -77,12 +77,12 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st

{/* Parsed Response */}
{shouldShowParsedSeparately() && (
<div className="relative group">
<div className="space-y-2">
<span className="flex flex-row gap-x-1 text-xs text-muted-foreground">
<div className='relative group'>
<div className='space-y-2'>
<span className='flex flex-row gap-x-1 text-xs text-muted-foreground'>
<div>Parsed Response</div>
{parsedResponse && typeof parsedResponse !== 'string' && parsedResponse.check_count > 0 ? (
<div className="flex items-center space-x-1">
<div className='flex items-center space-x-1'>
{/* <CheckCircle className="w-3 h-3" /> */}
<span>({parsedResponse.check_count} checks ran)</span>
</div>
Expand All @@ -96,7 +96,7 @@ export const ResponseRenderer: React.FC<ResponseRendererProps> = ({ response, st
</div>

{/* Error Messages */}
{failureMessage && <pre className="text-xs text-red-500 text-balance">Error: {failureMessage}</pre>}
{failureMessage && <pre className='text-xs text-red-500 text-balance'>Error: {failureMessage}</pre>}
</div>
)
}
Expand All @@ -106,7 +106,7 @@ export const RawResponseRenderer: React.FC<{
response?: WasmFunctionResponse | WasmTestResponse
}> = ({ response }) => {
if (!response) {
return <div className="text-xs text-muted-foreground">Waiting for response...</div>
return <div className='text-xs text-muted-foreground'>Waiting for response...</div>
}
return <RenderPromptPart text={response.llm_response()?.content ?? ''} />
}
Expand All @@ -115,8 +115,8 @@ const MetadataBadges: React.FC<{ llmResponse: WasmLLMResponse }> = ({ llmRespons
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Badge variant="outline" className="flex items-center space-x-1 font-light text-muted-foreground">
<Brain className="w-3 h-3" />
<Badge variant='outline' className='flex items-center space-x-1 font-light text-muted-foreground'>
<Brain className='w-3 h-3' />
<span>{llmResponse.model}</span>
</Badge>
</TooltipTrigger>
Expand All @@ -125,8 +125,8 @@ const MetadataBadges: React.FC<{ llmResponse: WasmLLMResponse }> = ({ llmRespons

<Tooltip>
<TooltipTrigger asChild>
<Badge variant="outline" className="flex items-center space-x-1 font-light text-muted-foreground">
<Clock className="w-3 h-3" />
<Badge variant='outline' className='flex items-center space-x-1 font-light text-muted-foreground'>
<Clock className='w-3 h-3' />
<span>{(Number(llmResponse.latency_ms) / 1000).toFixed(2)}s</span>
</Badge>
</TooltipTrigger>
Expand All @@ -137,41 +137,41 @@ const MetadataBadges: React.FC<{ llmResponse: WasmLLMResponse }> = ({ llmRespons

const CopyButton: React.FC<{ copied: boolean; onCopy: () => void }> = ({ copied, onCopy }) => (
<Button
variant="ghost"
size="icon"
className="absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100"
variant='ghost'
size='icon'
className='absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100'
onClick={onCopy}
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
{copied ? <Check className='w-4 h-4' /> : <Copy className='w-4 h-4' />}
</Button>
)

const LLMFailureView: React.FC<{ failure: WasmLLMFailure }> = ({ failure }) => {
const [isExpanded, setIsExpanded] = useState(false)

return (
<div className="space-y-3 text-xs">
<div className="flex items-center space-x-2 text-destructive">
<AlertCircle className="w-4 h-4" />
<span className="font-semibold">{failure.code}</span>
<div className='space-y-3 text-xs'>
<div className='flex items-center space-x-2 text-destructive'>
<AlertCircle className='w-4 h-4' />
<span className='font-semibold'>{failure.code}</span>
</div>

<Button variant="ghost" size="sm" onClick={() => setIsExpanded(!isExpanded)} className="p-0 h-auto font-normal">
<Button variant='ghost' size='sm' onClick={() => setIsExpanded(!isExpanded)} className='p-0 h-auto font-normal'>
{isExpanded ? (
<>
<ChevronUp className="mr-1 w-4 h-4" />
<ChevronUp className='mr-1 w-4 h-4' />
Hide full message
</>
) : (
<>
<ChevronDown className="mr-1 w-4 h-4" />
<ChevronDown className='mr-1 w-4 h-4' />
Show full message
</>
)}
</Button>

{isExpanded && (
<div className="p-3 mt-2 font-mono text-xs whitespace-pre-wrap rounded-md bg-muted">{failure.message}</div>
<div className='p-3 mt-2 font-mono text-xs whitespace-pre-wrap rounded-md bg-muted'>{failure.message}</div>
)}

{/* <MetadataBadges llmResponse={failure.} /> */}
Expand Down
90 changes: 45 additions & 45 deletions .../baml-project-panel/playground-panel/prompt-preview/test-panel/components/TabularView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,20 +50,20 @@ const CopyButton = ({
const content =
responseViewType === 'parsed'
? JSON.stringify(JSON.parse(response?.parsed_response()?.value ?? ''), null, 2)
: response?.llm_response()?.content ?? ''
: (response?.llm_response()?.content ?? '')
navigator.clipboard.writeText(content)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}

return (
<Button
variant="ghost"
size="icon"
className="absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100"
variant='ghost'
size='icon'
className='absolute top-0 right-0 w-4 h-4 opacity-0 transition-opacity bg-muted group-hover:opacity-100'
onClick={handleCopy}
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
{copied ? <Check className='w-4 h-4' /> : <Copy className='w-4 h-4' />}
</Button>
)
}
Expand All @@ -80,22 +80,22 @@ const ResponseContent = ({
const failureMessage = response && 'failure_message' in response ? response.failure_message() : undefined

return (
<div className="">
{failureMessage && <pre className="pb-2 text-xs text-red-500 text-balance">Error: {failureMessage}</pre>}
<div className=''>
{failureMessage && <pre className='pb-2 text-xs text-red-500 text-balance'>Error: {failureMessage}</pre>}
{responseViewType === 'parsed' && (
<>
<ParsedResponseRenderer response={getTestStateResponse(state)} />

{getExplanation(state) && (
<div className="mt-2 text-xs text-muted-foreground/80">{getExplanation(state)}</div>
<div className='mt-2 text-xs text-muted-foreground/80'>{getExplanation(state)}</div>
)}
</>
)}
{responseViewType === 'pretty' && (
<MarkdownRenderer source={getTestStateResponse(state)?.llm_response()?.content || ''} />
)}
{responseViewType === 'raw' && (
<pre className="font-sans text-xs whitespace-pre-wrap break-words">
<pre className='font-sans text-xs whitespace-pre-wrap break-words'>
{getTestStateResponse(state)?.llm_response()?.content}
</pre>
)}
Expand Down Expand Up @@ -134,53 +134,53 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
}, [selectedItem])

return (
<div className="space-y-4">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<div className='space-y-4'>
<div className='flex items-center space-x-4'>
<div className='flex items-center space-x-2'>
<input
type="checkbox"
id="showInputs"
type='checkbox'
id='showInputs'
checked={config.showInputs}
onChange={() => toggleConfig('showInputs')}
className="w-4 h-4 rounded opacity-80 text-primary focus:ring-primary"
className='w-4 h-4 rounded opacity-80 text-primary focus:ring-primary'
/>
<Label htmlFor="showInputs" className="text-muted-foreground/80">
<Label htmlFor='showInputs' className='text-muted-foreground/80'>
Inputs
</Label>
</div>
<div className="flex items-center space-x-2">
<div className='flex items-center space-x-2'>
<input
type="checkbox"
id="showModel"
type='checkbox'
id='showModel'
checked={config.showModel}
onChange={() => toggleConfig('showModel')}
className="w-4 h-4 rounded opacity-80 text-primary focus:ring-primary"
className='w-4 h-4 rounded opacity-80 text-primary focus:ring-primary'
/>
<Label htmlFor="showModel" className="text-muted-foreground/80">
<Label htmlFor='showModel' className='text-muted-foreground/80'>
Model
</Label>
</div>
</div>

<Table className="w-full table-fixed">
<Table className='w-full table-fixed'>
<TableHeader>
<TableRow>
<TableHead className="w-[8%] py-1">Test</TableHead>
{config.showInputs && <TableHead className="w-[32%] py-1">Inputs</TableHead>}
<TableHead className='w-[8%] py-1'>Test</TableHead>
{config.showInputs && <TableHead className='w-[32%] py-1'>Inputs</TableHead>}
<TableHead className={`${config.showModel ? 'w-[35%]' : 'w-[47%]'} py-1`}>
<Select value={config.responseViewType} onValueChange={handleResponseTypeChange}>
<SelectTrigger className="w-full text-left">
<SelectValue placeholder="Response Type" />
<SelectTrigger className='w-full text-left'>
<SelectValue placeholder='Response Type' />
</SelectTrigger>
<SelectContent>
<SelectItem value="parsed">Parsed Response</SelectItem>
<SelectItem value="pretty">Raw Response (markdown)</SelectItem>
<SelectItem value="raw">Raw Response</SelectItem>
<SelectItem value='parsed'>Parsed Response</SelectItem>
<SelectItem value='pretty'>Raw Response (markdown)</SelectItem>
<SelectItem value='raw'>Raw Response</SelectItem>
</SelectContent>
</Select>
</TableHead>
<TableHead className="w-[10%] px-1 py-1">Status</TableHead>
{config.showModel && <TableHead className="w-[10%] py-1">Model</TableHead>}
<TableHead className='w-[10%] px-1 py-1'>Status</TableHead>
{config.showModel && <TableHead className='w-[10%] py-1'>Model</TableHead>}
</TableRow>
</TableHeader>
<TableBody>
Expand All @@ -197,11 +197,11 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
)}
onClick={() => setSelectedItem(test.functionName, test.testName)}
>
<TableCell className="px-1 py-1">
<div className="flex flex-col items-center space-y-2">
<TableCell className='px-1 py-1'>
<div className='flex flex-col items-center space-y-2'>
<Button
variant="ghost"
size="icon"
variant='ghost'
size='icon'
onClick={(e) => {
e.stopPropagation() // Prevent row selection when clicking the button
setRunningTests([
Expand All @@ -211,19 +211,19 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
},
])
}}
className="w-6 h-6"
className='w-6 h-6'
>
<Play className="w-4 h-4 text-purple-400" />
<Play className='w-4 h-4 text-purple-400' />
</Button>
<span className="text-xs truncate whitespace-pre-wrap break-all text-muted-foreground">
<span className='text-xs truncate whitespace-pre-wrap break-all text-muted-foreground'>
{test.testName}
</span>
</div>
</TableCell>
{config.showInputs && (
<TableCell className="py-1 whitespace-pre-wrap break-words">
<TableCell className='py-1 whitespace-pre-wrap break-words'>
<ErrorBoundary fallbackRender={() => <div>Error rendering input</div>}>
<div className="max-h-[400px] overflow-auto text-xs">
<div className='max-h-[400px] overflow-auto text-xs'>
{test.input?.reduce((acc: Record<string, any>, input: { name?: string; value: any }) => {
let value = input.value
if (typeof value === 'string') {
Expand Down Expand Up @@ -260,7 +260,7 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
</ErrorBoundary>
</TableCell>
)}
<TableCell className="px-1 py-1">
<TableCell className='px-1 py-1'>
{/* <ScrollArea
className="relative max-h-[500px] flex-1"
type="always"
Expand All @@ -272,16 +272,16 @@ export const TabularView: React.FC<TabularViewProps> = ({ currentRun }) => {
/>
{/* </ScrollArea> */}
</TableCell>
<TableCell className="px-1 py-1">
<TableCell className='px-1 py-1'>
<TestStatus status={test.response.status} finalState={getStatus(test.response)} />
{test.response.status === 'error' && (
<div className="mt-1 text-xs text-red-500">{test.response.message}</div>
<div className='mt-1 text-xs text-red-500'>{test.response.message}</div>
)}
</TableCell>
{config.showModel && (
<TableCell className="px-1 py-1 whitespace-normal">
<TableCell className='px-1 py-1 whitespace-normal'>
{test.response.status === 'done' && test.response.response && (
<span className="text-xs text-muted-foreground">
<span className='text-xs text-muted-foreground'>
{test.response.response.llm_response()?.model}
</span>
)}
Expand Down

0 comments on commit b92edf5

Please sign in to comment.