Fix empty custom field bug

Author: paulb777

ai/ai-react-app/src/components/Layout/LeftSidebar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { AppMode } from "../../App";
 import styles from "./LeftSidebar.module.css";
-import { BackendType, ModelParams } from "firebase/ai";
+import { BackendType, Content, ModelParams } from "firebase/ai";
 import { PREDEFINED_PERSONAS } from "../../config/personas";
 
 interface LeftSidebarProps {
@@ -26,70 +26,17 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({
   generativeParams,
   setGenerativeParams,
 }) => {
+  // This component now manages its own UI state and pushes updates upwards.
+  // It does not rely on a useEffect to sync systemInstruction from the parent,
+  // following the pattern in RightSidebar.tsx to prevent state-reversion bugs.
   const [selectedPersonaId, setSelectedPersonaId] = useState<string>("default");
   const [customPersona, setCustomPersona] = useState<string>("");
 
-  // Memoize the calculation of the new instruction text based on UI state.
-  const newInstructionText = React.useMemo(() => {
-    const selected = PREDEFINED_PERSONAS.find(
-      (p) => p.id === selectedPersonaId,
-    );
-    if (!selected) return ""; // Should not happen, but a safe fallback.
-
-    return selected.id === "custom"
-      ? customPersona
-      : selected.systemInstruction;
-  }, [selectedPersonaId, customPersona]);
-
-  // Effect to sync UI changes (from dropdown or textarea) UP to the parent state.
-  useEffect(() => {
-    setGenerativeParams((prevParams) => {
-      const currentInstructionText =
-        prevParams.systemInstruction?.parts?.[0]?.text ?? "";
-
-      // Only update if the text content has actually changed to prevent re-renders.
-      if (newInstructionText === currentInstructionText) {
-        return prevParams;
-      }
-
-      const newSystemInstruction = newInstructionText
-        ? { parts: [{ text: newInstructionText }] }
-        : undefined;
-
-      return {
-        ...prevParams,
-        systemInstruction: newSystemInstruction,
-      };
-    });
-  }, [newInstructionText, setGenerativeParams]);
-
-  // Effect to sync parent state changes DOWN to the local UI state.
-  // This ensures the UI reflects the state if it's changed elsewhere.
-  useEffect(() => {
-    const instructionText =
-      generativeParams.systemInstruction?.parts?.[0]?.text ?? "";
-
-    const matchingPersona = PREDEFINED_PERSONAS.find(
-      (p) => p.id !== "custom" && p.systemInstruction === instructionText,
-    );
-
-    if (matchingPersona) {
-      // A predefined persona matches the current instruction.
-      setSelectedPersonaId(matchingPersona.id);
-      setCustomPersona("");
-    } else {
-      // No predefined persona matches. It's either custom or the default empty state.
-      if (instructionText) {
-        // It's a custom persona.
-        setSelectedPersonaId("custom");
-        setCustomPersona(instructionText);
-      } else {
-        // It's the default empty state.
-        setSelectedPersonaId("default");
-        setCustomPersona("");
-      }
-    }
-  }, [generativeParams.systemInstruction]);
+  const handleModelParamsUpdate = (
+    updateFn: (prevState: ModelParams) => ModelParams,
+  ) => {
+    setGenerativeParams((prevState) => updateFn(prevState));
+  };
 
   // Define the available modes and their display names
   const modes: { id: AppMode; label: string }[] = [
@@ -102,22 +49,47 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({
   };
 
   const handlePersonaChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedPersonaId(e.target.value);
+    const newPersonaId = e.target.value;
+    setSelectedPersonaId(newPersonaId); // 1. Update UI state
+
+    let newSystemInstructionText: string;
+
+    if (newPersonaId === "custom") {
+      // When switching to custom, the instruction is whatever is in the textarea.
+      newSystemInstructionText = customPersona;
+    } else {
+      // When switching to a predefined persona, find its instruction text.
+      const selected = PREDEFINED_PERSONAS.find((p) => p.id === newPersonaId);
+      newSystemInstructionText = selected?.systemInstruction ?? "";
+      // We are no longer in 'custom', but we don't clear the customPersona state
+      // in case the user wants to switch back and forth.
+    }
+
+    const newSystemInstruction: Content | undefined = newSystemInstructionText
+      ? { parts: [{ text: newSystemInstructionText }], role: "system" }
+      : undefined;
+
+    // 2. Update model state upwards
+    handleModelParamsUpdate((prev: ModelParams) => ({
+      ...prev,
+      systemInstruction: newSystemInstruction,
+    }));
   };
 
   const handleCustomPersonaChange = (
     e: React.ChangeEvent<HTMLTextAreaElement>,
   ) => {
     const newSystemInstructionText = e.target.value;
-    setCustomPersona(newSystemInstructionText); // 1. update UI state
-    const newSystemInstruction: Content = {
-      parts: [{ text: newSystemInstructionText}],
-      role: 'system'
-    }
-    // 2. Update model state upwards, triggering re-rendering
+    setCustomPersona(newSystemInstructionText); // 1. Update UI state
+
+    const newSystemInstruction: Content | undefined = newSystemInstructionText
+      ? { parts: [{ text: newSystemInstructionText }], role: "system" }
+      : undefined;
+
+    // 2. Update model state upwards
     handleModelParamsUpdate((prev: ModelParams) => ({
       ...prev,
-      systemInstruction: newSystemInstruction
+      systemInstruction: newSystemInstruction,
     }));
   };