Cleanup Phase 1: Remove unused React imports from safe components (#2702)

Co-authored-by: Michael Neale <michael.neale@gmail.com>

ui/desktop/src/components/settings/models/AddModelInline.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
 import Select from 'react-select';
@@ -19,7 +19,7 @@ export function AddModelInline() {
 
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [modelName, setModelName] = useState<string>('');
-  const [filteredModels, setFilteredModels] = useState([]);
+  const [filteredModels, setFilteredModels] = useState<{ id: string; name: string; provider: string }[]>([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const handleModelSelection = useHandleModelSelection();
 
@@ -61,7 +61,7 @@ export function AddModelInline() {
     setShowSuggestions(false);
   };
 
-  const handleSelectSuggestion = (suggestion) => {
+  const handleSelectSuggestion = (suggestion: { provider: string; name: string }) => {
     setModelName(suggestion.name);
     setShowSuggestions(false); // Hide suggestions after selection
   };

ui/desktop/src/components/settings/models/ModelContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, useContext, useState, ReactNode } from 'react';
 import { GOOSE_MODEL, GOOSE_PROVIDER } from '../../../env_vars';
 import { gooseModels } from './GooseModels'; // Assuming hardcoded models are here
 

ui/desktop/src/components/settings/models/MoreModelsView.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RecentModels } from './RecentModels';
 import { ProviderButtons } from './ProviderButtons';
 import BackButton from '../../ui/BackButton';

ui/desktop/src/components/settings/models/ProviderButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from '../../ui/button';
 import { Switch } from '../../ui/switch';
 import { useActiveKeys } from '../api_keys/ActiveKeysContext';

ui/desktop/src/components/settings/models/RecentModels.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Clock } from 'lucide-react';
 import { Model } from './ModelContext';
 import { ModelRadioList, SeeMoreModelsButtons } from './ModelRadioList';

ui/desktop/src/components/settings/models/utils.tsx

@@ -49,7 +49,7 @@ export function useHandleModelSelection() {
   };
 }
 
-export function createSelectedModel(selectedProvider, modelName) {
+export function createSelectedModel(selectedProvider: string, modelName: string) {
   let selectedModel = gooseModels.find(
     (model) =>
       model.provider.toLowerCase() === selectedProvider &&