@sanity/embeddings-index-ui 3.0.1 → 4.0.1

package/src/embeddingsIndexDashboard/IndexList.tsx

@@ -1,87 +0,0 @@
-import {Box, Button, Card, Flex, Label, Stack, Text} from '@sanity/ui'
-import {useCallback} from 'react'
-
-import {IndexState} from '../api/embeddingsApi'
-
-export interface IndexListProps {
-  loading: boolean
-  selectedIndex?: IndexState
-  indexes: IndexState[]
-  onIndexSelected: (index: IndexState) => void
-}
-
-export function IndexList(props: IndexListProps) {
-  const {loading, selectedIndex, indexes, onIndexSelected} = props
-  return (
-    <Card tone="default" style={{opacity: loading ? 0.5 : 1}}>
-      <Stack space={2}>
-        <Card borderBottom flex={1} paddingBottom={2} padding={3}>
-          <Flex>
-            <Box flex={1}>
-              <Label muted>Index name</Label>
-            </Box>
-            <Box flex={1}>
-              <Label muted>Dataset</Label>
-            </Box>
-            <Box flex={1}>
-              <Label muted>Status</Label>
-            </Box>
-            <Box flex={1}>
-              <Label muted>Progress</Label>
-            </Box>
-          </Flex>
-        </Card>
-        {indexes.length ? (
-          <Stack space={2} style={{maxHeight: 200, overflow: 'auto'}}>
-            {indexes.map((index) => (
-              <IndexRow
-                selectedIndex={selectedIndex}
-                index={index}
-                onIndexSelected={onIndexSelected}
-                key={index.indexName}
-              />
-            ))}
-          </Stack>
-        ) : (
-          <Text muted>No indexes found.</Text>
-        )}
-      </Stack>
-    </Card>
-  )
-}
-
-function IndexRow(props: {
-  selectedIndex?: IndexState
-  index: IndexState
-  onIndexSelected: (index: IndexState) => void
-}) {
-  const {selectedIndex, index, onIndexSelected} = props
-  const onSelect = useCallback(() => onIndexSelected(index), [onIndexSelected, index])
-  return (
-    <Button
-      tone={selectedIndex?.indexName === index.indexName ? 'primary' : 'default'}
-      mode={selectedIndex?.indexName === index.indexName ? 'default' : 'ghost'}
-      onClick={onSelect}
-      key={index.indexName}
-      padding={3}
-    >
-      <Flex>
-        <Box flex={1}>
-          <strong>{index.indexName}</strong>
-        </Box>
-        <Box flex={1}>{index.dataset}</Box>
-        <Box flex={1}>{index.status}</Box>
-        <Box flex={1}>
-          {index.startDocumentCount
-            ? Math.floor(
-                ((index.startDocumentCount - index.remainingDocumentCount) /
-                  index.startDocumentCount) *
-                  100,
-              )
-            : '?'}
-          %
-        </Box>
-      </Flex>
-    </Button>
-  )
-}

package/src/embeddingsIndexDashboard/QueryIndex.tsx

@@ -1,32 +0,0 @@
-import {useCallback, useMemo} from 'react'
-import {useRouter} from 'sanity/router'
-
-import {QueryResult} from '../api/embeddingsApi'
-import {SemanticSearchAutocomplete} from '../referenceInput/SemanticSearchAutocomplete'
-import {EmbeddingsIndexConfig} from '../schemas/typeDefExtensions'
-
-export function QueryIndex(props: {indexName: string}) {
-  const {indexName} = props
-  const getEmpty = useCallback(() => 'anything', [])
-  const indexConfig: EmbeddingsIndexConfig = useMemo(
-    () => ({indexName, maxResults: 8}),
-    [indexName],
-  )
-
-  const {resolveIntentLink, navigateUrl} = useRouter()
-  const onSelect = useCallback(
-    (hit: QueryResult) => {
-      navigateUrl({
-        path: resolveIntentLink('edit', {id: hit.value.documentId, type: hit.value.type}),
-      })
-    },
-    [resolveIntentLink, navigateUrl],
-  )
-  return (
-    <SemanticSearchAutocomplete
-      getEmptySearchValue={getEmpty}
-      indexConfig={indexConfig}
-      onSelect={onSelect}
-    />
-  )
-}

