Fix infinit loop with useConfig

Author: bedanley

lib/user-interface/react/src/components/chatbot/components/Sessions.tsx

@@ -158,7 +158,7 @@ export function Sessions ({ newSession }) {
                 }
             });
         }
-    }, [auth, getConfiguration]);
+    }, [auth.isLoading, auth.isAuthenticated, getConfiguration]);
 
     useEffect(() => {
         if (!isDeleteByIdLoading && isDeleteByIdSuccess) {

lib/user-interface/react/src/components/chatbot/hooks/chat.hooks.tsx

@@ -173,7 +173,7 @@ export const useChatGeneration = ({
         };
 
         return new ChatOpenAI(modelConfig);
-    }, [selectedModel, auth, chatConfiguration]);
+    }, [selectedModel, auth.user?.id_token, chatConfiguration]);
 
     const retryResponse = async () => {
         if (!lastRequest) return;

lib/user-interface/react/src/components/configuration/ConfigurationComponent.tsx

@@ -102,17 +102,18 @@ export function ConfigurationComponent (): ReactElement {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initialForm, state.form]);
 
+    const configVersionId = config?.[0]?.versionId;
+
     useEffect(() => {
         if (!isFetchingConfig && config != null) {
             setState({
-                ...state,
                 form: {
                     ...config[0]?.configuration,
                 },
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [config, isFetchingConfig]);
+    }, [configVersionId, isFetchingConfig]);
 
     useEffect(() => {
         if (!isUpdating && isUpdateSuccess) {

lib/user-interface/react/src/components/model-management/hooks/useModelComparison.hook.tsx

@@ -95,7 +95,7 @@ export const useModelComparison = (models: IModel[], chatConfig: IChatConfigurat
         };
 
         return new ChatOpenAI(modelConfig);
-    }, [models, auth, chatConfig]);
+    }, [models, auth.user?.id_token, chatConfig]);
 
     const generateModelResponse = async (
         modelId: string,

lib/user-interface/react/src/shared/hooks/useAnnouncementNotifier.ts

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 import { useAppDispatch } from '@/config/store';
 import { useNotificationService } from '@/shared/util/hooks';
 import { clearNotification } from '@/shared/reducers/notification.reducer';
@@ -30,31 +30,42 @@ const ANNOUNCEMENT_NOTIFICATION_ID = 'announcement-notification';
 export function useAnnouncementNotifier (config: IConfiguration | undefined): void {
     const dispatch = useAppDispatch();
     const notificationService = useNotificationService(dispatch);
+    const lastAnnouncementRef = useRef<string | null>(null);
 
     const clearAnnouncement = useCallback(() => {
         dispatch(clearNotification(ANNOUNCEMENT_NOTIFICATION_ID));
     }, [dispatch]);
 
+    // Extract stable primitive values to avoid re-running the effect on object reference changes
+    const isEnabled = config?.configuration?.announcement?.isEnabled ?? false;
+    const message = config?.configuration?.announcement?.message ?? '';
+    const createdAt = config?.createdAt;
+
     useEffect(() => {
         if (!config) {
             return;
         }
 
-        const announcement = config.configuration.announcement ?? { isEnabled: false, message: '' };
-        const { isEnabled, message } = announcement;
-
         if (!isEnabled || !message) {
+            lastAnnouncementRef.current = null;
             clearAnnouncement();
             return;
         }
 
-        if (!shouldShowAnnouncement(config.createdAt)) {
+        if (!shouldShowAnnouncement(createdAt)) {
+            return;
+        }
+
+        // Avoid re-dispatching the same announcement notification
+        const announcementKey = `${message}:${createdAt}`;
+        if (lastAnnouncementRef.current === announcementKey) {
             return;
         }
+        lastAnnouncementRef.current = announcementKey;
 
         const onDismiss = () => {
-            if (config.createdAt !== undefined) {
-                setDismissedTimestamp(config.createdAt);
+            if (createdAt !== undefined) {
+                setDismissedTimestamp(createdAt);
             }
             clearAnnouncement();
         };
@@ -67,5 +78,5 @@ export function useAnnouncementNotifier (config: IConfiguration | undefined): vo
             true,
             onDismiss,
         );
-    }, [config, clearAnnouncement, notificationService]);
+    }, [config, isEnabled, message, createdAt, clearAnnouncement, notificationService]);
 }