Bugfix/add fixes for search of view header (#3271)

add fixes for search of view header

packages/ui/src/hooks/useSearchShortcut.jsx

@@ -6,6 +6,9 @@ const isMac = getOS() === 'macos'
 const useSearchShorcut = (inputRef) => {
     useEffect(() => {
         const component = inputRef.current
+
+        if (!component) return // Check if inputRef.current is defined
+
         const handleKeyDown = (event) => {
             if ((isMac && event.metaKey && event.key === 'f') || (!isMac && event.ctrlKey && event.key === 'f')) {
                 event.preventDefault()
@@ -17,14 +20,16 @@ const useSearchShorcut = (inputRef) => {
             if (event.key === 'Escape') component.blur()
         }
 
-        inputRef.current.addEventListener('keydown', handleInputEscape)
+        component.addEventListener('keydown', handleInputEscape)
         document.addEventListener('keydown', handleKeyDown)
 
         return () => {
-            component.addEventListener('keydown', handleInputEscape)
+            if (component) {
+                component.removeEventListener('keydown', handleInputEscape)
+            }
             document.removeEventListener('keydown', handleKeyDown)
         }
-    })
+    }, [inputRef]) // Add inputRef to the dependency array to ensure the effect is re-applied if inputRef changes
 }
 
 export default useSearchShorcut

packages/ui/src/views/assistants/index.jsx

@@ -43,6 +43,11 @@ const Assistants = () => {
         setShowLoadDialog(true)
     }
 
+    const [search, setSearch] = useState('')
+    const onSearchChange = (event) => {
+        setSearch(event.target.value)
+    }
+
     const onAssistantSelected = (selectedOpenAIAssistantId, credential) => {
         setShowLoadDialog(false)
         addNew(selectedOpenAIAssistantId, credential)
@@ -78,6 +83,11 @@ const Assistants = () => {
         getAllAssistantsApi.request()
     }
 
+    function filterAssistants(data) {
+        const parsedData = JSON.parse(data.details)
+        return parsedData && parsedData.name && parsedData.name.toLowerCase().indexOf(search.toLowerCase()) > -1
+    }
+
     useEffect(() => {
         getAllAssistantsApi.request()
 
@@ -101,7 +111,12 @@ const Assistants = () => {
                     <ErrorBoundary error={error} />
                 ) : (
                     <Stack flexDirection='column' sx={{ gap: 3 }}>
-                        <ViewHeader title='OpenAI Assistants'>
+                        <ViewHeader
+                            onSearchChange={onSearchChange}
+                            search={true}
+                            searchPlaceholder='Search Assistants'
+                            title='OpenAI Assistants'
+                        >
                             <Button
                                 variant='outlined'
                                 onClick={loadExisting}
@@ -128,7 +143,7 @@ const Assistants = () => {
                         ) : (
                             <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
                                 {getAllAssistantsApi.data &&
-                                    getAllAssistantsApi.data.map((data, index) => (
+                                    getAllAssistantsApi.data?.filter(filterAssistants).map((data, index) => (
                                         <ItemCard
                                             data={{
                                                 name: JSON.parse(data.details)?.name,

packages/ui/src/views/tools/index.jsx

@@ -104,6 +104,17 @@ const Tools = () => {
         getAllToolsApi.request()
     }
 
+    const [search, setSearch] = useState('')
+    const onSearchChange = (event) => {
+        setSearch(event.target.value)
+    }
+
+    function filterTools(data) {
+        return (
+            data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 || data.description.toLowerCase().indexOf(search.toLowerCase()) > -1
+        )
+    }
+
     useEffect(() => {
         getAllToolsApi.request()
 
@@ -127,7 +138,7 @@ const Tools = () => {
                     <ErrorBoundary error={error} />
                 ) : (
                     <Stack flexDirection='column' sx={{ gap: 3 }}>
-                        <ViewHeader title='Tools'>
+                        <ViewHeader onSearchChange={onSearchChange} search={true} searchPlaceholder='Search Tools' title='Tools'>
                             <ToggleButtonGroup
                                 sx={{ borderRadius: 2, maxHeight: 40 }}
                                 value={view}
@@ -200,9 +211,9 @@ const Tools = () => {
                                 ) : (
                                     <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
                                         {getAllToolsApi.data &&
-                                            getAllToolsApi.data.map((data, index) => (
+                                            getAllToolsApi.data
-                                                <ItemCard data={data} key={index} onClick={() => edit(data)} />
+                                                ?.filter(filterTools)
-                                            ))}
+                                                .map((data, index) => <ItemCard data={data} key={index} onClick={() => edit(data)} />)}
                                     </Box>
                                 )}
                             </>