Provider & model selector on Prompt editor and evaluation editor (#183)

We want to let users pick which of their configured providers want to use with a selector Resolves this issue: #175
latitude-dev · Sep 17, 2024 · 99f1444 · 99f1444
1 parent 63fc2a7
commit 99f1444
Show file tree

Hide file tree

Showing 12 changed files with 930 additions and 407 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -15,6 +15,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "yaml": "^2.4.5",
     "@latitude-data/compiler": "workspace:^",
     "@latitude-data/core": "workspace:*",
     "@latitude-data/env": "workspace:^",
@@ -67,7 +68,10 @@
     "node-mocks-http": "^1.15.0",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",
-    "vitest": "^2.0.3"
+    "vitest": "^2.0.3",
+    "@testing-library/dom": "^10.3.2",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1"
   },
   "optionalDependencies": {
     "svelte": "^4.2.19",

diff --git a/...ations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx b/...ations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
@@ -4,16 +4,13 @@ import { Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 
 import { ConversationMetadata, readMetadata } from '@latitude-data/compiler'
 import {
-  AppLocalStorage,
   Button,
   DocumentTextEditor,
   DocumentTextEditorFallback,
-  DropdownMenu,
-  useLocalStorage,
 } from '@latitude-data/web-ui'
+import EditorHeader from '$/components/EditorHeader'
 import useEvaluations from '$/stores/evaluations'
 
-import { Header } from './Header'
 import Playground from './Playground'
 import { EVALUATION_PARAMETERS } from './Playground/Chat'
 
@@ -31,21 +28,6 @@ export default function EvaluationEditor({
   )
   const [value, setValue] = useState(defaultPrompt)
   const [metadata, setMetadata] = useState<ConversationMetadata>()
-
-  const { value: showLineNumbers, setValue: setShowLineNumbers } =
-    useLocalStorage({
-      key: AppLocalStorage.editorLineNumbers,
-      defaultValue: true,
-    })
-  const { value: wrapText, setValue: setWrapText } = useLocalStorage({
-    key: AppLocalStorage.editorWrapText,
-    defaultValue: true,
-  })
-  const { value: showMinimap, setValue: setShowMinimap } = useLocalStorage({
-    key: AppLocalStorage.editorMinimap,
-    defaultValue: false,
-  })
-
   const save = useCallback(
     (val: string) => {
       update({
@@ -75,38 +57,25 @@ export default function EvaluationEditor({
   return (
     <div className='flex flex-row w-full h-full gap-8 p-6'>
       <div className='flex flex-col flex-1 flex-grow flex-shrink gap-2 min-w-0'>
-        <Header title='Evaluation editor'>
-          {value !== evaluation.metadata.prompt && (
-            <Button
-              fancy
-              disabled={isUpdating || isLoading}
-              onClick={() => save(value)}
-            >
-              Save changes
-            </Button>
-          )}
-          <DropdownMenu
-            options={[
-              {
-                label: 'Show line numbers',
-                onClick: () => setShowLineNumbers(!showLineNumbers),
-                checked: showLineNumbers,
-              },
-              {
-                label: 'Wrap text',
-                onClick: () => setWrapText(!wrapText),
-                checked: wrapText,
-              },
-              {
-                label: 'Show minimap',
-                onClick: () => setShowMinimap(!showMinimap),
-                checked: showMinimap,
-              },
-            ]}
-            side='bottom'
-            align='end'
-          />
-        </Header>
+        <EditorHeader
+          title='Evaluation editor'
+          metadata={metadata}
+          prompt={value}
+          onChangePrompt={onChange}
+          rightActions={
+            <>
+              {value !== evaluation.metadata.prompt && (
+                <Button
+                  fancy
+                  disabled={isUpdating || isLoading}
+                  onClick={() => save(value)}
+                >
+                  Save changes
+                </Button>
+              )}
+            </>
+          }
+        />
         <Suspense fallback={<DocumentTextEditorFallback />}>
           <DocumentTextEditor
             value={value}

diff --git a/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx b/...ersions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx
@@ -16,20 +16,17 @@ import {
 } from '@latitude-data/compiler'
 import { DocumentVersion } from '@latitude-data/core/browser'
 import {
-  AppLocalStorage,
   DocumentTextEditor,
   DocumentTextEditorFallback,
-  DropdownMenu,
   useCurrentCommit,
   useCurrentProject,
-  useLocalStorage,
 } from '@latitude-data/web-ui'
 import { type AddMessagesActionFn } from '$/actions/sdk/addMessagesAction'
 import type { RunDocumentActionFn } from '$/actions/sdk/runDocumentAction'
+import EditorHeader from '$/components/EditorHeader'
 import useDocumentVersions from '$/stores/documentVersions'
 import { useDebouncedCallback } from 'use-debounce'
 
-import { Header } from './Header'
 import Playground from './Playground'
 
 export const DocumentEditorContext = createContext<
@@ -58,20 +55,6 @@ export default function DocumentEditor({
   const [isSaved, setIsSaved] = useState(true)
   const [metadata, setMetadata] = useState<ConversationMetadata>()
 
-  const { value: showLineNumbers, setValue: setShowLineNumbers } =
-    useLocalStorage({
-      key: AppLocalStorage.editorLineNumbers,
-      defaultValue: true,
-    })
-  const { value: wrapText, setValue: setWrapText } = useLocalStorage({
-    key: AppLocalStorage.editorWrapText,
-    defaultValue: true,
-  })
-  const { value: showMinimap, setValue: setShowMinimap } = useLocalStorage({
-    key: AppLocalStorage.editorMinimap,
-    defaultValue: false,
-  })
-
   const { commit } = useCurrentCommit()
   const { project } = useCurrentProject()
 
@@ -146,29 +129,12 @@ export default function DocumentEditor({
     >
       <div className='flex flex-row w-full h-full gap-8 p-6'>
         <div className='flex flex-col flex-1 flex-grow flex-shrink gap-2 min-w-0'>
-          <Header title='Prompt editor'>
-            <DropdownMenu
-              options={[
-                {
-                  label: 'Show line numbers',
-                  onClick: () => setShowLineNumbers(!showLineNumbers),
-                  checked: showLineNumbers,
-                },
-                {
-                  label: 'Wrap text',
-                  onClick: () => setWrapText(!wrapText),
-                  checked: wrapText,
-                },
-                {
-                  label: 'Show minimap',
-                  onClick: () => setShowMinimap(!showMinimap),
-                  checked: showMinimap,
-                },
-              ]}
-              side='bottom'
-              align='end'
-            />
-          </Header>
+          <EditorHeader
+            title='Prompt editor'
+            metadata={metadata}
+            prompt={value}
+            onChangePrompt={onChange}
+          />
           <Suspense fallback={<DocumentTextEditorFallback />}>
             <DocumentTextEditor
               value={value}