backstory/frontend/src/components/ContentManager.tsx

92 lines
2.7 KiB
TypeScript

import React, { JSX, useCallback } from 'react';
import { Box } from '@mui/material';
import { VectorVisualizer } from 'components/VectorVisualizer';
import { DocumentManager } from 'components/DocumentManager';
const ContentManager = (): JSX.Element => {
const [filenames, setFilenames] = React.useState<string[]>([]);
const [editPrompt, setEditPrompt] = React.useState<string>('');
const [prompt, setPrompt] = React.useState<string>('');
const [filenameFilter, setFilenameFilter] = React.useState<string[]>([]);
const setFilter = useCallback(
(newFilter: string) => {
if (newFilter !== editPrompt) {
console.log(`Setting edit prompt to: ${newFilter}`);
setEditPrompt(newFilter);
}
if (newFilter !== prompt) {
console.log(`Setting prompt to: ${newFilter}`);
setPrompt(newFilter);
}
if (newFilter === '' && filenames.length > 0) {
console.log('Clearing filename filter');
setFilenames([]);
}
},
[editPrompt, prompt, filenames.length]
);
const onDocumentSelect = useCallback(
(document: { filename: string } | null): void => {
if (document) {
console.log(`Document selected: ${document.filename}`);
setFilenameFilter([document.filename]);
} else if (filenames.length > 0) {
console.log('No document selected, clearing filename filter');
setFilenameFilter([]);
}
},
[setFilenameFilter, filenames]
);
return (
<Box
sx={{
display: 'flex',
width: '100%',
flexDirection: 'column',
position: 'relative',
overflow: 'hidden',
}}
>
<VectorVisualizer
filenameFilter={filenameFilter}
query={editPrompt}
setQuery={(newPrompt: string) => {
editPrompt !== newPrompt && setEditPrompt(newPrompt);
}}
onQueryResult={(newPrompt: string, newFilenames: string[]) => {
if (newPrompt !== prompt) {
console.log(`Setting prompt to: ${newPrompt}`);
setPrompt(newPrompt);
}
let update = filenames.length !== newFilenames.length;
if (!update) {
for (let i = 0; i < filenames.length; i++) {
if (filenames[i] !== newFilenames[i]) {
update = true;
break;
}
}
}
if (update) {
console.log(`Updating filenames from ${filenames} to ${newFilenames}`);
setFilenames(newFilenames);
}
}}
/>
<DocumentManager
{...{
onDocumentSelect,
filter: prompt,
setFilter,
filenames,
}}
/>
</Box>
);
};
export { ContentManager };