Spaces:
Running
Running
File size: 2,295 Bytes
16b7924 |
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 |
import {
ActionIcon,
Alert,
Button,
Grid,
Group,
Popover,
Stack,
Text,
} from "@mantine/core";
import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
interface EnableAiResponsePromptProps {
onAccept: () => void;
onDecline: () => void;
}
export default function EnableAiResponsePrompt({
onAccept,
onDecline,
}: EnableAiResponsePromptProps) {
const helpContent = (
<Stack gap="xs" p="xs">
<Text size="sm">
MiniSearch is a web-searching app with an integrated AI assistant.
</Text>
<Text size="sm">
With AI Responses enabled, it will generate summaries and answer
questions based on search results.
</Text>
<Text size="sm">
If disabled, it will function as a classic web search tool.
</Text>
<Text size="sm" c="dimmed" component="em">
You can toggle this feature at anytime through the Menu.
</Text>
</Stack>
);
return (
<Alert variant="light" color="blue" p="xs">
<Grid justify="space-between" align="center">
<Grid.Col span="content">
<Group gap="xs">
<Text fw={500}>Enable AI Responses?</Text>
<Popover
width={300}
styles={{ dropdown: { maxWidth: "92vw" } }}
position="bottom"
withArrow
shadow="md"
>
<Popover.Target>
<ActionIcon variant="subtle" color="blue" size="sm">
<IconInfoCircle size="1rem" />
</ActionIcon>
</Popover.Target>
<Popover.Dropdown>{helpContent}</Popover.Dropdown>
</Popover>
</Group>
</Grid.Col>
<Grid.Col span="auto">
<Group justify="end">
<Button
variant="subtle"
color="gray"
leftSection={<IconX size="1rem" />}
onClick={onDecline}
size="xs"
>
No, thanks
</Button>
<Button
leftSection={<IconCheck size="1rem" />}
onClick={onAccept}
size="xs"
>
Yes, please
</Button>
</Group>
</Grid.Col>
</Grid>
</Alert>
);
}
|