🔧 fix: MCP Selection Persist and UI Flicker Issues (#9324)

* refactor: useMCPSelect

    - Add useGetMCPTools to use in useMCPSelect and elsewhere hooks for fetching MCP tools
    - remove memoized key
    - remove use of `useChatContext` and require conversationId as prop

* feat: Add MCPPanelContext and integrate conversationId as prop for useMCPSelect across components

- Introduced MCPPanelContext to manage conversationId state.
- Updated MCPSelect, MCPSubMenu, and MCPConfigDialog to accept conversationId as a prop.
- Modified ToolsDropdown and BadgeRow to pass conversationId to relevant components.
- Refactored MCPPanel to utilize MCPPanelProvider for context management.

* fix: remove nested ternary in ServerInitializationSection

- Replaced conditional operator with if-else statements for better readability in determining button text based on server initialization state and reinitialization status.

* refactor: wrap setValueWrap in useCallback for performance optimization

* refactor: streamline useMCPSelect by consolidating storageKey definition

* fix: prevent clearing selections on page refresh by tracking initial load completion

* refactor: simplify concern of useMCPSelect hook

* refactor: move ConfigFieldDetail interface to common types for better reusability, isolate usage of `useGetMCPTools`

* refactor: integrate mcpServerNames into BadgeRowContext and update ToolsDropdown and MCPSelect components

client/src/hooks/useLocalStorageAlt.tsx

@@ -5,7 +5,7 @@
  *  - Also value will be updated everywhere, when value updated (via `storage` event)
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
 export default function useLocalStorage<T>(
   key: string,
@@ -47,23 +47,26 @@ export default function useLocalStorage<T>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key, globalSetState]);
 
-  const setValueWrap = (value: T) => {
-    try {
-      setValue(value);
-      const storeLocal = () => {
-        localStorage.setItem(key, JSON.stringify(value));
-        window?.dispatchEvent(new StorageEvent('storage', { key }));
-      };
-      if (!storageCondition) {
-        storeLocal();
-      } else if (storageCondition(value, localStorage.getItem(key))) {
-        storeLocal();
+  const setValueWrap = useCallback(
+    (value: T) => {
+      try {
+        setValue(value);
+        const storeLocal = () => {
+          localStorage.setItem(key, JSON.stringify(value));
+          window?.dispatchEvent(new StorageEvent('storage', { key }));
+        };
+        if (!storageCondition) {
+          storeLocal();
+        } else if (storageCondition(value, localStorage.getItem(key))) {
+          storeLocal();
+        }
+        globalSetState?.(value);
+      } catch (e) {
+        console.error(e);
       }
-      globalSetState?.(value);
-    } catch (e) {
-      console.error(e);
-    }
-  };
+    },
+    [key, globalSetState, storageCondition],
+  );
 
   return [value, setValueWrap];
 }