package/src/embeddingsIndexDashboard/dashboardPlugin.ts

@@ -1,16 +0,0 @@
-import {EarthGlobeIcon} from '@sanity/icons'
-import {definePlugin, Tool} from 'sanity'
-
-import {EmbeddingsIndexTool} from './EmbeddingsIndexTool'
-
-export const embeddingsIndexTool: Tool = {
-  name: 'embeddings-index',
-  title: 'Embeddings',
-  icon: EarthGlobeIcon,
-  component: EmbeddingsIndexTool,
-}
-
-export const embeddingsIndexDashboard = definePlugin({
-  name: '@sanity/embeddings-index-dashboard',
-  tools: [embeddingsIndexTool],
-})

package/src/embeddingsIndexDashboard/hooks.ts

@@ -1,37 +0,0 @@
-import {useMemo} from 'react'
-import {ObjectSchemaType, Schema} from 'sanity'
-
-import {isType} from '../utils/types'
-
-const defaultProjection = '{...}'
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function useDefaultIndex(schema: Schema, dataset: string) {
-  const defaultFilter = useMemo(
-    () =>
-      `_type in [${schema
-        .getTypeNames()
-        .map((n) => schema.get(n))
-        .filter((schemaType): schemaType is ObjectSchemaType =>
-          Boolean(schemaType && isType(schemaType, 'document')),
-        )
-        .filter(
-          (documentType) =>
-            !documentType.name.startsWith('sanity.') &&
-            !documentType.name.startsWith('assist.') &&
-            documentType.name !== 'document',
-        )
-        .map((documentType) => `"${documentType.name}"`)
-        .join(',\n')}]`,
-    [schema],
-  )
-
-  return useMemo(
-    () => ({
-      dataset,
-      projection: defaultProjection,
-      filter: defaultFilter,
-    }),
-    [defaultFilter, dataset],
-  )
-}

package/src/index.ts

@@ -1,10 +0,0 @@
-import './schemas/typeDefExtensions'
-
-import {embeddingsIndexDashboard} from './embeddingsIndexDashboard/dashboardPlugin'
-import {embeddingsIndexReferenceInput} from './referenceInput/referencePlugin'
-
-export {embeddingsIndexReferenceInput}
-
-export {embeddingsIndexDashboard}
-
-export * from './api/embeddingsApi'

package/src/preview/DocumentPreview.tsx

