refactor: add selectedPagesRef to useSelectedPages for improved state management

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageTreeSelection.tsx

@@ -93,12 +93,13 @@ export const AiAssistantManagementPageTreeSelection = (props: Props): JSX.Elemen
   const isNewAiAssistant = aiAssistantManagementModalData?.aiAssistantData == null;
 
   const {
-    selectedPages, selectedPagesArray, addPage, removePage,
+    selectedPages, selectedPagesRef, selectedPagesArray, addPage, removePage,
   } = useSelectedPages(baseSelectedPages);
 
+
   const addPageButtonClickHandler = useCallback((page: SelectablePage) => {
     const pagePathWithGlob = `${page.path}/*`;
-    if (selectedPages.has(pagePathWithGlob)) {
+    if (selectedPagesRef.current == null || selectedPagesRef.current.has(pagePathWithGlob)) {
       return;
     }
 
@@ -106,7 +107,10 @@ export const AiAssistantManagementPageTreeSelection = (props: Props): JSX.Elemen
     clonedPage.path = pagePathWithGlob;
 
     addPage(clonedPage);
-  }, [addPage, selectedPages]);
+  }, [
+    addPage,
+    selectedPagesRef, // Prevent flickering (use ref to avoid method recreation)
+  ]);
 
   const nextButtonClickHandler = useCallback(() => {
     updateBaseSelectedPages(Array.from(selectedPages.values()));

apps/app/src/features/openai/client/services/use-selected-pages.tsx

@@ -1,5 +1,5 @@
 import {
-  useState, useCallback, useEffect, useMemo,
+  useState, useCallback, useEffect, useMemo, useRef,
 } from 'react';
 
 import type { SelectablePage } from '../../interfaces/selectable-page';
@@ -8,6 +8,7 @@ import { useAiAssistantManagementModal } from '../stores/ai-assistant';
 
 type UseSelectedPages = {
   selectedPages: Map<string, SelectablePage>,
+  selectedPagesRef: React.RefObject<Map<string, SelectablePage>>,
   selectedPagesArray: SelectablePage[],
   addPage: (page: SelectablePage) => void,
   removePage: (page: SelectablePage) => void,
@@ -17,10 +18,16 @@ export const useSelectedPages = (initialPages?: SelectablePage[]): UseSelectedPa
   const [selectedPages, setSelectedPages] = useState<Map<string, SelectablePage>>(new Map());
   const { data: aiAssistantManagementModalData } = useAiAssistantManagementModal();
 
+  const selectedPagesRef = useRef(selectedPages);
+
   const selectedPagesArray = useMemo(() => {
     return Array.from(selectedPages.values());
   }, [selectedPages]);
 
+  useEffect(() => {
+    selectedPagesRef.current = selectedPages;
+  }, [selectedPages]);
+
   useEffect(() => {
     // Initialize each time PageMode is changed
     if (initialPages != null && aiAssistantManagementModalData?.pageMode != null) {
@@ -57,6 +64,7 @@ export const useSelectedPages = (initialPages?: SelectablePage[]): UseSelectedPa
 
   return {
     selectedPages,
+    selectedPagesRef,
     selectedPagesArray,
     addPage,
     removePage,