import React, { useState, useEffect } from 'react'; import { IoIosCloseCircle, IoIosWarning, IoIosInformationCircle } from 'react-icons/io'; import { FaPencilAlt, FaSave } from 'react-icons/fa'; import { cn } from '../../utils'; import { errorMessage } from '../../utils/conversionUtils'; import { Alert, AlertType } from './types'; import { upsertConfig } from '../../api'; import { useConfig } from '../ConfigContext'; import { defineMessages, useIntl } from '../../i18n'; const alertIcons: Record = { [AlertType.Error]: , [AlertType.Warning]: , [AlertType.Info]: , }; interface AlertBoxProps { alert: Alert; className?: string; compactButtonEnabled?: boolean; } const i18n = defineMessages({ autoCompactAt: { id: 'alertBox.autoCompactAt', defaultMessage: 'Auto compact at', }, compactNow: { id: 'alertBox.compactNow', defaultMessage: 'Compact now', }, failedToSaveThreshold: { id: 'alertBox.failedToSaveThreshold', defaultMessage: 'Failed to save threshold: {error}', }, }); const alertStyles: Record = { [AlertType.Error]: 'bg-[#d7040e] text-white', [AlertType.Warning]: 'bg-[#cc4b03] text-white', [AlertType.Info]: 'dark:bg-white dark:text-black bg-black text-white', }; export const AlertBox = ({ alert, className }: AlertBoxProps) => { const intl = useIntl(); const { read } = useConfig(); const [isEditingThreshold, setIsEditingThreshold] = useState(false); const [loadedThreshold, setLoadedThreshold] = useState(0.8); const [thresholdValue, setThresholdValue] = useState(80); const [isSaving, setIsSaving] = useState(false); useEffect(() => { const loadThreshold = async () => { try { const threshold = await read('GOOSE_AUTO_COMPACT_THRESHOLD', false); if (threshold !== undefined && threshold !== null && typeof threshold === 'number') { setLoadedThreshold(threshold); setThresholdValue(Math.max(1, Math.round(threshold * 100))); } } catch (err) { console.error('Error fetching auto-compact threshold:', err); } }; loadThreshold(); }, [read]); const currentThreshold = loadedThreshold; const handleSaveThreshold = async () => { if (isSaving) return; // Prevent double-clicks let validThreshold = Math.max(1, Math.min(100, thresholdValue)); if (validThreshold !== thresholdValue) { setThresholdValue(validThreshold); } setIsSaving(true); try { const newThreshold = validThreshold / 100; // Convert percentage to decimal await upsertConfig({ body: { key: 'GOOSE_AUTO_COMPACT_THRESHOLD', value: newThreshold, is_secret: false, }, }); setIsEditingThreshold(false); setLoadedThreshold(newThreshold); // Notify parent component of the threshold change if (alert.onThresholdChange) { alert.onThresholdChange(newThreshold); } } catch (error) { console.error('Error saving threshold:', error); window.alert(intl.formatMessage(i18n.failedToSaveThreshold, { error: errorMessage(error, 'Unknown error') })); } finally { setIsSaving(false); } }; return (

{ // Prevent popover from closing when clicking inside the alert box if (isEditingThreshold) { e.stopPropagation(); } }} > {alert.progress ? (

{/* Auto-compact threshold indicator with edit */}

{isEditingThreshold ? ( <> {intl.formatMessage(i18n.autoCompactAt)} { const val = parseInt(e.target.value, 10); if (e.target.value === '') { setThresholdValue(1); } else if (!isNaN(val)) { setThresholdValue(Math.max(1, Math.min(100, val))); } }} onBlur={(e) => { const val = parseInt(e.target.value, 10); if (isNaN(val) || val < 1) { setThresholdValue(1); } else if (val > 100) { setThresholdValue(100); } }} onKeyDown={(e) => { if (e.key === 'Enter') { handleSaveThreshold(); } else if (e.key === 'Escape') { setIsEditingThreshold(false); const resetValue = Math.round(currentThreshold * 100); setThresholdValue(Math.max(1, resetValue)); } }} onFocus={(e) => { e.target.select(); }} onClick={(e) => { e.stopPropagation(); }} className="w-12 px-1 text-[10px] bg-white/10 border border-current/30 rounded outline-none text-center focus:bg-white/20 focus:border-current/50 transition-colors" disabled={isSaving} autoFocus /> % ) : ( <> {intl.formatMessage(i18n.autoCompactAt)} {Math.round(currentThreshold * 100)}% )}

{alert.showCompactButton && alert.onCompact && ( )}

) : ( <>

{alertIcons[alert.type]}

{alert.message} {alert.action && ( { e.preventDefault(); e.stopPropagation(); alert.action?.onClick(); }} className="text-[11px] text-left underline hover:opacity-80 cursor-pointer outline-none" > {alert.action.text} )}

)}

); };