Spaces:
Running
Running
File size: 2,458 Bytes
819bacd 47b5f0c 819bacd |
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 |
import SendIcon from "@mui/icons-material/Send";
import { Button, TextField, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import { useState } from "react";
import { useSnackbar } from "notistack";
import postData from "../../services/api/basePostData";
export default function SendMessage({ fetchMessages }) {
const [userMessage, setUserMessage] = useState("");
const { enqueueSnackbar } = useSnackbar();
const theme = useTheme();
const onMessageChange = (e) => {
setUserMessage(e.target.value);
};
const onPressButton = () => {
const url = `/query/query_search`;
if (!userMessage.trim()) {
enqueueSnackbar("Please enter a message.", {
variant: "warning",
});
return;
}
const data = { q: userMessage };
postData(url, data)
.then(fetchMessages)
.catch((error) => {
enqueueSnackbar(error.detail || error.message, {
variant: "error",
});
});
setUserMessage("");
};
return (
<>
<Grid
container
alignItems={"center"}
xs={12}
sm={12}
p={2}
pl={3}
border={1}
borderRadius={2}
borderColor={theme.palette.border.default}
sx={{
backgroundColor: theme.palette.background.default,
}}
>
<Grid item xs={12} sm={10}>
<TextField
fullWidth
size="small"
label="Ask me anything"
value={userMessage}
onChange={onMessageChange}
slotProps={{
input: {
sx: {
backgroundColor: "white",
borderRadius: "4px",
},
},
}}
/>
</Grid>
<Grid
ml={4}
item
xs={12}
border={1}
borderColor={theme.palette.border.default}
borderRadius={20}
display="flex"
justifyContent="center"
alignItems="center"
sx={{
backgroundColor: theme.palette.secondary.main,
width: 35,
height: 35,
}}
>
<Button onClick={onPressButton}>
<SendIcon
fontSize="small"
sx={{
color: theme.palette.border.default,
}}
/>
</Button>
</Grid>
</Grid>
</>
);
}
|