Autocompact threshold UI cleanup (#5232)

ui/desktop/src/components/ChatInput.tsx

@@ -28,7 +28,6 @@ import { DroppedFile, useFileDrop } from '../hooks/useFileDrop';
 import { Recipe } from '../recipe';
 import MessageQueue from './MessageQueue';
 import { detectInterruption } from '../utils/interruptionDetector';
-import { getApiUrl } from '../config';
 
 interface QueuedMessage {
   id: string;
@@ -502,52 +501,19 @@ export default function ChatInput({
   // Load auto-compact threshold
   const loadAutoCompactThreshold = useCallback(async () => {
     try {
-      const secretKey = await window.electron.getSecretKey();
-      const response = await fetch(getApiUrl('/config/read'), {
-        method: 'POST',
-        headers: {
-          'X-Secret-Key': secretKey,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          key: 'GOOSE_AUTO_COMPACT_THRESHOLD',
-          is_secret: false,
-        }),
-      });
-      if (response.ok) {
-        const data = await response.json();
-        console.log('Loaded auto-compact threshold from config:', data);
-        if (data !== undefined && data !== null) {
-          setAutoCompactThreshold(data);
-          console.log('Set auto-compact threshold to:', data);
-        }
-      } else {
-        console.error('Failed to fetch auto-compact threshold, status:', response.status);
+      const threshold = await read('GOOSE_AUTO_COMPACT_THRESHOLD', false);
+      if (threshold !== undefined && threshold !== null) {
+        setAutoCompactThreshold(threshold as number);
       }
     } catch (err) {
       console.error('Error fetching auto-compact threshold:', err);
     }
-  }, []);
+  }, [read]);
 
   useEffect(() => {
     loadAutoCompactThreshold();
   }, [loadAutoCompactThreshold]);
 
-  // Listen for threshold change events from AlertBox
-  useEffect(() => {
-    const handleThresholdChange = (event: CustomEvent<{ threshold: number }>) => {
-      setAutoCompactThreshold(event.detail.threshold);
-    };
-
-    // Type assertion to handle the mismatch between CustomEvent and EventListener
-    const eventListener = handleThresholdChange as (event: globalThis.Event) => void;
-    window.addEventListener('autoCompactThresholdChanged', eventListener);
-
-    return () => {
-      window.removeEventListener('autoCompactThresholdChanged', eventListener);
-    };
-  }, []);
-
   // Handle tool count alerts and token usage
   useEffect(() => {
     clearAlerts();
@@ -574,6 +540,9 @@ export default function ChatInput({
         },
         compactIcon: <ScrollText size={12} />,
         autoCompactThreshold: autoCompactThreshold,
+        onThresholdChange: (newThreshold: number) => {
+          setAutoCompactThreshold(newThreshold);
+        },
       });
     }
 

ui/desktop/src/components/alerts/AlertBox.tsx

@@ -3,7 +3,7 @@ import { IoIosCloseCircle, IoIosWarning, IoIosInformationCircle } from 'react-ic
 import { FaPencilAlt, FaSave } from 'react-icons/fa';
 import { cn } from '../../utils';
 import { Alert, AlertType } from './types';
-import { getApiUrl } from '../../config';
+import { upsertConfig } from '../../api';
 
 const alertIcons: Record<AlertType, React.ReactNode> = {
   [AlertType.Error]: <IoIosCloseCircle className="h-5 w-5" />,
@@ -42,41 +42,21 @@ export const AlertBox = ({ alert, className }: AlertBoxProps) => {
     setIsSaving(true);
     try {
       const newThreshold = validThreshold / 100; // Convert percentage to decimal
-      console.log('Saving auto-compact threshold:', newThreshold);
 
-      // Update the configuration via the upsert API
-      const response = await fetch(getApiUrl('/config/upsert'), {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Secret-Key': await window.electron.getSecretKey(),
-        },
-        body: JSON.stringify({
+      await upsertConfig({
+        body: {
           key: 'GOOSE_AUTO_COMPACT_THRESHOLD',
           value: newThreshold,
           is_secret: false,
-        }),
+        },
       });
 
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Failed to update threshold: ${errorText}`);
-      }
-
-      const responseText = await response.text();
-      console.log('Threshold save response:', responseText);
-
       setIsEditingThreshold(false);
 
-      // Dispatch a custom event to notify other components that the threshold has changed
-      // This allows ChatInput to reload the threshold without a page reload
-      window.dispatchEvent(
-        new CustomEvent('autoCompactThresholdChanged', {
-          detail: { threshold: newThreshold },
-        })
-      );
-
-      console.log('Dispatched autoCompactThresholdChanged event with threshold:', newThreshold);
+      // Notify parent component of the threshold change
+      if (alert.onThresholdChange) {
+        alert.onThresholdChange(newThreshold);
+      }
     } catch (error) {
       console.error('Error saving threshold:', error);
       window.alert(

ui/desktop/src/components/alerts/types.ts

@@ -21,4 +21,5 @@ export interface Alert {
   onCompact?: () => void;
   compactIcon?: React.ReactNode;
   autoCompactThreshold?: number;
+  onThresholdChange?: (threshold: number) => void;
 }