@sanity/embeddings-index-ui 1.0.3 → 1.1.0

package/dist/index.js

@@ -8,14 +8,61 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@sanity/ui');
 var icons = require('@sanity/icons');
 var require$$0 = require('react');
-var router = require('sanity/router');
 var desk = require('sanity/desk');
+var router = require('sanity/router');
 function _interopDefaultCompat(e) {
   return e && typeof e === 'object' && 'default' in e ? e : {
     default: e
   };
 }
 var require$$0__default = /*#__PURE__*/_interopDefaultCompat(require$$0);
+function publicId(id) {
+  return id.replace("drafts.", "");
+}
+const featureName = "embeddingsIndexApi";
+const FeatureEnabledContext = require$$0.createContext("loading");
+function useIsFeatureEnabled() {
+  const client = sanity.useClient({
+    apiVersion: "2023-09-01"
+  });
+  const [status, setStatus] = require$$0.useState("loading");
+  require$$0.useEffect(() => {
+    client.request({
+      method: "GET",
+      url: "/projects/".concat(client.config().projectId, "/features/").concat(featureName)
+    }).then(isEnabled => {
+      setStatus(isEnabled === "true" || isEnabled === true ? "enabled" : "disabled");
+    }).catch(err => {
+      console.error(err);
+      setStatus("disabled");
+    });
+  }, [client]);
+  return status;
+}
+function FeatureEnabledProvider(props) {
+  const status = useIsFeatureEnabled();
+  return /* @__PURE__ */jsxRuntime.jsx(FeatureEnabledContext.Provider, {
+    value: status,
+    children: props.children
+  });
+}
+function useIsFeatureEnabledContext() {
+  return require$$0.useContext(FeatureEnabledContext);
+}
+function FeatureDisabledNotice() {
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+    tone: "primary",
+    border: true,
+    padding: 2,
+    children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
+      size: 1,
+      children: ["Embeddings index APIs are only available on the", " ", /* @__PURE__ */jsxRuntime.jsx("a", {
+        href: "https://sanity.io/pricing",
+        children: "Team tier and above"
+      }), ". Please upgrade to enable access."]
+    })
+  });
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1887,9 +1934,6 @@ function deleteIndex(indexName, client) {
     url: "/embeddings-index/".concat(dataset, "/").concat(indexName, "?projectId=").concat(projectId)
   });
 }
-function publicId(id) {
-  return id.replace("drafts.", "");
-}
 function useApiClient() {
   const client = sanity.useClient({
     apiVersion: "vX"
@@ -1906,107 +1950,20 @@ function useApiClient() {
     return client;
   }, [client]);
 }
-const featureName = "embeddingsIndexApi";
-const FeatureEnabledContext = require$$0.createContext("loading");
-function useIsFeatureEnabled() {
-  const client = sanity.useClient({
-    apiVersion: "2023-09-01"
-  });
-  const [status, setStatus] = require$$0.useState("loading");
-  require$$0.useEffect(() => {
-    client.request({
-      method: "GET",
-      url: "/projects/".concat(client.config().projectId, "/features/").concat(featureName)
-    }).then(isEnabled => {
-      setStatus(isEnabled === "true" || isEnabled === true ? "enabled" : "disabled");
-    }).catch(err => {
-      console.error(err);
-      setStatus("disabled");
-    });
-  }, [client]);
-  return status;
-}
-function FeatureEnabledProvider(props) {
-  const status = useIsFeatureEnabled();
-  return /* @__PURE__ */jsxRuntime.jsx(FeatureEnabledContext.Provider, {
-    value: status,
-    children: props.children
-  });
-}
-function useIsFeatureEnabledContext() {
-  return require$$0.useContext(FeatureEnabledContext);
-}
-function FeatureDisabledNotice() {
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-    tone: "primary",
-    border: true,
-    padding: 2,
-    children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-      size: 1,
-      children: ["Embeddings index APIs are only available on the", " ", /* @__PURE__ */jsxRuntime.jsx("a", {
-        href: "https://sanity.io/pricing",
-        children: "Team tier and above"
-      }), ". Please upgrade to enable access."]
-    })
-  });
-}
+const NO_RESULTS_VALUE = "";
 const NO_OPTIONS = [];
 const NO_FILTER = () => true;