@@ -1,139 +0,0 @@
-import {ErrorOutlineIcon} from '@sanity/icons'
-import {Box, Button, ButtonProps, Card} from '@sanity/ui'
-import {CSSProperties, useMemo} from 'react'
-import {useObservable} from 'react-rx'
-import {
-  DefaultPreview,
-  getPreviewStateObservable,
-  getPreviewValueWithFallback,
-  SanityDefaultPreview,
-  SanityDocument,
-  SchemaType,
-  useDocumentPreviewStore,
-  useSchema,
-} from 'sanity'
-import {useIntentLink} from 'sanity/router'
-
-interface ResultPreviewProps {
-  documentId: string
-  schemaTypeName: string
-  button?: boolean
-  style?: CSSProperties
-}
-
-export function DocumentPreview({
-  documentId,
-  style,
-  schemaTypeName,
-  ...buttonProps
-}: ResultPreviewProps & ButtonProps) {
-  const schema = useSchema()
-  const schemaType = schemaTypeName ? schema.get(schemaTypeName) : undefined
-
-  if (!schemaTypeName) {
-    return (
-      <Card style={{minHeight: '36px'}}>
-        <DefaultPreview
-          withShadow={false}
-          withBorder={false}
-          title={'Loading...'}
-          schemaType={schemaType}
-          isPlaceholder
-        />
-      </Card>
-    )
-  }
-
-  if (!schemaType) {
-    return (
-      <Card>
-        <DefaultPreview
-          withShadow={false}
-          withBorder={false}
-          media={() => <ErrorOutlineIcon />}
-          title={
-            <>
-              Unknown type <code>{schemaTypeName ?? 'N/A'}</code> for {documentId}
-            </>
-          }
-        />
-      </Card>
-    )
-  }
-
-  return (
-    <DocumentPreviewInner
-      documentId={documentId}
-      schemaTypeName={schemaTypeName}
-      schemaType={schemaType}
-      style={style}
-      {...buttonProps}
-    />
-  )
-}
-
-function DocumentPreviewInner({
-  documentId,
-  schemaType,
-  style,
-  button,
-}: ResultPreviewProps & {schemaType: SchemaType} & ButtonProps) {
-  const documentPreviewStore = useDocumentPreviewStore()
-
-  const previewStateObservable = useMemo(
-    () => getPreviewStateObservable(documentPreviewStore, schemaType, documentId),
-    [documentId, documentPreviewStore, schemaType],
-  )
-
-  const {
-    snapshot,
-    original,
-    isLoading: previewIsLoading,
-  } = useObservable(previewStateObservable, {
-    snapshot: null,
-    isLoading: true,
-    original: null,
-  })
-
-  const sanityDocument = useMemo(() => {
-    return {
-      _id: documentId,
-      _type: schemaType?.name,
-    } as SanityDocument
-  }, [documentId, schemaType?.name])
-
-  const {onClick: onIntentClick, href} = useIntentLink({
-    intent: 'edit',
-    params: {
-      id: documentId,
-      type: schemaType?.name,
-    },
-  })
-
-  const preview = (
-    <SanityDefaultPreview
-      {...getPreviewValueWithFallback({
-        snapshot,
-        original,
-        fallback: sanityDocument,
-      })}
-      isPlaceholder={previewIsLoading ?? true}
-      layout="default"
-      icon={schemaType?.icon}
-    />
-  )
-  if (button) {
-    return (
-      <Button
-        as={'a'}
-        href={href}
-        onClick={onIntentClick}
-        mode="ghost"
-        style={{width: '100%', ...style}}
-      >
-        {preview}
-      </Button>
-    )
-  }
-  return <Box style={{width: '100%'}}>{preview}</Box>
-}

package/src/referenceInput/SemanticSearchAutocomplete.tsx

