From 6ff3b4d3d4e0c911a86c2c738c367894099b4224 Mon Sep 17 00:00:00 2001 From: Gerard Date: Mon, 30 Sep 2024 14:28:07 +0200 Subject: [PATCH] feature: better evaluation editor (#308) Instead of a random list of inputs we display a collapsible box with the contents of the provider log. --- .../Editor/Playground/Preview/index.tsx | 1 - .../Variables/components/CopyButton.tsx | 16 +++ .../Variables/components/InputSection.tsx | 31 +++++ .../Variables/components/MessagesList.tsx | 14 ++ .../components/PinnedDocumentation.tsx | 51 +++++++ .../Variables/components/TooltipInfo.tsx | 13 ++ .../Variables/components/VariableSection.tsx | 72 ++++++++++ .../Variables/hooks/useVariablesData.tsx | 125 ++++++++++++++++++ .../Editor/Playground/Variables/index.tsx | 60 +++++++++ .../Playground/Variables/utils/constants.ts | 10 ++ .../Editor/Playground/index.tsx | 79 +++++------ .../EvaluationEditor/Editor/index.tsx | 2 +- .../src/app/api/documentLogs/[id]/route.ts | 1 + .../api/documentLogs/uuids/[uuid]/route.ts | 42 ++++++ .../components/ProjectDocumentSelector.tsx | 4 +- .../AppLayout/Header/UsageIndicator/index.tsx | 2 +- .../src/presenters/providerLogPresenter.ts | 7 +- .../web/src/stores/documentLogWithMetadata.ts | 31 +++++ packages/core/src/services/evaluations/run.ts | 8 +- .../services/providerLogs/buildResponse.ts | 10 ++ .../core/src/services/providerLogs/index.ts | 1 + .../web-ui/src/ds/atoms/CodeBlock/index.tsx | 20 ++- packages/web-ui/src/ds/atoms/Icons/index.tsx | 10 ++ .../web-ui/src/ds/atoms/Popover/index.tsx | 26 ++-- .../web-ui/src/ds/atoms/Tooltip/index.tsx | 2 +- .../src/ds/molecules/CollapsibleBox/index.tsx | 46 +++++++ packages/web-ui/src/ds/molecules/index.ts | 1 + packages/web-ui/src/ds/tokens/colors.ts | 1 + packages/web-ui/styles.css | 3 +- packages/web-ui/tailwind.config.js | 3 +- 30 files changed, 619 insertions(+), 73 deletions(-) create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/hooks/useVariablesData.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/index.tsx create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/utils/constants.ts create mode 100644 apps/web/src/app/api/documentLogs/uuids/[uuid]/route.ts create mode 100644 apps/web/src/stores/documentLogWithMetadata.ts create mode 100644 packages/core/src/services/providerLogs/buildResponse.ts create mode 100644 packages/web-ui/src/ds/molecules/CollapsibleBox/index.tsx diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx index 1c78f5232..0afefbcd3 100644 --- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx +++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx @@ -59,7 +59,6 @@ export default function Preview({ ref={containerRef} className='flex flex-col gap-3 h-full overflow-y-auto' > - Preview {(conversation?.messages ?? []) .filter((message) => message.role === 'assistant') .map((message, index) => ( diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx new file mode 100644 index 000000000..17013b944 --- /dev/null +++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx @@ -0,0 +1,16 @@ +import { Button, Icon, toast } from '@latitude-data/web-ui' + +export const CopyButton = ({ text }: { text: string }) => ( + +) diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx new file mode 100644 index 000000000..58fecd343 --- /dev/null +++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx @@ -0,0 +1,31 @@ +import { Badge } from '@latitude-data/web-ui' + +import { TooltipInfo } from './TooltipInfo' + +export const InputSection = ({ + title, + content, + tooltip, + type = 'text', +}: { + title: string + content: string + tooltip: string + type?: string +}) => ( +
+
+ {title} + +
+
+ +
+
+) diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx new file mode 100644 index 000000000..decdcde55 --- /dev/null +++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx @@ -0,0 +1,14 @@ +import { Text } from '@latitude-data/web-ui' + +import { CopyButton } from './CopyButton' + +export const MessagesList = ({ items }: { items: string[] }) => ( + +) diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx new file mode 100644 index 000000000..a754a0079 --- /dev/null +++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx @@ -0,0 +1,51 @@ +import { cn, CopyButton, Text } from '@latitude-data/web-ui' + +import { MessagesList } from './MessagesList' + +export const PinnedDocumentation = ({ isPinned }: { isPinned: boolean }) => { + const messageVariables = [ + '{{messages.all}}', + '{{messages.first}}', + '{{messages.last}}', + '{{messages.user.all}}', + '{{messages.user.first}}', + '{{messages.user.last}}', + '{{messages.system.all}}', + '{{messages.system.first}}', + '{{messages.system.last}}', + '{{messages.assistant.all}}', + '{{messages.assistant.first}}', + '{{messages.assistant.last}}', + ] + + return ( +
+ + The messages variable contains all messages in the + conversation, with the following properties: + +
+
+ + +
+
+ + You can access these properties in your prompt template using JavaScript + object accessor syntax. E.g: + +
+ + {`{{messages.user.first}}`}{' '} + + /* This will print the first message from the user in the + conversation */ + + +
+ +
+
+
+ ) +} diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx new file mode 100644 index 000000000..66e2308d2 --- /dev/null +++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx @@ -0,0 +1,13 @@ +import { Icon, Tooltip } from '@latitude-data/web-ui' + +export const TooltipInfo = ({ text }: { text: string }) => ( + + + + } + > + {text} + +) diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx new file mode 100644 index 000000000..7a5f73dd7 --- /dev/null +++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx @@ -0,0 +1,72 @@ +import { ReactNode } from 'react' + +import { Badge, Button, cn, Icon, Popover, Text } from '@latitude-data/web-ui' + +import { PinnedDocumentation } from './PinnedDocumentation' +import { TooltipInfo } from './TooltipInfo' + +export const VariableSection = ({ + title, + content, + tooltip, + height = '36', + isPopoverOpen, + setIsPopoverOpen, + popoverContent, + isPinned, + onUnpin, +}: { + title: string + content: string + tooltip?: string + height?: string + isPopoverOpen?: boolean + setIsPopoverOpen?: (isPopoverOpen: boolean) => void + popoverContent?: ReactNode + isPinned?: boolean + onUnpin?: () => void +}) => ( +
+
+
+ {title} + {tooltip && } +
+ {popoverContent && + (isPinned ? ( + + ) : ( + + + + + + {popoverContent} + + + ))} +
+ {isPinned && popoverContent && } +