From 96797694f2a03f57dc172024a698acb9c97479cc Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Fri, 21 Feb 2025 12:36:19 -0500
Subject: [PATCH] change pick a document modal to select form, but now need to
edit generate modal
---
.../Experiment/Generate/GenerateModal.tsx | 90 ++++++++-------
.../Experiment/Rag/PickADocumentMenu.tsx | 104 +++++-------------
2 files changed, 79 insertions(+), 115 deletions(-)
diff --git a/src/renderer/components/Experiment/Generate/GenerateModal.tsx b/src/renderer/components/Experiment/Generate/GenerateModal.tsx
index 92546792..27158fb9 100644
--- a/src/renderer/components/Experiment/Generate/GenerateModal.tsx
+++ b/src/renderer/components/Experiment/Generate/GenerateModal.tsx
@@ -78,7 +78,6 @@ export default function GenerateModal({
const [contextInput, setContextInput] = useState('');
const [datasetDisplayMessage, setDatasetDisplayMessage] = useState('');
-
// Fetch available datasets from the API
const {
data: datasets,
@@ -116,9 +115,7 @@ export default function GenerateModal({
setSelectedFileNames([]);
if (!currentEvalName || currentEvalName === '') {
setNameInput(generateFriendlyName());
-
- }
- else {
+ } else {
setNameInput('');
}
}
@@ -153,26 +150,31 @@ export default function GenerateModal({
// setHasDocumentsKey(docsKeyExists);
// setHasContextKey(contextKeyExists);
- if (docsKeyExists && evalConfig.script_parameters.docs.length > 0) {
+ if (
+ docsKeyExists &&
+ evalConfig.script_parameters.docs.length > 0
+ ) {
// const docstemp = evalConfig.script_parameters.docs.split(',').map((path) => ({ path }));
setHasContextKey(false);
setHasDocumentsKey(true);
const docPaths = evalConfig.script_parameters.docs.split(',');
- const docNames = evalConfig.script_parameters.doc_names.split(',');
+ const docNames =
+ evalConfig.script_parameters.doc_names.split(',');
// const docFiles = docPaths.map((path) => new File([], path));
setSelectedFiles(docPaths);
setSelectedFileNames(docNames);
delete evalConfig.script_parameters.docs;
- setConfig(evalConfig.script_parameters)
-
- }
- else if (contextKeyExists && evalConfig.script_parameters.context.length > 0) {
+ setConfig(evalConfig.script_parameters);
+ } else if (
+ contextKeyExists &&
+ evalConfig.script_parameters.context.length > 0
+ ) {
setHasContextKey(true);
setHasDocumentsKey(false);
const context = evalConfig.script_parameters.context;
setContextInput(context);
delete evalConfig.script_parameters.context;
- setConfig(evalConfig.script_parameters)
+ setConfig(evalConfig.script_parameters);
}
if (
evalConfig.script_parameters._dataset_display_message &&
@@ -183,7 +185,10 @@ export default function GenerateModal({
evalConfig.script_parameters._dataset_display_message
);
}
- if (hasDatasetKey && evalConfig.script_parameters.dataset_name.length > 0) {
+ if (
+ hasDatasetKey &&
+ evalConfig.script_parameters.dataset_name.length > 0
+ ) {
setSelectedDataset(evalConfig.script_parameters.dataset_name);
}
if (!nameInput && evalConfig?.name.length > 0) {
@@ -203,7 +208,6 @@ export default function GenerateModal({
}
}
} else {
-
if (data) {
let parsedData;
try {
@@ -235,14 +239,24 @@ export default function GenerateModal({
);
if (docsKeyExists) {
// Delete the parameter key that includes 'docs' from the config
- delete tempconfig[Object.keys(parsedData.parameters).find((key) => key.toLowerCase().includes('tflabcustomui_docs'))];
+ delete tempconfig[
+ Object.keys(parsedData.parameters).find((key) =>
+ key.toLowerCase().includes('tflabcustomui_docs')
+ )
+ ];
}
- const contextKeyExists = Object.keys(parsedData.parameters).some(
- (key) => key.toLowerCase().includes('tflabcustomui_context')
+ const contextKeyExists = Object.keys(
+ parsedData.parameters
+ ).some((key) =>
+ key.toLowerCase().includes('tflabcustomui_context')
);
if (contextKeyExists) {
// Delete the parameter key that includes 'context' from the config
- delete tempconfig[Object.keys(parsedData.parameters).find((key) => key.toLowerCase().includes('tflabcustomui_context'))];
+ delete tempconfig[
+ Object.keys(parsedData.parameters).find((key) =>
+ key.toLowerCase().includes('tflabcustomui_context')
+ )
+ ];
}
setHasContextKey(contextKeyExists);
setHasDocumentsKey(docsKeyExists);
@@ -263,7 +277,6 @@ export default function GenerateModal({
}
}, [experimentInfo, pluginId, currentEvalName, nameInput, data]);
-
if (!experimentInfo?.id) {
return 'Select an Experiment';
}
@@ -317,7 +330,6 @@ export default function GenerateModal({
}
function DocsTab({ experimentInfo }) {
-
return (
<Stack spacing={2}>
<FormControl>
@@ -325,27 +337,26 @@ export default function GenerateModal({
<PickADocumentMenu
experimentInfo={experimentInfo}
showFoldersOnly={false}
- setSelectedFiles={setSelectedFiles}
- setSelectedFileNames={setSelectedFileNames}
+ // setSelectedFiles={setSelectedFiles}
+ // setSelectedFileNames={setSelectedFileNames}
/>
<FormHelperText>Select documents to upload</FormHelperText>
</FormControl>
{selectedFileNames.length > 0 && (
- <Stack spacing={1} mt={2}>
- <FormLabel>Selected Documents:</FormLabel>
- {selectedFileNames.map((file, index) => (
- <Sheet key={index} variant="outlined" p={1}>
- {file}
- </Sheet>
- ))}
- </Stack>
- )}
+ <Stack spacing={1} mt={2}>
+ <FormLabel>Selected Documents:</FormLabel>
+ {selectedFileNames.map((file, index) => (
+ <Sheet key={index} variant="outlined" p={1}>
+ {file}
+ </Sheet>
+ ))}
+ </Stack>
+ )}
</Stack>
);
}
- function ContextTab({contextInput, setContextInput}) {
-
+ function ContextTab({ contextInput, setContextInput }) {
return (
<Stack spacing={2}>
<FormControl>
@@ -383,7 +394,7 @@ export default function GenerateModal({
// formJson.generation_type = 'docs';
// }
if (hasDocumentsKey && selectedFiles.length > 0) {
- formJson.docs = selectedFiles.join(',');;
+ formJson.docs = selectedFiles.join(',');
formJson.doc_names = selectedFileNames.join(',');
formJson.generation_type = 'docs';
}
@@ -391,14 +402,12 @@ export default function GenerateModal({
else if (hasContextKey && contextInput.length > 0) {
formJson.context = contextInput;
formJson.generation_type = 'context';
- }
- else {
+ } else {
formJson.generation_type = 'scratch';
}
console.log('formJson', formJson);
-
// Run when the currentEvalName is provided
if (currentEvalName && currentEvalName !== '') {
const result = await chatAPI.EXPERIMENT_EDIT_GENERATION(
@@ -495,9 +504,7 @@ export default function GenerateModal({
</TabPanel>
{hasDocumentsKey && (
<TabPanel value={3} sx={{ p: 2, overflow: 'auto' }} keepMounted>
- <DocsTab
- experimentInfo={experimentInfo}
- />
+ <DocsTab experimentInfo={experimentInfo} />
{/* <PickADocumentMenu
experimentInfo={experimentInfo}
/> */}
@@ -506,7 +513,10 @@ export default function GenerateModal({
)}
{hasContextKey && (
<TabPanel value={3} sx={{ p: 2, overflow: 'auto' }} keepMounted>
- <ContextTab contextInput={contextInput} setContextInput={setContextInput} />
+ <ContextTab
+ contextInput={contextInput}
+ setContextInput={setContextInput}
+ />
</TabPanel>
)}
{hasDatasetKey && (
diff --git a/src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx b/src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx
index 8ffd3ab2..9869263a 100644
--- a/src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx
+++ b/src/renderer/components/Experiment/Rag/PickADocumentMenu.tsx
@@ -1,88 +1,42 @@
-import React, { useState } from 'react';
-import { Box, Typography } from '@mui/joy';
+import { Option, Select } from '@mui/joy';
+import { useState } from 'react';
import * as chatAPI from '../../../lib/transformerlab-api-sdk';
import useSWR from 'swr';
-import { FolderIcon, Check } from 'lucide-react';
-
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
-
-interface PickADocumentMenuProps {
- experimentInfo: any;
- showFoldersOnly?: boolean;
- setSelectedFiles: React.Dispatch<React.SetStateAction<string[]>>;
- setSelectedFileNames: React.Dispatch<React.SetStateAction<string[]>>;
-}
+const fetcher = (url) => fetch(url).then((res) => res.json());
export default function PickADocumentMenu({
+ name,
experimentInfo,
showFoldersOnly = false,
- setSelectedFiles,
- setSelectedFileNames,
-}: PickADocumentMenuProps) {
- const { data: rows, isLoading } = useSWR(
- chatAPI.Endpoints.Documents.List(experimentInfo?.id, ''),
- fetcher
- );
+}) {
+ const {
+ data: rows,
+ isLoading,
+ mutate,
+ } = useSWR(chatAPI.Endpoints.Documents.List(experimentInfo?.id, ''), fetcher);
- // State for selected items (by unique id)
- const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+ const [selected, setSelected] = useState([]);
- const toggleSelect = (id: string, filePath: string, fileName: string) => {
- const newSelected = new Set(selectedIds);
- if (selectedIds.has(id)) {
- newSelected.delete(id);
- setSelectedFiles((prevFiles) => prevFiles.filter((path) => path !== filePath));
- setSelectedFileNames((prevNames) => prevNames.filter((name) => name !== fileName));
- } else {
- newSelected.add(id);
- setSelectedFiles((prevFiles) => [...prevFiles, filePath]);
- setSelectedFileNames((prevNames) => [...prevNames, fileName]);
- }
- setSelectedIds(newSelected);
- };
+ function handleChange(event, newValue) {
+ console.log(newValue);
+ setSelected(newValue);
+ }
return (
- <Box sx={{ border: '1px solid', borderColor: 'neutral.outlinedBorder', borderRadius: 'sm', p: 1 }}>
- <Typography level="h6" mb={1}>
- Pick {showFoldersOnly ? 'Folder' : 'File'}
- </Typography>
- {isLoading ? (
- <Typography>Loading...</Typography>
- ) : (
- rows?.map((row: any, index: number) => {
- // Use row.id if available; fallback to index.
- const uniqueId = row.name ? row.name.toString() : `index-${index}`;
- const isFolder = row?.type === 'folder';
- return (
- <Box key={uniqueId}>
- <Box
- onClick={() => toggleSelect(uniqueId, row?.path || '', row?.name || '')}
- sx={{
- display: 'flex',
- alignItems: 'center',
- p: 1,
- my: 0.5,
- borderRadius: 'sm',
- cursor: 'pointer',
- backgroundColor: selectedIds.has(uniqueId) ? 'primary.softHoverBg' : 'transparent',
- '&:hover': { backgroundColor: 'primary.softHoverBg' },
- }}
- >
- {isFolder && <FolderIcon size="14px" />}
- <Typography ml={isFolder ? 1 : 0}>
- {row?.name || 'Unnamed'}
- </Typography>
- {selectedIds.has(uniqueId) && (
- <Check size="16px" style={{ marginLeft: 'auto', color: 'green' }} />
- )}
- </Box>
- </Box>
- );
- })
- )}
- {!isLoading && (!rows || rows.length === 0) && (
- <Typography>No documents found</Typography>
+ <Select multiple onChange={handleChange} value={selected} name={name}>
+ {rows?.map((row) =>
+ showFoldersOnly ? (
+ row?.type === 'folder' && (
+ <Option key={row.name} value={row.name}>
+ {row.name}
+ </Option>
+ )
+ ) : (
+ <Option key={row.name} value={row.name}>
+ {row.name}
+ </Option>
+ )
)}
- </Box>
+ </Select>
);
}
--
GitLab