@@ -1,213 +0,0 @@
-/* eslint-disable max-nested-callbacks */
-import {Autocomplete, AutocompleteOpenButtonProps, Box, Button, Flex, Text} from '@sanity/ui'
-import {
-  FocusEventHandler,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {typed} from 'sanity'
-
-import {queryIndex, QueryResult} from '../api/embeddingsApi'
-import {useApiClient} from '../api/embeddingsApiHooks'
-import {DocumentPreview} from '../preview/DocumentPreview'
-import {EmbeddingsIndexConfig} from '../schemas/typeDefExtensions'
-
-export interface SemanticSearchAutocompleteProps {
-  indexConfig: EmbeddingsIndexConfig
-  getEmptySearchValue: () => string
-  typeFilter?: string[]
-  filterResult?: (hit: QueryResult) => boolean
-  onSelect?: (value: QueryResult) => void
-  onFocus?: FocusEventHandler<HTMLInputElement>
-  onBlur?: FocusEventHandler<HTMLInputElement>
-  readOnly?: boolean
-}
-
-interface Option {
-  result: QueryResult
-  value: string
-}
-
-const NO_RESULTS_VALUE = '' as const
-
-interface NoResultOption {
-  value: string
-}
-
-const NO_OPTIONS: NoResultOption[] = []
-const NO_FILTER = () => true
-
-export const SemanticSearchAutocomplete = forwardRef(function SemanticSearchAutocomplete(
-  props: SemanticSearchAutocompleteProps,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ref: any,
-) {
-  const {
-    indexConfig,
-    filterResult,
-    getEmptySearchValue,
-    readOnly,
-    onFocus,
-    onBlur,
-    onSelect,
-    typeFilter,
-  } = props
-  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<Option[] | NoResultOption[]>(NO_OPTIONS)
-
-  const client = useApiClient()
-
-  const runIndexQuery = useCallback(
-    (queryString: string) => {
-      setSearching(true)
-      const indexName = indexConfig?.indexName
-      const maxResults = indexConfig?.maxResults
-
-      if (!indexName) {
-        throw new Error(`Reference option embeddingsIndex.indexName is required, but was missing`)
-      }
-
-      queryIndex(
-        {
-          query: queryString.trim().length ? queryString : (getEmptySearchValue() ?? ''),
-          indexName,
-          maxResults,
-          filter: {
-            type: typeFilter,
-          },
-        },
-        client,
-      )
-        .then((result: QueryResult[]) => {
-          if (queryRef.current === queryString) {
-            setSearching(false)
-            setOptions([])
-            setOptions([])
-            const resultOptions = result
-              .filter((hit) => (filterResult ? filterResult(hit) : true))
-              .map((r) => typed<Option>({result: r, value: r.value.documentId}))
-            if (resultOptions.length) {
-              setOptions(resultOptions)
-            } else {
-              setOptions([{value: NO_RESULTS_VALUE}])
-            }
-          }
-        })
-        .catch((e) => {
-          if (queryRef.current === queryString) {
-            setSearching(false)
-          }
-          throw e
-        })
-    },
-    [client, indexConfig, getEmptySearchValue, filterResult, typeFilter],
-  )
-
-  useEffect(() => {
-    if (prevDebouncedQuery.current !== debouncedQuery) {
-      runIndexQuery(debouncedQuery)
-    }
-    prevDebouncedQuery.current = debouncedQuery
-  }, [debouncedQuery, runIndexQuery])
-
-  const openButtonConfig: AutocompleteOpenButtonProps = useMemo(
-    () => ({onClick: () => runIndexQuery(queryRef.current)}),
-    [runIndexQuery, queryRef],
-  )
-
-  const handleQueryChange = useCallback(
-    (newValue: string | null) => {
-      const newQuery = newValue ?? ''
-      queryRef.current = newQuery
-      setQuery(newQuery)
-    },
-    [setQuery],
-  )
-
-  const handleChange = useCallback(
-    (value: string) => {
-      if (value === NO_RESULTS_VALUE) {
-        setOptions(NO_OPTIONS)
-        return
-      }
-      const option = (options as Option[])
-        .filter((r): r is Option => 'result' in r)
-        .find((r) => r.result.value.documentId === value)
-      if (option && onSelect) {
-        onSelect(option.result)
-      }
-    },
-    [onSelect, options],
-  )
-
-  return (
-    <Autocomplete
-      id={id}
-      ref={ref}
-      data-testid="semantic-autocomplete"
-      placeholder="Type to search..."
-      openButton={openButtonConfig}
-      onFocus={onFocus}
-      onChange={handleChange}
-      loading={searching}
-      onBlur={onBlur}
-      readOnly={readOnly}
-      filterOption={NO_FILTER}
-      onQueryChange={handleQueryChange}
-      options={options}
-      renderOption={AutocompleteOption}
-    />
-  )
-})
-
-function AutocompleteOption(props: Option | NoResultOption) {
-  if ('result' in props) {
-    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>
-    )
-  }
-
-  return (
-    <Button mode="bleed" padding={1} style={{width: '100%'}} disabled>
-      <Flex gap={2} align="center">
-        No results.
-      </Flex>
-    </Button>
-  )
-}
-
-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
-}

