@sanity/embeddings-index-ui 1.0.2 → 1.1.0

package/src/referenceInput/SemanticSearchReferenceInput.tsx

@@ -1,32 +1,80 @@
-import {ObjectInputProps, ReferenceSchemaType, set, setIfMissing, typed, unset} from 'sanity'
-import {Autocomplete, Box, Button, Flex, Text, AutocompleteOpenButtonProps} from '@sanity/ui'
+import {
+  ObjectInputProps,
+  ReferenceBaseOptions,
+  ReferenceSchemaType,
+  set,
+  setIfMissing,
+  unset,
+} from 'sanity'
+import {Box, Button, Flex, Spinner} from '@sanity/ui'
 import {EarthGlobeIcon, LinkIcon} from '@sanity/icons'
-import {useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
-import {DocumentPreview} from '../preview/DocumentPreview'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {useDocumentPane} from 'sanity/desk'
-import {queryIndex, QueryResult} from '../api/embeddingsApi'
+import {QueryResult} from '../api/embeddingsApi'
 import {publicId} from '../utils/id'
-import {useApiClient} from '../api/embeddingsApiHooks'
+import {FeatureDisabledNotice, useIsFeatureEnabledContext} from '../api/isEnabled'
+import {EmbeddingsIndexConfig} from '../schemas/typeDefExtensions'
+import {SemanticSearchAutocomplete} from './SemanticSearchAutocomplete'
+
+function useEmeddingsConfig(
+  embeddingsIndexConfig: ReferenceBaseOptions['embeddingsIndex'],
+  defaultConfig: EmbeddingsIndexConfig | undefined,
+) {
+  return useMemo(() => {
+    if (embeddingsIndexConfig === true || !embeddingsIndexConfig) {
+      if (!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,
+    }
 
-interface Option {
-  result: QueryResult
-  value: string
+    if (!finalConfig?.indexName) {
+      throw new Error(
+        'indexName is missing. Either set it in options.embeddingsIndex or configure defaults using plugin config.',
+      )
+    }
+
+    return finalConfig
+  }, [defaultConfig, embeddingsIndexConfig])
 }
 
-const NO_OPTIONS: Option[] = []
-const NO_FILTER = () => true
+export function SemanticSearchReferenceInput(
+  props: ObjectInputProps & {defaultConfig?: EmbeddingsIndexConfig},
+) {
+  const embeddingsIndexConfig = (props.schemaType as ReferenceSchemaType)?.options?.embeddingsIndex
 
-export function SemanticSearchReferenceInput(props: ObjectInputProps) {
-  const defaultEnabled =
-    (props.schemaType as ReferenceSchemaType)?.options?.embeddingsIndex?.searchMode === 'embeddings'
+  const config = useEmeddingsConfig(embeddingsIndexConfig, props.defaultConfig)
+
+  const defaultEnabled = config.searchMode === 'embeddings'
+
+  const featureState = useIsFeatureEnabledContext()
 
   const [semantic, setSemantic] = useState<boolean>(defaultEnabled)
   const toggleSemantic = useCallback(() => setSemantic((current) => !current), [])
 
   return (
     <Flex gap={2} flex={1} style={{width: '100%'}}>
+      {semantic && featureState == 'loading' ? (
+        <Box padding={2}>
+          <Spinner />
+        </Box>
+      ) : null}
+
+      {semantic && featureState == 'disabled' ? <FeatureDisabledNotice /> : null}
+
       <Box flex={1} style={{maxHeight: 36, overflow: 'hidden'}}>
-        {semantic ? <SemanticSearchInput {...props} /> : props.renderDefault(props)}
+        {semantic && featureState == 'enabled' ? (
+          <SemanticSearchInput {...props} indexConfig={config} />
+        ) : (
+          props.renderDefault(props)
+        )}
       </Box>
       <Button
         icon={semantic ? EarthGlobeIcon : LinkIcon}
@@ -40,38 +88,13 @@ export function SemanticSearchReferenceInput(props: ObjectInputProps) {
   )
 }
 
-function useDebouncedValue<T>(value: T, ms: number) {
-  const [debouncedValue, setDebouncedValue] = useState(value)
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setDebouncedValue(value)
-    }, ms)
-    return () => clearTimeout(timeoutId)
-  }, [value, ms])
-
-  return debouncedValue
-}
-
-function SemanticSearchInput(props: ObjectInputProps) {
-  const {onPathFocus, onChange, readOnly, schemaType, value} = props
+function SemanticSearchInput(props: ObjectInputProps & {indexConfig: EmbeddingsIndexConfig}) {
+  const {indexConfig, onPathFocus, onChange, readOnly, schemaType, value} = props
 
   const {value: currentDocument} = useDocumentPane()
   const docRef = useRef(currentDocument)
   const autocompleteRef = useRef<HTMLInputElement>(null)
 
-  const id = useId()
-
-  const [query, setQuery] = useState('')
-  const queryRef = useRef(query)
-  const debouncedQuery = useDebouncedValue(query, 300)
-  const prevDebouncedQuery = useRef(debouncedQuery)
-
-  const [searching, setSearching] = useState(false)
-  const [options, setOptions] = useState(NO_OPTIONS)
-
-  const client = useApiClient()
-
   useEffect(() => {
     docRef.current = currentDocument
   }, [currentDocument])
@@ -88,58 +111,6 @@ function SemanticSearchInput(props: ObjectInputProps) {
   const handleFocus = useCallback(() => onPathFocus(['_ref']), [onPathFocus])
   const handleBlur = useCallback(() => onPathFocus([]), [onPathFocus])
 
-  const runIndexQuery = useCallback(
-    (queryString: string) => {
-      setSearching(true)
-      const refSchema = schemaType as ReferenceSchemaType
-      const indexName = refSchema.options?.embeddingsIndex?.indexName
-      const maxResults = refSchema.options?.embeddingsIndex?.maxResults
-      const typeFilter = refSchema.to.map((ref) => ref.name)
-
-      if (!indexName) {
-        throw new Error(
-          `Reference option embeddingsIndex.indexName is required, but was missing in type ${refSchema.name}`,
-        )
-      }
-
-      queryIndex(
-        {
-          query: queryString.trim().length ? queryString : JSON.stringify(docRef.current) ?? '',
-          indexName,
-          maxResults,
-          filter: {
-            type: typeFilter,
-          },
-        },
-        client,
-      )
-        .then((result: QueryResult[]) => {
-          if (queryRef.current === queryString) {
-            setSearching(false)
-            setOptions(
-              result
-                .filter((r) => r.value.documentId !== publicId(docRef.current._id))
-                .map((r) => typed<Option>({result: r, value: r.value.documentId})),
-            )
-          }
-        })
-        .catch((e) => {
-          if (queryRef.current === queryString) {
-            setSearching(false)
-          }
-          throw e
-        })
-    },
-    [client, schemaType],
-  )
-
-  useEffect(() => {
-    if (prevDebouncedQuery.current !== debouncedQuery) {
-      runIndexQuery(debouncedQuery)
-    }
-    prevDebouncedQuery.current = debouncedQuery
-  }, [debouncedQuery, runIndexQuery])
-
   const handleChange = useCallback(
     (nextId: string) => {
       if (!nextId) {
@@ -163,54 +134,28 @@ function SemanticSearchInput(props: ObjectInputProps) {
     [onChange, onPathFocus, schemaType.name],
   )
 
-  const openButtonConfig: AutocompleteOpenButtonProps = useMemo(
-    () => ({onClick: () => runIndexQuery(queryRef.current)}),
-    [runIndexQuery, queryRef],
+  const filterResult = useCallback(
+    (r: QueryResult) => r.value.documentId !== publicId(docRef.current._id),
+    [docRef],
   )
 
-  const handleQueryChange = useCallback(
-    (newValue: string | null) => {
-      const newQuery = newValue ?? ''
-      queryRef.current = newQuery
-      setQuery(newQuery)
-    },
-    [setQuery],
+  const getEmptySearchValue = useCallback(() => JSON.stringify(docRef.current), [docRef])
+  const typeFilter = useMemo(
+    () => (schemaType as ReferenceSchemaType).to.map((refType) => refType.name),
+    [schemaType],
   )
 
   return (
-    <Autocomplete
-      id={id}
+    <SemanticSearchAutocomplete
       ref={autocompleteRef}
-      data-testid="semantic-autocomplete"
-      placeholder="Type to search..."
-      openButton={openButtonConfig}
-      onFocus={handleFocus}
+      typeFilter={typeFilter}
+      indexConfig={indexConfig}
       onChange={handleChange}
-      loading={searching}
+      onFocus={handleFocus}
       onBlur={handleBlur}
+      getEmptySearchValue={getEmptySearchValue}
+      filterResult={filterResult}
       readOnly={readOnly}
-      filterOption={NO_FILTER}
-      onQueryChange={handleQueryChange}
-      options={options}
-      renderOption={AutocompleteOption}
     />
   )
 }
-
-function AutocompleteOption(props: Option) {
-  const value = props.result.value
-  return (
-    <Button mode="bleed" padding={1} style={{width: '100%'}}>
-      <Flex gap={2} align="center">
-        <Box flex={1}>
-          <DocumentPreview documentId={value.documentId} schemaTypeName={value.type} />
-        </Box>
-        <Box padding={2}>
-          <Text size={1} muted title={'Relevance'}>
-            {Math.floor(props.result.score * 100)}%
-          </Text>
-        </Box>
-      </Flex>
-    </Button>
-  )
-}

package/src/referenceInput/referencePlugin.tsx

@@ -1,21 +1,43 @@
 import {definePlugin, isObjectInputProps, ObjectInputProps, ReferenceSchemaType} from 'sanity'
 import {SemanticSearchReferenceInput} from './SemanticSearchReferenceInput'
 import {isType} from '../utils/types'
+import {FeatureEnabledProvider} from '../api/isEnabled'
+import {EmbeddingsIndexConfig} from '../schemas/typeDefExtensions'
 
-export const embeddingsIndexReferenceInput = definePlugin({
-  name: '@sanity/embeddings-index-reference-input',
-  form: {
-    components: {
-      input: (props) => {
-        if (
-          isObjectInputProps(props) &&
-          isType(props.schemaType, 'reference') &&
-          (props.schemaType as ReferenceSchemaType).options?.embeddingsIndex?.indexName
-        ) {
-          return <SemanticSearchReferenceInput {...(props as ObjectInputProps)} />
-        }
-        return props.renderDefault(props)
+export const embeddingsIndexReferenceInput = definePlugin<EmbeddingsIndexConfig | void>(
+  (defaultConfig) => {
+    const config = typeof defaultConfig === 'object' ? defaultConfig : undefined
+
+    return {
+      name: '@sanity/embeddings-index-reference-input',
+      studio: {
+        components: {
+          layout: (props) => {
+            return <FeatureEnabledProvider>{props.renderDefault(props)}</FeatureEnabledProvider>
+          },
+        },
+      },
+      form: {
+        components: {
+          input: (props) => {
+            const embeddingsIndexConfig = (props.schemaType as ReferenceSchemaType)?.options
+              ?.embeddingsIndex
+            if (
+              isObjectInputProps(props) &&
+              isType(props.schemaType, 'reference') &&
+              (embeddingsIndexConfig === true || embeddingsIndexConfig?.indexName)
+            ) {
+              return (
+                <SemanticSearchReferenceInput
+                  {...(props as ObjectInputProps)}
+                  defaultConfig={config}
+                />
+              )
+            }
+            return props.renderDefault(props)
+          },
+        },
       },
-    },
+    }
   },
-})
+)

package/src/schemas/typeDefExtensions.ts

@@ -1,19 +1,27 @@
 import 'sanity'
+
+export interface EmbeddingsIndexConfig {
+  /**
+   * Name of the index
+   */
+  indexName: string
+  maxResults?: number
+  /**
+   * Determines if which search mode is enabled by default for the reference field.
+   * Default is the studio default search, while 'embeddings' enables
+   * Defaults to 'default' behaviour
+   */
+  searchMode?: 'embeddings' | 'default'
+}
+
 /* eslint-disable no-unused-vars */
 declare module 'sanity' {
   interface ReferenceBaseOptions {
-    embeddingsIndex?: {
-      /**
-       * Name of the index
-       */
-      indexName: string
-      maxResults?: number
-      /**
-       * Determines if which search mode is enabled by default for the reference field.
-       * Default is the studio default search, while 'embeddings' enables
-       * Defaults to 'default' behaviour
-       */
-      searchMode?: 'embeddings' | 'default'
-    }
+    /**
+     * Enables toggleable semantic search for a reference field.
+     *
+     * When `true`: will use default plugin configuration (if no config has been for the plugin provided ,this will throw an error)
+     */
+    embeddingsIndex?: true | EmbeddingsIndexConfig
   }
 }