Fix YAML compiler

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx

@@ -3,13 +3,15 @@
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react'
 
 import { ConversationMetadata, readMetadata } from '@latitude-data/compiler'
+import { promptConfigSchema } from '@latitude-data/core/browser'
 import {
   Button,
   DocumentTextEditor,
   DocumentTextEditorFallback,
 } from '@latitude-data/web-ui'
 import EditorHeader from '$/components/EditorHeader'
 import useEvaluations from '$/stores/evaluations'
+import useProviderApiKeys from '$/stores/providerApiKeys'
 
 import Playground from './Playground'
 import { EVALUATION_PARAMETERS } from './Playground/Chat'
@@ -26,8 +28,13 @@ export default function EvaluationEditor({
     () => data.find((e) => e.uuid === evaluationUuid),
     [evaluationUuid, data],
   )
+  const { data: providers } = useProviderApiKeys()
   const [value, setValue] = useState(defaultPrompt)
   const [metadata, setMetadata] = useState<ConversationMetadata>()
+  const configSchema = useMemo(
+    () => promptConfigSchema({ providers: providers ?? [] }),
+    [providers],
+  )
   const save = useCallback(
     (val: string) => {
       update({
@@ -49,8 +56,9 @@ export default function EvaluationEditor({
     readMetadata({
       prompt: value,
       withParameters: EVALUATION_PARAMETERS,
+      configSchema,
     }).then(setMetadata)
-  }, [value])
+  }, [value, configSchema])
 
   if (!evaluation) return null
 

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/index.tsx

@@ -6,6 +6,7 @@ import {
   Suspense,
   useCallback,
   useEffect,
+  useMemo,
   useState,
 } from 'react'
 
@@ -14,7 +15,10 @@ import {
   readMetadata,
   Document as RefDocument,
 } from '@latitude-data/compiler'
-import { DocumentVersion } from '@latitude-data/core/browser'
+import {
+  DocumentVersion,
+  promptConfigSchema,
+} from '@latitude-data/core/browser'
 import {
   DocumentTextEditor,
   DocumentTextEditorFallback,
@@ -25,6 +29,7 @@ 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 useProviderApiKeys from '$/stores/providerApiKeys'
 import { useDebouncedCallback } from 'use-debounce'
 
 import Playground from './Playground'
@@ -50,6 +55,7 @@ export default function DocumentEditor({
 }) {
   const { commit } = useCurrentCommit()
   const { project } = useCurrentProject()
+  const { data: providers } = useProviderApiKeys()
 
   const { data: _documents, updateContent } = useDocumentVersions(
     {
@@ -63,6 +69,10 @@ export default function DocumentEditor({
   const [value, setValue] = useState(document.content)
   const [isSaved, setIsSaved] = useState(true)
   const [metadata, setMetadata] = useState<ConversationMetadata>()
+  const configSchema = useMemo(
+    () => promptConfigSchema({ providers }),
+    [providers],
+  )
 
   const debouncedSave = useDebouncedCallback(
     (val: string) => {
@@ -123,8 +133,9 @@ export default function DocumentEditor({
       prompt: value,
       fullPath: document.path,
       referenceFn: readDocument,
+      configSchema,
     }).then(setMetadata)
-  }, [readDocument])
+  }, [readDocument, configSchema])
 
   const isMerged = commit.mergedAt !== null
   return (

apps/web/src/components/EditorHeader/index.tsx

@@ -14,7 +14,6 @@ import {
   Text,
   useLocalStorage,
 } from '@latitude-data/web-ui'
-import { useWritePromptProvider } from '$/components/EditorHeader/useWritePromptProvider'
 import useProviderApiKeys from '$/stores/providerApiKeys'
 
 const CUSTOM_MODEL = 'custom-model'
@@ -49,7 +48,6 @@ function selectModel({
 
 export default function EditorHeader({
   title,
-  prompt,
   metadata,
   onChangePrompt,
   rightActions,
@@ -68,37 +66,40 @@ export default function EditorHeader({
     const model = config?.model as string
     return { providerName, model }
   }, [metadata?.config])
+
   const { data: providerApiKeys, isLoading } = useProviderApiKeys()
+
   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 { onProviderDataChange } = useWritePromptProvider({
-    prompt,
-    onChangePrompt,
-  })
+
   const providersByName = useMemo(() => {
     return providerApiKeys.reduce((acc, data) => {
       acc[data.name] = data
       return acc
     }, {} as IProviderByName)
   }, [isLoading, providerApiKeys])
+
   const [selectedProvider, setProvider] = useState<string | undefined>()
   const [selectedModel, setModel] = useState<string | undefined | null>(() =>
     selectModel({
       promptMetadata,
       providersByName,
     }),
   )
+
   const providerOptions = useMemo(() => {
     return providerApiKeys.map((apiKey) => ({
       label: apiKey.name,
@@ -110,6 +111,7 @@ export default function EditorHeader({
       ? providersByName[selectedProvider]?.provider
       : undefined,
   })
+
   useEffect(() => {
     if (isLoading) return
 
@@ -124,6 +126,7 @@ export default function EditorHeader({
     providersByName,
     promptMetadata?.providerName,
   ])
+
   useEffect(() => {
     if (isLoading) return
 
@@ -142,8 +145,11 @@ export default function EditorHeader({
     promptMetadata?.providerName,
     promptMetadata?.model,
   ])
+
   const onSelectProvider = useCallback(
     (value: string) => {
+      if (!metadata) return
+
       const provider = providersByName[value]!
       if (!provider) return
 
@@ -152,25 +158,27 @@ export default function EditorHeader({
         PROVIDER_MODELS[provider.provider] ?? {},
       )[0]
       setModel(firstModel)
-      onProviderDataChange({
-        name: provider.name,
-        model: firstModel,
-      })
+
+      const config = metadata.config
+      config.provider = provider.name
+      config.model = firstModel
+      onChangePrompt(metadata.setConfig(config))
     },
-    [providersByName, onProviderDataChange],
+    [providersByName, metadata],
   )
+
   const onModelChange = useCallback(
     (value: string) => {
+      if (!metadata) return
       if (value === CUSTOM_MODEL) return
       if (!selectedProvider) return
 
       setModel(value)
-      onProviderDataChange({
-        name: selectedProvider,
-        model: value,
-      })
+      const config = metadata.config
+      config.model = value
+      onChangePrompt(metadata.setConfig(config))
     },
-    [onProviderDataChange, selectedProvider],
+    [selectedProvider, metadata],
   )
 
   return (
@@ -206,16 +214,19 @@ export default function EditorHeader({
         <Select
           name='provider'
           label='Provider'
-          placeholder='Choose a provider'
+          placeholder='Select a provider'
           options={providerOptions}
           value={selectedProvider}
           disabled={
-            disabledMetadataSelectors || isLoading || !providerOptions.length
+            disabledMetadataSelectors ||
+            isLoading ||
+            !providerOptions.length ||
+            !metadata
           }
           onChange={onSelectProvider}
         />
         <Select
-          disabled={disabledMetadataSelectors || !selectedProvider}
+          disabled={disabledMetadataSelectors || !selectedProvider || !metadata}
           name='model'
           label='Model'
           placeholder='Select a model'