87 lines
1.8 KiB
TypeScript
87 lines
1.8 KiB
TypeScript
import {
|
|
Alert,
|
|
Button,
|
|
Code,
|
|
Divider,
|
|
Group,
|
|
Loader,
|
|
Stack,
|
|
Text,
|
|
} from "@mantine/core";
|
|
|
|
export interface ElicitationUrlPanelProps {
|
|
message: string;
|
|
url: string;
|
|
elicitationId: string;
|
|
isWaiting: boolean;
|
|
onCopyUrl: () => void;
|
|
onOpenInBrowser: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const ItalicMessage = Text.withProps({
|
|
size: "md",
|
|
fs: "italic",
|
|
});
|
|
|
|
const WrappingCode = Code.withProps({
|
|
block: true,
|
|
variant: "wrapping",
|
|
});
|
|
|
|
const HintText = Text.withProps({
|
|
size: "sm",
|
|
c: "dimmed",
|
|
});
|
|
|
|
const MetaText = Text.withProps({
|
|
size: "xs",
|
|
c: "dimmed",
|
|
});
|
|
|
|
function formatElicitationId(id: string): string {
|
|
return `Elicitation ID: ${id}`;
|
|
}
|
|
|
|
export function ElicitationUrlPanel({
|
|
message,
|
|
url,
|
|
elicitationId,
|
|
isWaiting,
|
|
onCopyUrl,
|
|
onOpenInBrowser,
|
|
onCancel,
|
|
}: ElicitationUrlPanelProps) {
|
|
return (
|
|
<Stack gap="md">
|
|
<ItalicMessage>{message}</ItalicMessage>
|
|
<Divider />
|
|
<Text size="sm">The server is requesting you visit:</Text>
|
|
<WrappingCode>{url}</WrappingCode>
|
|
<Group>
|
|
<Button variant="light" onClick={onCopyUrl}>
|
|
Copy URL
|
|
</Button>
|
|
<Button variant="light" onClick={onOpenInBrowser}>
|
|
Open in Browser
|
|
</Button>
|
|
</Group>
|
|
<Divider />
|
|
{isWaiting && (
|
|
<Group>
|
|
<Loader size="sm" />
|
|
<HintText>Waiting for completion...</HintText>
|
|
</Group>
|
|
)}
|
|
<MetaText>{formatElicitationId(elicitationId)}</MetaText>
|
|
<Alert color="yellow" title="Warning">
|
|
This will open an external URL. Verify the domain before proceeding.
|
|
</Alert>
|
|
<Group justify="flex-end">
|
|
<Button variant="light" onClick={onCancel}>
|
|
Cancel
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
);
|
|
}
|