-function SemanticSearchReferenceInput(props) {
-  var _a, _b, _c;
-  const defaultEnabled = ((_c = (_b = (_a = props.schemaType) == null ? void 0 : _a.options) == null ? void 0 : _b.embeddingsIndex) == null ? void 0 : _c.searchMode) === "embeddings";
-  const featureState = useIsFeatureEnabledContext();
-  const [semantic, setSemantic] = require$$0.useState(defaultEnabled);
-  const toggleSemantic = require$$0.useCallback(() => setSemantic(current => !current), []);
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-    gap: 2,
-    flex: 1,
-    style: {
-      width: "100%"
-    },
-    children: [semantic && featureState == "loading" ? /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      padding: 2,
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {})
-    }) : null, semantic && featureState == "disabled" ? /* @__PURE__ */jsxRuntime.jsx(FeatureDisabledNotice, {}) : null, /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      flex: 1,
-      style: {
-        maxHeight: 36,
-        overflow: "hidden"
-      },
-      children: semantic && featureState == "enabled" ? /* @__PURE__ */jsxRuntime.jsx(SemanticSearchInput, {
-        ...props
-      }) : props.renderDefault(props)
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-      icon: semantic ? icons.EarthGlobeIcon : icons.LinkIcon,
-      onClick: toggleSemantic,
-      mode: "bleed",
-      title: semantic ? "Switch to standard reference search" : "Switch to semantic reference search"
-    })]
-  });
-}
-function useDebouncedValue(value, ms) {
-  const [debouncedValue, setDebouncedValue] = require$$0.useState(value);
-  require$$0.useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setDebouncedValue(value);
-    }, ms);
-    return () => clearTimeout(timeoutId);
-  }, [value, ms]);
-  return debouncedValue;
-}
-function SemanticSearchInput(props) {
+const SemanticSearchAutocomplete = require$$0.forwardRef(function SemanticSearchAutocomplete2(props, ref) {
   const {
-    onPathFocus,
-    onChange,
+    indexConfig,
+    filterResult,
+    getEmptySearchValue,
     readOnly,
-    schemaType,
-    value
+    onFocus,
+    onBlur,
+    onChange,
+    typeFilter
   } = props;
-  const {
-    value: currentDocument
-  } = desk.useDocumentPane();
-  const docRef = require$$0.useRef(currentDocument);
-  const autocompleteRef = require$$0.useRef(null);
   const id = require$$0.useId();
   const [query, setQuery] = require$$0.useState("");
   const queryRef = require$$0.useRef(query);
@@ -2015,29 +1972,16 @@ function SemanticSearchInput(props) {
   const [searching, setSearching] = require$$0.useState(false);
   const [options, setOptions] = require$$0.useState(NO_OPTIONS);
   const client = useApiClient();
-  require$$0.useEffect(() => {
-    docRef.current = currentDocument;
-  }, [currentDocument]);
-  require$$0.useEffect(() => {
-    var _a;
-    if (value == null ? void 0 : value._ref) {
-      (_a = autocompleteRef.current) == null ? void 0 : _a.focus();
-    }
-  }, []);
-  const handleFocus = require$$0.useCallback(() => onPathFocus(["_ref"]), [onPathFocus]);
-  const handleBlur = require$$0.useCallback(() => onPathFocus([]), [onPathFocus]);
   const runIndexQuery = require$$0.useCallback(queryString => {
-    var _a, _b, _c, _d, _e;
+    var _a;
     setSearching(true);
-    const refSchema = schemaType;
-    const indexName = (_b = (_a = refSchema.options) == null ? void 0 : _a.embeddingsIndex) == null ? void 0 : _b.indexName;
-    const maxResults = (_d = (_c = refSchema.options) == null ? void 0 : _c.embeddingsIndex) == null ? void 0 : _d.maxResults;
-    const typeFilter = refSchema.to.map(ref => ref.name);
+    const indexName = indexConfig == null ? void 0 : indexConfig.indexName;
+    const maxResults = indexConfig == null ? void 0 : indexConfig.maxResults;
     if (!indexName) {
-      throw new Error("Reference option embeddingsIndex.indexName is required, but was missing in type ".concat(refSchema.name));
+      throw new Error("Reference option embeddingsIndex.indexName is required, but was missing");
     }
     queryIndex({
-      query: queryString.trim().length ? queryString : (_e = JSON.stringify(docRef.current)) != null ? _e : "",
+      query: queryString.trim().length ? queryString : (_a = getEmptySearchValue()) != null ? _a : "",
       indexName,
       maxResults,
       filter: {
@@ -2046,10 +1990,18 @@ function SemanticSearchInput(props) {
     }, client).then(result => {
       if (queryRef.current === queryString) {
         setSearching(false);
-        setOptions(result.filter(r => r.value.documentId !== publicId(docRef.current._id)).map(r => sanity.typed({
+        setOptions([]);
+        const resultOptions = result.filter(hit => filterResult ? filterResult(hit) : true).map(r => sanity.typed({
           result: r,
           value: r.value.documentId
-        })));
+        }));
+        if (resultOptions.length) {
+          setOptions(resultOptions);
+        } else {
+          setOptions([{
+            value: NO_RESULTS_VALUE
+          }]);
+        }
       }
     }).catch(e => {
       if (queryRef.current === queryString) {
@@ -2057,23 +2009,13 @@ function SemanticSearchInput(props) {
       }
       throw e;
     });
-  }, [client, schemaType]);
+  }, [client, indexConfig, getEmptySearchValue, filterResult, typeFilter]);
   require$$0.useEffect(() => {
     if (prevDebouncedQuery.current !== debouncedQuery) {
       runIndexQuery(debouncedQuery);
     }
     prevDebouncedQuery.current = debouncedQuery;
   }, [debouncedQuery, runIndexQuery]);
-  const handleChange = require$$0.useCallback(nextId => {
-    if (!nextId) {
-      onChange(sanity.unset());
-      onPathFocus([]);
-      return;
-    }
-    const patches = [sanity.setIfMissing({}), sanity.set(schemaType.name, ["_type"]), sanity.set(publicId(nextId), ["_ref"]), sanity.unset(["_weak"]), sanity.unset(["_strengthenOnPublish"])];
-    onChange(patches);
-    onPathFocus([]);
-  }, [onChange, onPathFocus, schemaType.name]);
   const openButtonConfig = require$$0.useMemo(() => ({
     onClick: () => runIndexQuery(queryRef.current)
   }), [runIndexQuery, queryRef]);
@@ -2082,52 +2024,187 @@ function SemanticSearchInput(props) {
     queryRef.current = newQuery;
     setQuery(newQuery);
   }, [setQuery]);
+  const handleChange = require$$0.useCallback(value => {
+    if (value === NO_RESULTS_VALUE) {
+      setOptions(NO_OPTIONS);
+      return;
+    }
+    onChange == null ? void 0 : onChange(value);
+  }, [onChange]);
   return /* @__PURE__ */jsxRuntime.jsx(ui.Autocomplete, {
     id,
-    ref: autocompleteRef,
+    ref,
     "data-testid": "semantic-autocomplete",
     placeholder: "Type to search...",
     openButton: openButtonConfig,
-    onFocus: handleFocus,
+    onFocus,
     onChange: handleChange,
     loading: searching,
-    onBlur: handleBlur,
+    onBlur,
     readOnly,
     filterOption: NO_FILTER,
     onQueryChange: handleQueryChange,
     options,
     renderOption: AutocompleteOption
   });
-}
+});
 function AutocompleteOption(props) {
-  const value = props.result.value;
+  if ("result" in props) {
+    const value = props.result.value;
+    return /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+      mode: "bleed",
+      padding: 1,
+      style: {
+        width: "100%"
+      },
+      children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+        gap: 2,
+        align: "center",
+        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+          flex: 1,
+          children: /* @__PURE__ */jsxRuntime.jsx(DocumentPreview, {
+            documentId: value.documentId,
+            schemaTypeName: value.type
+          })
+        }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+          padding: 2,
+          children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
+            size: 1,
+            muted: true,
+            title: "Relevance",
+            children: [Math.floor(props.result.score * 100), "%"]
+          })
+        })]
+      })
+    });
+  }
   return /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
     mode: "bleed",
     padding: 1,
     style: {
       width: "100%"
     },
