feat(cli): enhance SearchBox functionality

Added 'onChange' prop to the SearchBox component for active response to selection changes. Also updated the 'components' prop type and handled the related changes in the 'getSuggestion' use case. This includes mapping the components to their keys, updating the display name and handling selected results.

packages/cli/src/components/SearchBox.tsx

@@ -10,11 +10,13 @@ export function SearchBox({
   helper,
   initialQuery,
   onKeyDown,
+  onChange,
 }: {
-  components: string[]
+  components: {key: string; displayName: string}[]
   helper: string
   initialQuery?: string
   onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void
+  onChange?: (key: string) => void
 }) {
   const [query, setQuery] = useState<string>(initialQuery ?? '')
   const [isLoading, setLoading] = useState<boolean>(false)
@@ -23,12 +25,22 @@ export function SearchBox({
 
   useEffect(() => {
     setLoading(true)
-    getSuggestion(components, query).then((result) => {
+    getSuggestion(
+      components.map(({key}) => key),
+      query,
+    ).then((result) => {
       setSuggestions(result)
       setLoading(false)
+      if (result.length >= selected) {
+        setSelected(result.length - 1)
+      }
     })
   }, [query])
 
+  useEffect(() => {
+    onChange?.(suggestions[selected])
+  }, [selected, onChange])
+
   const app = useApp()
 
   useInput((i, k) => {
@@ -58,7 +70,9 @@ export function SearchBox({
           {suggestions.map((name, index) => {
             return (
               <Box borderStyle={'round'} key={name}>
-                <Text backgroundColor={selected === index ? 'white' : undefined}>{name}</Text>
+                <Text backgroundColor={selected === index ? 'white' : undefined}>
+                  {components[components.findIndex(({key}) => key === name)].displayName}
+                </Text>
               </Box>
             )
           })}