package/src/referenceInput/SemanticSearchReferenceInput.tsx

@@ -1,169 +0,0 @@
-import {EarthGlobeIcon, LinkIcon} from '@sanity/icons'
-import {Box, Button, Flex, Spinner} from '@sanity/ui'
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {
-  ObjectInputProps,
-  ReferenceBaseOptions,
-  ReferenceSchemaType,
-  set,
-  setIfMissing,
-  unset,
-} from 'sanity'
-import {useDocumentPane} from 'sanity/desk'
-
-import {QueryResult} from '../api/embeddingsApi'
-import {FeatureDisabledNotice, FeatureError, useIsFeatureEnabledContext} from '../api/isEnabled'
-import {EmbeddingsIndexConfig} from '../schemas/typeDefExtensions'
-import {publicId} from '../utils/id'
-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,
-    }
-
-    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])
-}
-
-export function SemanticSearchReferenceInput(
-  props: ObjectInputProps & {defaultConfig?: EmbeddingsIndexConfig},
-) {
-  const embeddingsIndexConfig = (props.schemaType as ReferenceSchemaType)?.options?.embeddingsIndex
-
-  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 urlSuffix="?ref=embeddings-ref" />
-      ) : null}
-
-      {semantic && featureState === 'error' ? (
-        <Box padding={4}>
-          <FeatureError />
-        </Box>
-      ) : null}
-
-      <Box flex={1} style={{maxHeight: 36, overflow: 'hidden'}}>
-        {semantic && featureState == 'enabled' ? (
-          <SemanticSearchInput {...props} indexConfig={config} />
-        ) : (
-          props.renderDefault(props)
-        )}
-      </Box>
-      <Button
-        icon={semantic ? EarthGlobeIcon : LinkIcon}
-        onClick={toggleSemantic}
-        mode="bleed"
-        title={
-          semantic ? 'Switch to standard reference search' : 'Switch to semantic reference search'
-        }
-      />
-    </Flex>
-  )
-}
-
-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)
-
-  useEffect(() => {
-    docRef.current = currentDocument
-  }, [currentDocument])
-
-  useEffect(() => {
-    // if this component is rendered, and there is a value, replace was selected
-    if (value?._ref) {
-      autocompleteRef.current?.focus()
-    }
-    // intentional empty deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  const handleFocus = useCallback(() => onPathFocus(['_ref']), [onPathFocus])
-  const handleBlur = useCallback(() => onPathFocus([]), [onPathFocus])
-
-  const handleChange = useCallback(
-    (result: QueryResult) => {
-      if (!result) {
-        onChange(unset())
-        onPathFocus([])
-        return
-      }
-      const patches = [
-        setIfMissing({}),
-        set(schemaType.name, ['_type']),
-        set(publicId(result.value.documentId), ['_ref']),
-        unset(['_weak']),
-        unset(['_strengthenOnPublish']),
-      ]
-
-      onChange(patches)
-      // Move focus away from _ref and one level up
-      onPathFocus([])
-    },
-    [onChange, onPathFocus, schemaType.name],
-  )
-
-  const filterResult = useCallback(
-    (r: QueryResult) => r.value.documentId !== publicId(docRef.current._id),
-    [docRef],
-  )
-
-  const getEmptySearchValue = useCallback(() => JSON.stringify(docRef.current), [docRef])
-  const typeFilter = useMemo(
-    () => (schemaType as ReferenceSchemaType).to.map((refType) => refType.name),
-    [schemaType],
-  )
-
-  return (
-    <SemanticSearchAutocomplete
-      ref={autocompleteRef}
-      typeFilter={typeFilter}
-      indexConfig={indexConfig}
-      onSelect={handleChange}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      getEmptySearchValue={getEmptySearchValue}
-      filterResult={filterResult}
-      readOnly={readOnly}
-    />
-  )
-}