@sanity/embeddings-index-ui 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/embeddings-index-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Various Sanity Studio plugins for integrating with the embeddings index API",
   "keywords": [
     "sanity",

package/src/api/embeddingsApiHooks.ts

@@ -1,12 +1,17 @@
 import {SanityClient, useClient} from 'sanity'
 import {useMemo} from 'react'
 
-export function useApiClient(
-  customApiClient?: (defaultClient: SanityClient) => SanityClient,
-): SanityClient {
+export function useApiClient(): SanityClient {
   const client = useClient({apiVersion: 'vX'})
-  return useMemo(
-    () => (customApiClient ? customApiClient(client) : client),
-    [client, customApiClient],
-  )
+  return useMemo(() => {
+    const customHost = localStorage.getItem('embeddings-index-host')
+    if (customHost) {
+      return client.withConfig({
+        apiHost: customHost,
+        useProjectHostname: false,
+        withCredentials: false,
+      })
+    }
+    return client
+  }, [client])
 }

package/src/api/isEnabled.tsx

@@ -0,0 +1,53 @@
+import {useClient} from 'sanity'
+import {createContext, PropsWithChildren, useContext, useEffect, useState} from 'react'
+import {Card, Text} from '@sanity/ui'
+
+const featureName = 'embeddingsIndexApi'
+
+export type FeatureStatus = 'enabled' | 'disabled' | 'loading'
+export const FeatureEnabledContext = createContext<FeatureStatus>('loading')
+
+export function useIsFeatureEnabled() {
+  const client = useClient({apiVersion: '2023-09-01'})
+  const [status, setStatus] = useState<FeatureStatus>('loading')
+
+  useEffect(() => {
+    client
+      .request<string | boolean>({
+        method: 'GET',
+        url: `/projects/${client.config().projectId}/features/${featureName}`,
+      })
+      .then((isEnabled) => {
+        setStatus(isEnabled === 'true' || isEnabled === true ? 'enabled' : 'disabled')
+      })
+      .catch((err) => {
+        console.error(err)
+        setStatus('disabled')
+      })
+  }, [client])
+
+  return status
+}
+
+export function FeatureEnabledProvider(props: PropsWithChildren<{}>) {
+  const status = useIsFeatureEnabled()
+  return (
+    <FeatureEnabledContext.Provider value={status}>{props.children}</FeatureEnabledContext.Provider>
+  )
+}
+
+export function useIsFeatureEnabledContext(): FeatureStatus {
+  return useContext(FeatureEnabledContext)
+}
+
+export function FeatureDisabledNotice() {
+  return (
+    <Card tone="primary" border padding={2}>
+      <Text size={1}>
+        Embeddings index APIs are only available on the{' '}
+        <a href="https://sanity.io/pricing">Team tier and above</a>. Please upgrade to enable
+        access.
+      </Text>
+    </Card>
+  )
+}

package/src/embeddingsIndexDashboard/EmbeddingsIndexTool.tsx

@@ -1,23 +1,28 @@
 import {Box, Button, Card, Flex, Heading, Spinner, Stack} from '@sanity/ui'
-import {useClient} from 'sanity'
-import {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {AddIcon, UndoIcon} from '@sanity/icons'
 import {deleteIndex, getIndexes, IndexState, NamedIndex} from '../api/embeddingsApi'
 import {EditIndexDialog} from './IndexEditor'
 import {IndexList} from './IndexList'
 import {IndexInfo} from './IndexInfo'
-
-function useApiClient() {
-  const client = useClient({apiVersion: 'vX'})
-  return useMemo(() => client, [client])
-}
+import {useApiClient} from '../api/embeddingsApiHooks'
+import {FeatureDisabledNotice, useIsFeatureEnabled} from '../api/isEnabled'
 
 export function EmbeddingsIndexTool() {
+  const featureState = useIsFeatureEnabled()
   return (
     <Card>
       <Flex justify="center" flex={1}>
         <Card flex={1} style={{maxWidth: 1200}} padding={5}>
-          <Indexes />
+          {featureState == 'loading' ? (
+            <Box padding={2}>
+              <Spinner />
+            </Box>
+          ) : null}
+
+          {featureState == 'disabled' ? <FeatureDisabledNotice /> : null}
+
+          {featureState == 'enabled' ? <Indexes /> : null}
         </Card>
       </Flex>
     </Card>

package/src/referenceInput/SemanticSearchReferenceInput.tsx

@@ -1,19 +1,21 @@
+import {ObjectInputProps, ReferenceSchemaType, set, setIfMissing, typed, unset} from 'sanity'
 import {
-  ObjectInputProps,
-  ReferenceSchemaType,
-  set,
-  setIfMissing,
-  typed,
-  unset,
-  useClient,
-} from 'sanity'
-import {Autocomplete, Box, Button, Flex, Text, AutocompleteOpenButtonProps} from '@sanity/ui'
+  Autocomplete,
+  Box,
+  Button,
+  Flex,
+  Text,
+  AutocompleteOpenButtonProps,
+  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 {useDocumentPane} from 'sanity/desk'
 import {queryIndex, QueryResult} from '../api/embeddingsApi'
 import {publicId} from '../utils/id'
+import {useApiClient} from '../api/embeddingsApiHooks'
+import {FeatureDisabledNotice, useIsFeatureEnabledContext} from '../api/isEnabled'
 
 interface Option {
   result: QueryResult
@@ -27,13 +29,27 @@ export function SemanticSearchReferenceInput(props: ObjectInputProps) {
   const defaultEnabled =
     (props.schemaType as ReferenceSchemaType)?.options?.embeddingsIndex?.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} />
+        ) : (
+          props.renderDefault(props)
+        )}
       </Box>
       <Button
         icon={semantic ? EarthGlobeIcon : LinkIcon}
@@ -60,11 +76,6 @@ function useDebouncedValue<T>(value: T, ms: number) {
   return debouncedValue
 }
 
-function useApiClient() {
-  const client = useClient({apiVersion: 'vX'})
-  return useMemo(() => client, [client])
-}
-
 function SemanticSearchInput(props: ObjectInputProps) {
   const {onPathFocus, onChange, readOnly, schemaType, value} = props
 

package/src/referenceInput/referencePlugin.tsx

@@ -1,9 +1,17 @@
 import {definePlugin, isObjectInputProps, ObjectInputProps, ReferenceSchemaType} from 'sanity'
 import {SemanticSearchReferenceInput} from './SemanticSearchReferenceInput'
 import {isType} from '../utils/types'
+import {FeatureEnabledProvider} from '../api/isEnabled'
 
 export const embeddingsIndexReferenceInput = definePlugin({
   name: '@sanity/embeddings-index-reference-input',
+  studio: {
+    components: {
+      layout: (props) => {
+        return <FeatureEnabledProvider>{props.renderDefault(props)}</FeatureEnabledProvider>
+      },
+    },
+  },
   form: {
     components: {
       input: (props) => {