File size: 3,034 Bytes
ec3efc6 58973c7 a2e4e8f ec3efc6 58973c7 a372176 58973c7 ec3efc6 58973c7 a2e4e8f ec3efc6 58973c7 ec3efc6 a2e4e8f ec3efc6 58973c7 a2e4e8f ec3efc6 a2e4e8f ec3efc6 a2e4e8f ec3efc6 58973c7 ec3efc6 58d3e00 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
import { TextField, Button, Box, Alert, Modal, Typography } from '@mui/material';
import { useState } from 'react';
function DocumentInput() {
const [url, setUrl] = useState('');
const [showSuccess, setShowSuccess] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [topicName, setTopicName] = useState('');
const handleSubmit = async () => {
try {
const response = await fetch('/api/ingest/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
url,
topic: topicName
}),
});
if (!response.ok) throw new Error('Network response was not ok');
setShowSuccess(true);
setTopicName('');
setUrl('');
} catch (error) {
console.error('Error:', error);
}
};
const handleModalConfirm = () => {
setIsModalOpen(false);
handleSubmit();
};
const handleModalClose = () => {
setIsModalOpen(false);
setTopicName('');
setUrl('');
};
const modalStyle = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
boxShadow: 24,
p: 4,
borderRadius: 2,
};
const isFormValid = url.trim() && topicName.trim();
return (
<Box sx={{ mb: 4 }}>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Button
variant="contained"
onClick={() => setIsModalOpen(true)}
sx={{ width: '300px' }}
>
Add New Docs
</Button>
</Box>
{showSuccess && (
<Alert severity="success" sx={{ mt: 1 }}>
Source documentation imported successfully!
</Alert>
)}
<Modal
open={isModalOpen}
onClose={handleModalClose}
aria-labelledby="topic-modal-title"
>
<Box sx={modalStyle}>
<Typography id="topic-modal-title" variant="h6" component="h2" sx={{ mb: 3 }}>
Add New Documentation
</Typography>
<TextField
fullWidth
label="Source Documentation URL"
value={url}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)}
sx={{ mb: 2 }}
/>
<TextField
fullWidth
label="Topic Name"
value={topicName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTopicName(e.target.value)}
sx={{ mb: 3 }}
/>
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
<Button onClick={handleModalClose}>Cancel</Button>
<Button
variant="contained"
onClick={handleModalConfirm}
disabled={!isFormValid}
>
Confirm
</Button>
</Box>
</Box>
</Modal>
</Box>
);
}
export default DocumentInput;
|