Docs and images in playground params (#715)

apps/web/src/actions/documents/upload.ts

@@ -6,7 +6,7 @@ import {
   createNewDocument,
   defaultDocumentContent,
 } from '@latitude-data/core/services/documents/create'
-import { transformFile } from '@latitude-data/core/services/files/transform'
+import { convertFile } from '@latitude-data/core/services/files/convert'
 import { z } from 'zod'
 
 import { withProject } from '../procedures'
@@ -28,7 +28,7 @@ export const uploadDocumentAction = withProject
       .getCommitByUuid({ uuid: input.commitUuid, projectId: ctx.project.id })
       .then((r) => r.unwrap())
 
-    const content = await transformFile(input.file).then((r) => r.unwrap())
+    const content = await convertFile(input.file).then((r) => r.unwrap())
     const { metadata } = await defaultDocumentContent({
       workspace: ctx.workspace,
     })

apps/web/src/actions/files/convert.ts

@@ -0,0 +1,22 @@
+'use server'
+
+import { MAX_SIZE, MAX_UPLOAD_SIZE_IN_MB } from '@latitude-data/core/browser'
+import { convertFile } from '@latitude-data/core/services/files/convert'
+import { z } from 'zod'
+
+import { authProcedure } from '../procedures'
+
+export const convertFileAction = authProcedure
+  .createServerAction()
+  .input(
+    z.object({
+      file: z.instanceof(File).refine(async (file) => {
+        return file?.size <= MAX_UPLOAD_SIZE_IN_MB
+      }, `Your file must be less than ${MAX_SIZE}MB in size. You can split it into smaller files and upload them separately.`),
+    }),
+  )
+  .handler(async ({ input }) => {
+    const result = await convertFile(input.file)
+
+    return result.unwrap()
+  })

apps/web/src/actions/files/upload.ts

@@ -0,0 +1,22 @@
+'use server'
+
+import { MAX_SIZE, MAX_UPLOAD_SIZE_IN_MB } from '@latitude-data/core/browser'
+import { uploadFile } from '@latitude-data/core/services/files/upload'
+import { z } from 'zod'
+
+import { authProcedure } from '../procedures'
+
+export const uploadFileAction = authProcedure
+  .createServerAction()
+  .input(
+    z.object({
+      file: z.instanceof(File).refine(async (file) => {
+        return file?.size <= MAX_UPLOAD_SIZE_IN_MB
+      }, `Your file must be less than ${MAX_SIZE}MB in size. You can split it into smaller files and upload them separately.`),
+    }),
+  )
+  .handler(async ({ input, ctx }) => {
+    const result = await uploadFile(input.file, ctx.workspace)
+
+    return result.unwrap()
+  })

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

@@ -13,19 +13,19 @@ import {
   type DocumentVersion,
 } from '@latitude-data/core/browser'
 import {
+  AnimatedDots,
   ChatTextArea,
   cn,
   ErrorMessage,
   Icon,
+  LineSeparator,
   Message,
   MessageList,
   Text,
   Tooltip,
   useAutoScroll,
   useCurrentCommit,
   useCurrentProject,
-  AnimatedDots,
-  LineSeparator,
 } from '@latitude-data/web-ui'
 import { LanguageModelUsage } from 'ai'
 import { readStreamableValue } from 'ai/rsc'
@@ -245,7 +245,7 @@ export default function Chat({
       >
         <MessageList
           messages={conversation?.messages.slice(0, chainLength - 1) ?? []}
-          parameters={parameters}
+          parameters={Object.keys(parameters)}
           collapseParameters={!expandParameters}
         />
         {(conversation?.messages.length ?? 0) >= chainLength && (

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

@@ -1,3 +1,8 @@
+import {
+  DatasetSource,
+  PlaygroundInput,
+  useDocumentParameters,
+} from '$/hooks/useDocumentParameters'
 import { Dataset, DocumentVersion } from '@latitude-data/core/browser'
 import {
   Badge,
@@ -7,12 +12,8 @@ import {
   Select,
   Text,
   Tooltip,
+  type ICommitContextType,
 } from '@latitude-data/web-ui'
-import {
-  DatasetSource,
-  PlaygroundInput,
-  useDocumentParameters,
-} from '$/hooks/useDocumentParameters'
 
 import { UseSelectDataset, type DatasetPreview } from './useSelectDataset'
 
@@ -31,15 +32,15 @@ function getTooltipValue(input: PlaygroundInput<'dataset'>) {
 
 export function InputMapper({
   document,
-  commitVersionUuid,
+  commit,
   mappedInputs,
   headersOptions,
   isLoading,
   onSelectHeader,
   selectedDataset,
 }: {
   document: DocumentVersion
-  commitVersionUuid: string
+  commit: ICommitContextType['commit']
   mappedInputs: DatasetSource['mappedInputs']
   headersOptions: DatasetPreview['headersOptions']
   onSelectHeader: UseSelectDataset['onSelectHeader']
@@ -51,7 +52,7 @@ export function InputMapper({
     dataset: { inputs, copyToManual },
   } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
-    commitVersionUuid,
+    commitVersionUuid: commit.uuid,
   })
   return (
     <ClientOnly>
@@ -68,7 +69,7 @@ export function InputMapper({
                   className='grid col-span-2 grid-cols-subgrid gap-3 w-full items-start'
                   key={idx}
                 >
-                  <div className='flex flex-row items-center gap-x-1 min-h-8'>
+                  <div className='flex flex-row items-center gap-x-2 min-h-8'>
                     <Badge variant={isMapped ? 'accent' : 'muted'}>
                       &#123;&#123;{param}&#125;&#125;
                     </Badge>
@@ -121,7 +122,7 @@ export function InputMapper({
           </div>
         ) : (
           <Text.H6 color='foregroundMuted'>
-            No inputs. Use &#123;&#123; input_name &#125;&#125; to insert.
+            No inputs. Use &#123;&#123;input_name&#125;&#125; to insert.
           </Text.H6>
         )}
       </div>

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

@@ -1,6 +1,12 @@
-import { DocumentVersion } from '@latitude-data/core/browser'
-import { Button, cn, Icon, Select } from '@latitude-data/web-ui'
 import { ROUTES } from '$/services/routes'
+import { DocumentVersion } from '@latitude-data/core/browser'
+import {
+  Button,
+  cn,
+  Icon,
+  Select,
+  type ICommitContextType,
+} from '@latitude-data/web-ui'
 import Link from 'next/link'
 
 import { ParametersPaginationNav } from '../PaginationNav'
@@ -22,11 +28,11 @@ function BlankSlate() {
 
 export function DatasetParams({
   data,
-  commitVersionUuid,
+  commit,
   document,
 }: {
   document: DocumentVersion
-  commitVersionUuid: string
+  commit: ICommitContextType['commit']
   data: UseSelectDataset
 }) {
   const selectedId = data.selectedDataset?.id
@@ -61,7 +67,7 @@ export function DatasetParams({
       <div className={cn({ 'opacity-50': data.isLoading })}>
         <InputMapper
           document={document}
-          commitVersionUuid={commitVersionUuid}
+          commit={commit}
           isLoading={data.isLoading}
           mappedInputs={data.selectedRow.mappedInputs}
           headersOptions={data.datasetPreview.headersOptions}

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

@@ -1,13 +1,22 @@
-import { DocumentLog, DocumentVersion } from '@latitude-data/core/browser'
-import { Badge, cn, Icon, Skeleton, Text } from '@latitude-data/web-ui'
 import { useDocumentParameters } from '$/hooks/useDocumentParameters'
 import { useGenerateDocumentLogDetailUrl } from '$/hooks/useGenerateDocumentLogDetailUrl'
+import { DocumentLog, DocumentVersion } from '@latitude-data/core/browser'
+import {
+  Badge,
+  ClientOnly,
+  cn,
+  Icon,
+  Skeleton,
+  Text,
+  TextArea,
+  Tooltip,
+  type ICommitContextType,
+} from '@latitude-data/web-ui'
 import { format } from 'date-fns'
 import Link from 'next/link'
 
-import { InputParams } from '../Input'
 import { ParametersPaginationNav } from '../PaginationNav'
-import { UseLogHistoryParams } from './useLogHistoryParams'
+import { type UseLogHistoryParams } from './useLogHistoryParams'
 
 function usePaginatedDocumentLogUrl({
   page,
@@ -37,18 +46,18 @@ function usePaginatedDocumentLogUrl({
 
 export function HistoryLogParams({
   data,
-  commitVersionUuid,
+  commit,
   document,
 }: {
   document: DocumentVersion
-  commitVersionUuid: string
+  commit: ICommitContextType['commit']
   data: UseLogHistoryParams
 }) {
   const {
     history: { inputs, setInput },
   } = useDocumentParameters({
     documentVersionUuid: document.documentUuid,
-    commitVersionUuid,
+    commitVersionUuid: commit.uuid,
   })
   const urlData = usePaginatedDocumentLogUrl({
     selectedLog: data.selectedLog,
@@ -103,7 +112,53 @@ export function HistoryLogParams({
         )}
       </div>
       <div className={cn({ 'opacity-50': data.isLoading })}>
-        <InputParams inputs={inputs} setInput={setInput} />
+        <ClientOnly>
+          <div className='flex flex-col gap-3'>
+            {Object.keys(inputs).length > 0 ? (
+              <div className='grid grid-cols-[auto_1fr] gap-y-3'>
+                {Object.entries(inputs).map(([param, input], idx) => {
+                  const includedInPrompt =
+                    input.metadata.includeInPrompt ?? true
+                  return (
+                    <div
+                      className='grid col-span-2 grid-cols-subgrid gap-3 w-full items-start'
+                      key={idx}
+                    >
+                      <div className='flex flex-row items-center gap-x-2 min-h-8'>
+                        <Badge variant={includedInPrompt ? 'accent' : 'muted'}>
+                          &#123;&#123;{param}&#125;&#125;
+                        </Badge>
+                        {!includedInPrompt && (
+                          <Tooltip trigger={<Icon name='info' />}>
+                            This variable is not included in the current prompt
+                          </Tooltip>
+                        )}
+                      </div>
+                      <div className='flex flex-grow w-full min-w-0'>
+                        <TextArea
+                          value={input.value ?? ''}
+                          minRows={1}
+                          maxRows={6}
+                          onChange={(e) => {
+                            setInput?.(param, {
+                              ...input,
+                              value: e.target.value,
+                            })
+                          }}
+                          disabled={data.isLoading}
+                        />
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <Text.H6 color='foregroundMuted'>
+                No inputs. Use &#123;&#123;input_name&#125;&#125; to insert.
+              </Text.H6>
+            )}
+          </div>
+        </ClientOnly>
       </div>
     </div>
   )