FEAT: hotkey to active search

xinference/web/ui/src/components/hotkeyFocusTextField.js

@@ -0,0 +1,58 @@
+import { TextField } from '@mui/material'
+import InputAdornment from '@mui/material/InputAdornment'
+import Typography from '@mui/material/Typography'
+import React, { useEffect, useRef, useState } from 'react'
+
+const HotkeyFocusTextField = ({
+  label,
+  value,
+  onChange,
+  hotkey = '/',
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false)
+  const textFieldRef = useRef(null)
+  const handleKeyDown = (event) => {
+    if (
+      event.key === hotkey &&
+      document.activeElement !== textFieldRef.current
+    ) {
+      event.preventDefault()
+      setIsFocused(true)
+      textFieldRef.current?.focus()
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [hotkey])
+
+  return (
+    <TextField
+      {...props}
+      label={label}
+      value={value}
+      onChange={onChange}
+      inputRef={textFieldRef}
+      autoFocus={isFocused}
+      onBlur={() => setIsFocused(false)}
+      onFocus={() => setIsFocused(true)}
+      InputProps={{
+        endAdornment:
+          !isFocused && !value ? (
+            <InputAdornment position="end">
+              <Typography color="textSecondary" style={{ fontSize: 'inherit' }}>
+                Type {hotkey} to search
+              </Typography>
+            </InputAdornment>
+          ) : null,
+      }}
+    />
+  )
+}
+
+export default HotkeyFocusTextField

xinference/web/ui/src/scenes/launch_model/LaunchModelComponent.js

@@ -1,8 +1,9 @@
-import { Box, FormControl, TextField } from '@mui/material'
+import { Box, FormControl } from '@mui/material'
 import React, { useContext, useEffect, useState } from 'react'
 
 import { ApiContext } from '../../components/apiContext'
 import fetcher from '../../components/fetcher'
+import HotkeyFocusTextField from '../../components/hotkeyFocusTextField'
 import ModelCard from './modelCard'
 import style from './styles/launchModelStyle'
 
@@ -66,13 +67,14 @@ const LaunchModelComponent = ({ modelType }) => {
         }}
       >
         <FormControl variant="outlined" margin="normal">
-          <TextField
+          <HotkeyFocusTextField
             id="search"
             type="search"
             label={`Search for ${modelType} model name`}
             value={searchTerm}
             onChange={handleChange}
             size="small"
+            hotkey="/"
           />
         </FormControl>
       </div>

xinference/web/ui/src/scenes/launch_model/launchCustom.js

@@ -1,10 +1,11 @@
 import { TabContext, TabList, TabPanel } from '@mui/lab'
-import { Box, FormControl, Tab, TextField } from '@mui/material'
+import { Box, FormControl, Tab } from '@mui/material'
 import React, { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { ApiContext } from '../../components/apiContext'
 import fetcher from '../../components/fetcher'
+import HotkeyFocusTextField from '../../components/hotkeyFocusTextField'
 import ModelCard from './modelCard'
 
 const LaunchCustom = ({ gpuAvailable }) => {
@@ -169,13 +170,14 @@ const LaunchCustom = ({ gpuAvailable }) => {
             }}
           >
             <FormControl variant="outlined" margin="normal">
-              <TextField
+              <HotkeyFocusTextField
                 id="search"
                 type="search"
                 label="Search for custom model name"
                 value={searchTerm}
                 onChange={handleChange}
                 size="small"
+                hotkey="/"
               />
             </FormControl>
           </div>
@@ -216,13 +218,14 @@ const LaunchCustom = ({ gpuAvailable }) => {
             }}
           >
             <FormControl variant="outlined" margin="normal">
-              <TextField
+              <HotkeyFocusTextField
                 id="search"
                 type="search"
                 label="Search for custom model name"
                 value={searchTerm}
                 onChange={handleChange}
                 size="small"
+                hotkey="/"
               />
             </FormControl>
           </div>
@@ -256,13 +259,14 @@ const LaunchCustom = ({ gpuAvailable }) => {
             }}
           >
             <FormControl variant="outlined" margin="normal">
-              <TextField
+              <HotkeyFocusTextField
                 id="search"
                 type="search"
                 label="Search for custom model name"
                 value={searchTerm}
                 onChange={handleChange}
                 size="small"
+                hotkey="/"
               />
             </FormControl>
           </div>

xinference/web/ui/src/scenes/launch_model/launchLLM.js

@@ -1,16 +1,10 @@
-import {
-  Box,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-} from '@mui/material'
+import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material'
 import React, { useContext, useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 
 import { ApiContext } from '../../components/apiContext'
 import fetcher from '../../components/fetcher'
+import HotkeyFocusTextField from '../../components/hotkeyFocusTextField'
 import ModelCard from './modelCard'
 
 const LaunchLLM = ({ gpuAvailable }) => {
@@ -133,13 +127,14 @@ const LaunchLLM = ({ gpuAvailable }) => {
           </Select>
         </FormControl>
         <FormControl variant="outlined" margin="normal">
-          <TextField
+          <HotkeyFocusTextField
             id="search"
             type="search"
             label="Search for model name and description"
             value={searchTerm}
             onChange={handleChange}
             size="small"
+            hotkey="/"
           />
         </FormControl>
       </div>