import { useEffect, useState } from "react"; import { Loader2 } from "lucide-react"; import { useTranslation } from "react-i18next"; import { useLocaleFormatting } from "@/shared/i18n"; import { autoCompactPercentToThreshold, autoCompactThresholdToPercent, clampAutoCompactThresholdPercent, } from "@/features/chat/lib/autoCompact"; import { useAutoCompactPreferences } from "@/features/chat/hooks/useAutoCompactPreferences"; import { Slider } from "@/shared/ui/slider"; export function GooseAutoCompactSettings() { const { t } = useTranslation("settings"); const { formatNumber } = useLocaleFormatting(); const { autoCompactThreshold, isHydrated: isAutoCompactThresholdHydrated, setAutoCompactThreshold, } = useAutoCompactPreferences(); const autoCompactThresholdPercent = autoCompactThresholdToPercent(autoCompactThreshold); const [draftThresholdPercent, setDraftThresholdPercent] = useState( autoCompactThresholdPercent, ); const [isSavingThreshold, setIsSavingThreshold] = useState(false); const [thresholdError, setThresholdError] = useState(null); const translationKeyPrefix = "compaction.goose.autoCompact"; const autoCompactValueLabel = !isAutoCompactThresholdHydrated ? t(`${translationKeyPrefix}.loading`) : draftThresholdPercent >= 100 ? t(`${translationKeyPrefix}.off`) : formatNumber(draftThresholdPercent / 100, { style: "percent", minimumFractionDigits: 0, maximumFractionDigits: 0, }); useEffect(() => { setDraftThresholdPercent(autoCompactThresholdPercent); }, [autoCompactThresholdPercent]); const normalizeThresholdPercent = (value: number | undefined) => clampAutoCompactThresholdPercent(value ?? autoCompactThresholdPercent); const handleThresholdSliderChange = (values: number[]) => { const nextPercent = normalizeThresholdPercent(values[0]); setThresholdError(null); setDraftThresholdPercent(nextPercent); }; const saveThresholdPercent = async (nextPercent: number) => { if (isSavingThreshold) { return; } setThresholdError(null); setDraftThresholdPercent(nextPercent); if (nextPercent === autoCompactThresholdPercent) { return; } setIsSavingThreshold(true); try { await setAutoCompactThreshold(autoCompactPercentToThreshold(nextPercent)); } catch { setThresholdError(t(`${translationKeyPrefix}.saveError`)); setDraftThresholdPercent(autoCompactThresholdPercent); } finally { setIsSavingThreshold(false); } }; const handleThresholdSliderCommit = async (values: number[]) => { const nextPercent = normalizeThresholdPercent(values[0]); await saveThresholdPercent(nextPercent); }; return (

{t(`${translationKeyPrefix}.label`)}

{t(`${translationKeyPrefix}.description`)}

{t(`${translationKeyPrefix}.current`)}

{isSavingThreshold ? ( ) : null} {autoCompactValueLabel}

{ void handleThresholdSliderCommit(values); }} disabled={isSavingThreshold || !isAutoCompactThresholdHydrated} aria-label={t(`${translationKeyPrefix}.label`)} />

{t(`${translationKeyPrefix}.helper`)}

{thresholdError ? (

{thresholdError}

) : null}

); }