-    children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+    disabled: true,
+    children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
       gap: 2,
       align: "center",
-      children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-        flex: 1,
-        children: /* @__PURE__ */jsxRuntime.jsx(DocumentPreview, {
-          documentId: value.documentId,
-          schemaTypeName: value.type
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-        padding: 2,
-        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-          size: 1,
-          muted: true,
-          title: "Relevance",
-          children: [Math.floor(props.result.score * 100), "%"]
-        })
-      })]
+      children: "No results."
     })
   });
 }
+function useDebouncedValue(value, ms) {
+  const [debouncedValue, setDebouncedValue] = require$$0.useState(value);
+  require$$0.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedValue(value);
+    }, ms);
+    return () => clearTimeout(timeoutId);
+  }, [value, ms]);
+  return debouncedValue;
+}
+function useEmeddingsConfig(embeddingsIndexConfig, defaultConfig) {
+  return require$$0.useMemo(() => {
+    if (embeddingsIndexConfig === true || !embeddingsIndexConfig) {
+      if (!(defaultConfig == null ? void 0 : defaultConfig.indexName)) {
+        throw new Error("Default embeddingsIndex config is missing. When options.embeddingsIndex: true, embeddingsIndexReferenceInput plugin config is required.");
+      }
+      return defaultConfig;
+    }
+    const finalConfig = {
+      ...defaultConfig,
+      ...embeddingsIndexConfig
+    };
+    if (!(finalConfig == null ? void 0 : finalConfig.indexName)) {
+      throw new Error("indexName is missing. Either set it in options.embeddingsIndex or configure defaults using plugin config.");
+    }
+    return finalConfig;
+  }, [defaultConfig, embeddingsIndexConfig]);
+}
+function SemanticSearchReferenceInput(props) {
+  var _a, _b;
+  const embeddingsIndexConfig = (_b = (_a = props.schemaType) == null ? void 0 : _a.options) == null ? void 0 : _b.embeddingsIndex;
+  const config = useEmeddingsConfig(embeddingsIndexConfig, props.defaultConfig);
+  const defaultEnabled = config.searchMode === "embeddings";
+  const featureState = useIsFeatureEnabledContext();
+  const [semantic, setSemantic] = require$$0.useState(defaultEnabled);
+  const toggleSemantic = require$$0.useCallback(() => setSemantic(current => !current), []);
+  return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+    gap: 2,
+    flex: 1,
+    style: {
+      width: "100%"
+    },
+    children: [semantic && featureState == "loading" ? /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {})
+    }) : null, semantic && featureState == "disabled" ? /* @__PURE__ */jsxRuntime.jsx(FeatureDisabledNotice, {}) : null, /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      flex: 1,
+      style: {
+        maxHeight: 36,
+        overflow: "hidden"
+      },
+      children: semantic && featureState == "enabled" ? /* @__PURE__ */jsxRuntime.jsx(SemanticSearchInput, {
+        ...props,
+        indexConfig: config
+      }) : props.renderDefault(props)
+    }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+      icon: semantic ? icons.EarthGlobeIcon : icons.LinkIcon,
+      onClick: toggleSemantic,
+      mode: "bleed",
+      title: semantic ? "Switch to standard reference search" : "Switch to semantic reference search"
+    })]
+  });
+}
+function SemanticSearchInput(props) {
+  const {
+    indexConfig,
+    onPathFocus,
+    onChange,
+    readOnly,
+    schemaType,
+    value
+  } = props;
+  const {
+    value: currentDocument
+  } = desk.useDocumentPane();
+  const docRef = require$$0.useRef(currentDocument);
+  const autocompleteRef = require$$0.useRef(null);
+  require$$0.useEffect(() => {
+    docRef.current = currentDocument;
+  }, [currentDocument]);
+  require$$0.useEffect(() => {
+    var _a;
+    if (value == null ? void 0 : value._ref) {
+      (_a = autocompleteRef.current) == null ? void 0 : _a.focus();
+    }
+  }, []);
+  const handleFocus = require$$0.useCallback(() => onPathFocus(["_ref"]), [onPathFocus]);
+  const handleBlur = require$$0.useCallback(() => onPathFocus([]), [onPathFocus]);
+  const handleChange = require$$0.useCallback(nextId => {
+    if (!nextId) {
+      onChange(sanity.unset());
+      onPathFocus([]);
+      return;
+    }
+    const patches = [sanity.setIfMissing({}), sanity.set(schemaType.name, ["_type"]), sanity.set(publicId(nextId), ["_ref"]), sanity.unset(["_weak"]), sanity.unset(["_strengthenOnPublish"])];
+    onChange(patches);
+    onPathFocus([]);
+  }, [onChange, onPathFocus, schemaType.name]);
+  const filterResult = require$$0.useCallback(r => r.value.documentId !== publicId(docRef.current._id), [docRef]);
+  const getEmptySearchValue = require$$0.useCallback(() => JSON.stringify(docRef.current), [docRef]);
+  const typeFilter = require$$0.useMemo(() => schemaType.to.map(refType => refType.name), [schemaType]);
+  return /* @__PURE__ */jsxRuntime.jsx(SemanticSearchAutocomplete, {
+    ref: autocompleteRef,
+    typeFilter,
+    indexConfig,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    getEmptySearchValue,
+    filterResult,
+    readOnly
+  });
+}
 function isType(schemaType, typeName) {
   if (schemaType.name === typeName) {
     return true;
@@ -2137,30 +2214,35 @@ function isType(schemaType, typeName) {
   }
   return isType(schemaType.type, typeName);
 }
-const embeddingsIndexReferenceInput = sanity.definePlugin({
-  name: "@sanity/embeddings-index-reference-input",
-  studio: {
-    components: {
-      layout: props => {
-        return /* @__PURE__ */jsxRuntime.jsx(FeatureEnabledProvider, {
-          children: props.renderDefault(props)
-        });
-      }
-    }
-  },
-  form: {
-    components: {
-      input: props => {
-        var _a, _b;
-        if (sanity.isObjectInputProps(props) && isType(props.schemaType, "reference") && ((_b = (_a = props.schemaType.options) == null ? void 0 : _a.embeddingsIndex) == null ? void 0 : _b.indexName)) {
-          return /* @__PURE__ */jsxRuntime.jsx(SemanticSearchReferenceInput, {
-            ...props
+const embeddingsIndexReferenceInput = sanity.definePlugin(defaultConfig => {
+  const config = typeof defaultConfig === "object" ? defaultConfig : void 0;
+  return {
+    name: "@sanity/embeddings-index-reference-input",
+    studio: {
+      components: {
+        layout: props => {
+          return /* @__PURE__ */jsxRuntime.jsx(FeatureEnabledProvider, {
+            children: props.renderDefault(props)
           });
         }
-        return props.renderDefault(props);
+      }
+    },
+    form: {
+      components: {
+        input: props => {
+          var _a, _b;
+          const embeddingsIndexConfig = (_b = (_a = props.schemaType) == null ? void 0 : _a.options) == null ? void 0 : _b.embeddingsIndex;
+          if (sanity.isObjectInputProps(props) && isType(props.schemaType, "reference") && (embeddingsIndexConfig === true || (embeddingsIndexConfig == null ? void 0 : embeddingsIndexConfig.indexName))) {
+            return /* @__PURE__ */jsxRuntime.jsx(SemanticSearchReferenceInput, {
+              ...props,
+              defaultConfig: config
+            });
+          }
+          return props.renderDefault(props);
+        }
       }
     }
-  }
+  };
 });
 const defaultProjection = "{...}";
 function useDefaultIndex(schema, dataset) {
@@ -2175,6 +2257,7 @@ function IndexFormInput(props) {
   var _a;
   const {
     label,
+    description,
     index,
     prop,
     onChange,
@@ -2188,6 +2271,7 @@ function IndexFormInput(props) {
   })), [onChange, prop]);
   return /* @__PURE__ */jsxRuntime.jsx(FormInput, {
     label,
+    description,
     onChange: handleChange,
     value: (_a = index[prop]) != null ? _a : "",
     readOnly,
@@ -2198,6 +2282,7 @@ function IndexFormInput(props) {
 function FormInput(props) {
   const {
     label,
+    description,
     onChange,
     value,
     readOnly,
@@ -2215,6 +2300,12 @@ function FormInput(props) {
         htmlFor: id,
         children: label
       })
+    }), description && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+        size: 1,
+        muted: true,
+        children: description
+      })
     }), type === "text" ? /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
       id,
       value,
@@ -2369,18 +2460,20 @@ function IndexEditor(props) {
         onChange: setIndex,
         readOnly: true
       }), /* @__PURE__ */jsxRuntime.jsx(IndexFormInput, {
-        label: "Projection",
-        placeholder: defaultIndex.projection,
+        label: "Filter",
+        description: "Must be a valid GROQ filter",
+        placeholder: defaultIndex.filter,
         index,
-        prop: "projection",
+        prop: "filter",
         onChange: setIndex,
         readOnly,
         type: "textarea"
       }), /* @__PURE__ */jsxRuntime.jsx(IndexFormInput, {
-        label: "Filter",
-        placeholder: defaultIndex.filter,
+        label: "Projection",
+        description: "Must be a valid GROQ projection, starting { and ending with }",
+        placeholder: defaultIndex.projection,
         index,
-        prop: "filter",
+        prop: "projection",
         onChange: setIndex,
         readOnly,
         type: "textarea"
@@ -2417,6 +2510,7 @@ function IndexList(props) {
         borderBottom: true,
         flex: 1,
         paddingBottom: 2,
+        padding: 3,
         children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
           children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
             flex: 1,
@@ -2471,12 +2565,15 @@ function IndexRow(props) {
   const onSelect = require$$0.useCallback(() => onIndexSelected(index), [onIndexSelected, index]);
   return /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
     tone: (selectedIndex == null ? void 0 : selectedIndex.indexName) === index.indexName ? "primary" : "default",
-    mode: (selectedIndex == null ? void 0 : selectedIndex.indexName) === index.indexName ? "default" : "bleed",
+    mode: (selectedIndex == null ? void 0 : selectedIndex.indexName) === index.indexName ? "default" : "ghost",
     onClick: onSelect,
+    padding: 3,
     children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
       children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
         flex: 1,
-        children: index.indexName
+        children: /* @__PURE__ */jsxRuntime.jsx("strong", {
+          children: index.indexName
+        })
       }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
         flex: 1,
         children: index.dataset
@@ -2490,102 +2587,18 @@ function IndexRow(props) {
     })
   }, index.indexName);
 }
-const NO_RESULTS = [];
 function QueryIndex(props) {
   const {
     indexName
   } = props;
-  const [query, setQuery] = require$$0.useState("");
-  const [searching, setSearching] = require$$0.useState(false);
-  const [results, setResults] = require$$0.useState(NO_RESULTS);
-  const client = useApiClient();
-  const search = require$$0.useCallback(queryString => {
-    setSearching(true);
-    return queryIndex({
-      query: queryString,
-      indexName,
-      maxResults: 5
-    }, client).then(setResults).finally(() => setSearching(false));
-  }, [client, indexName]);
-  const onInputChange = require$$0.useCallback(e => {
-    setQuery(e.currentTarget.value);
-  }, []);
-  const onKeyDown = require$$0.useCallback(e => {
-    if (e.key === "Enter") {
-      search(query).catch(console.error);
-    }
-  }, [search, query]);
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-    space: 3,
-    flex: 1,
-    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-      flex: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-        flex: 1,
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
-          iconRight: searching ? /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-            style: {
-              marginTop: 5
-            },
-            children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {})
-          }) : icons.SearchIcon,
-          placeholder: "Find documents",
-          value: query,
-          disabled: searching,
-          onChange: onInputChange,
-          onKeyDown
-        })
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-      gap: 4,
-      style: {
-        opacity: searching ? 0.5 : 1
-      },
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-        flex: 1,
-        children: /* @__PURE__ */jsxRuntime.jsx(ResultList, {
-          results,
-          query
-        })
-      })
-    })]
-  });
-}
-function ResultList(props) {
-  const {
-    results,
-    query
-  } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
-    space: 4,
-    height: "fill",
-    children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-      space: 2,
-      children: [results.map(r => /* @__PURE__ */jsxRuntime.jsx(ResultEntry, {
-        result: r
-      }, r.value.documentId)), !results.length && query ? "No results." : null]
-    })
-  });
-}
-function ResultEntry(props) {
-  const value = props.result.value;
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-    gap: 4,
-    align: "center",
-    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      flex: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(DocumentPreview, {
-        documentId: value.documentId,
-        schemaTypeName: value.type,
-        button: true
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-        muted: true,
-        size: 1,
-        children: [Math.floor(props.result.score * 100), " %"]
-      })
-    })]
+  const getEmpty = require$$0.useCallback(() => "anything", []);
+  const indexConfig = require$$0.useMemo(() => ({
+    indexName,
+    maxResults: 8
+  }), [indexName]);
+  return /* @__PURE__ */jsxRuntime.jsx(SemanticSearchAutocomplete, {
+    getEmptySearchValue: getEmpty,
+    indexConfig
   });
 }
 function IndexInfo(_ref3) {