@sanity/embeddings-index-ui 1.0.2 → 1.0.3

package/package.json

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

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

@@ -6,13 +6,23 @@ import {EditIndexDialog} from './IndexEditor'
 import {IndexList} from './IndexList'
 import {IndexInfo} from './IndexInfo'
 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,5 +1,13 @@
 import {ObjectInputProps, ReferenceSchemaType, set, setIfMissing, typed, unset} from 'sanity'
-import {Autocomplete, Box, Button, Flex, Text, AutocompleteOpenButtonProps} from '@sanity/ui'
+import {
+  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'
@@ -7,6 +15,7 @@ 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
@@ -20,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}

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) => {