-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Instead of a random list of inputs we display a collapsible box with the contents of the provider log.
- Loading branch information
Showing
18 changed files
with
482 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
273 changes: 273 additions & 0 deletions
273
...evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,273 @@ | ||
| 'use client' | ||
|
|
||
| import { ReactNode, useEffect, useState } from 'react' | ||
|
|
||
| import { Config, readMetadata } from '@latitude-data/compiler' | ||
| import { ProviderLogDto } from '@latitude-data/core/browser' | ||
| import { | ||
| formatContext, | ||
| formatConversation, | ||
| } from '@latitude-data/core/services/providerLogs/formatForEvaluation' | ||
| import { | ||
| Badge, | ||
| Button, | ||
| cn, | ||
| CodeBlock, | ||
| CollapsibleBox, | ||
| Icon, | ||
| Popover, | ||
| Text, | ||
| Tooltip, | ||
| } from '@latitude-data/web-ui' | ||
| import useDocumentLogWithMetadata from '$/stores/documentLogWithMetadata' | ||
|
|
||
| const PARAMETERS = [ | ||
| 'messages', | ||
| 'context', | ||
| 'response', | ||
| 'prompt', | ||
| 'parameters', | ||
| 'config', | ||
| 'duration', | ||
| 'cost', | ||
| ] | ||
|
|
||
| const VariableSection = ({ | ||
| title, | ||
| content, | ||
| tooltip, | ||
| height = '36', | ||
| popoverContent, | ||
| }: { | ||
| title: string | ||
| content: string | ||
| tooltip?: string | ||
| height?: string | ||
| popoverContent?: ReactNode | ||
| }) => ( | ||
| <div className='flex flex-col gap-2'> | ||
| <div className='flex flex-row gap-2 items-center'> | ||
| <div className='flex flex-row gap-2 items-center'> | ||
| <Badge variant='accent'>{title}</Badge> | ||
| {tooltip && ( | ||
| <Tooltip | ||
| trigger={ | ||
| <div> | ||
| <Icon name='info' color='primary' /> | ||
| </div> | ||
| } | ||
| > | ||
| {tooltip} | ||
| </Tooltip> | ||
| )} | ||
| </div> | ||
| {popoverContent && ( | ||
| <Popover.Root> | ||
| <Popover.Trigger asChild> | ||
| <Button variant='nope'> | ||
| <Icon name='circleHelp' color='foregroundMuted' /> | ||
| </Button> | ||
| </Popover.Trigger> | ||
| <Popover.Content className='bg-white shadow-lg rounded-lg p-4 max-w-xl'> | ||
| {popoverContent} | ||
| </Popover.Content> | ||
| </Popover.Root> | ||
| )} | ||
| </div> | ||
| <textarea | ||
| className={cn( | ||
| `w-full p-2 rounded-lg border bg-secondary resize-y text-xs`, | ||
| { | ||
| 'h-36': height === '36', | ||
| 'h-24': height === '24', | ||
| }, | ||
| )} | ||
| value={content} | ||
| disabled | ||
| readOnly | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| const InputSection = ({ | ||
| title, | ||
| content, | ||
| tooltip, | ||
| type = 'text', | ||
| }: { | ||
| title: string | ||
| content: string | ||
| tooltip: string | ||
| type?: string | ||
| }) => ( | ||
| <div className='flex flex-col gap-2'> | ||
| <div className='flex flex-row gap-2 items-center'> | ||
| <Badge variant='accent'>{title}</Badge> | ||
| <TooltipInfo text={tooltip} /> | ||
| </div> | ||
| <div> | ||
| <input | ||
| type={type} | ||
| className='p-2 rounded-lg border bg-secondary resize-y text-xs' | ||
| value={content} | ||
| disabled | ||
| readOnly | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| export const Variables = ({ | ||
| providerLog, | ||
| }: { | ||
| providerLog?: ProviderLogDto | ||
| }) => { | ||
| if (!providerLog) return null | ||
|
|
||
| const [config, setConfig] = useState<Config>() | ||
| const { data: documentLogWithMetadata } = useDocumentLogWithMetadata( | ||
| providerLog.documentLogUuid, | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| const fn = async () => { | ||
| if (!documentLogWithMetadata) return | ||
|
|
||
| const metadata = await readMetadata({ | ||
| prompt: documentLogWithMetadata!.resolvedContent, | ||
| }) | ||
| setConfig(metadata.config) | ||
| } | ||
|
|
||
| fn() | ||
| }, [documentLogWithMetadata]) | ||
|
|
||
| const collapsedContent = ( | ||
| <div className='flex gap-2'> | ||
| {PARAMETERS.map((param) => ( | ||
| <Badge key={param} variant='accent'> | ||
| {param} | ||
| </Badge> | ||
| ))} | ||
| </div> | ||
| ) | ||
|
|
||
| const expandedContent = ( | ||
| <div className='flex flex-col gap-4'> | ||
| <VariableSection | ||
| title='messages' | ||
| content={JSON.stringify(formatConversation(providerLog), null, 2)} | ||
| height='36' | ||
| popoverContent={ | ||
| <div className='flex flex-col gap-4'> | ||
| <Text.H5> | ||
| The <code>messages</code> variable contains all messages in the | ||
| conversation, with the following structure: | ||
| </Text.H5> | ||
| <CodeBlock language='javascript' copy={false}> | ||
| {`messages.all // Array of all messages | ||
| messages.first // First message in the conversation | ||
| messages.last // Last message in the conversation | ||
| messages.user.all // Array of user messages | ||
| messages.user.first // First user message | ||
| messages.user.last // Last user message | ||
| messages.system.all // Array of system messages | ||
| messages.system.first // First system message | ||
| messages.system.last // Last system message | ||
| messages.assistant.all // Array of assistant messages | ||
| messages.assistant.first // First assistant message | ||
| messages.assistant.last // Last assistant message`} | ||
| </CodeBlock> | ||
| <Text.H5> | ||
| You can access these properties in your prompt template using | ||
| JavaScript object accessor syntax. E.g: | ||
| </Text.H5> | ||
| <CodeBlock language='javascript'> | ||
| {`{{messages.user.first}} // This will print the first message from the user in the conversation`} | ||
| </CodeBlock> | ||
| </div> | ||
| } | ||
| /> | ||
|
|
||
| <VariableSection | ||
| title='context' | ||
| content={formatContext(providerLog)} | ||
| tooltip='The full conversation excluding the last assistant response' | ||
| /> | ||
|
|
||
| <VariableSection | ||
| title='response' | ||
| content={providerLog.response} | ||
| tooltip='The last assistant response' | ||
| /> | ||
|
|
||
| <VariableSection | ||
| title='prompt' | ||
| content={documentLogWithMetadata?.resolvedContent || ''} | ||
| tooltip='The original prompt' | ||
| /> | ||
|
|
||
| <VariableSection | ||
| title='config' | ||
| content={config ? JSON.stringify(config, null, 2) : ''} | ||
| tooltip='The prompt configuration used to generate the prompt' | ||
| height='24' | ||
| /> | ||
|
|
||
| <VariableSection | ||
| title='parameters' | ||
| content={ | ||
| documentLogWithMetadata?.parameters | ||
| ? JSON.stringify(documentLogWithMetadata.parameters, null, 2) | ||
| : '' | ||
| } | ||
| tooltip='The parameters that were used to build the prompt for this log' | ||
| height='24' | ||
| /> | ||
|
|
||
| <InputSection | ||
| title='duration' | ||
| content={documentLogWithMetadata?.duration?.toString() || '0'} | ||
| tooltip='The time it took to run this prompt in milliseconds' | ||
| type='number' | ||
| /> | ||
|
|
||
| <InputSection | ||
| title='cost' | ||
| content={ | ||
| documentLogWithMetadata?.costInMillicents | ||
| ? (documentLogWithMetadata?.costInMillicents / 1000).toString() | ||
| : '0' | ||
| } | ||
| tooltip='The cost of running this prompt in cents' | ||
| type='number' | ||
| /> | ||
| </div> | ||
| ) | ||
|
|
||
| return ( | ||
| <CollapsibleBox | ||
| title='Variables' | ||
| collapsedContent={collapsedContent} | ||
| expandedContent={expandedContent} | ||
| expandedHeight='720px' | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const TooltipInfo = ({ text }: { text: string }) => { | ||
| return ( | ||
| <Tooltip | ||
| trigger={ | ||
| <div> | ||
| <Icon name='info' color='primary' /> | ||
| </div> | ||
| } | ||
| > | ||
| {text} | ||
| </Tooltip> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.