import React from 'react'; import { AlertTriangle, ExternalLink } from 'lucide-react'; import { Message, SystemNotificationContent } from '../../api'; import { WEB_PROTOCOLS } from '../../utils/urlSecurity'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ insufficientCredits: { id: 'creditsExhaustedNotification.insufficientCredits', defaultMessage: 'Insufficient Credits', }, addCredits: { id: 'creditsExhaustedNotification.addCredits', defaultMessage: 'Add credits', }, }); interface CreditsExhaustedNotificationProps { notification: SystemNotificationContent; } function getValidatedTopUpUrl(data: unknown): string | null { if (!data || typeof data !== 'object') { return null; } const rawUrl = (data as Record).top_up_url; if (typeof rawUrl !== 'string') { return null; } const url = rawUrl.trim(); if (!url) { return null; } try { const parsedUrl = new URL(url); if (!WEB_PROTOCOLS.includes(parsedUrl.protocol)) { return null; } return parsedUrl.toString(); } catch { return null; } } export const CreditsExhaustedNotification: React.FC = ({ notification, }) => { const intl = useIntl(); const topUpUrl = getValidatedTopUpUrl(notification.data); const handleTopUp = () => { if (topUpUrl) { window.electron.openExternal(topUpUrl); } }; return (

{intl.formatMessage(i18n.insufficientCredits)}

{notification.msg}

{topUpUrl && ( )}

); }; export function getCreditsExhaustedNotification( message: Message ): SystemNotificationContent | undefined { return message.content.find( (content): content is SystemNotificationContent & { type: 'systemNotification' } => content.type === 'systemNotification' && content.notificationType === 'creditsExhausted' ); }