@sanity/embeddings-index-ui 3.0.0 → 4.0.0

package/src/api/embeddingsApiHooks.ts

@@ -1,17 +0,0 @@
-import {useMemo} from 'react'
-import {SanityClient, useClient} from 'sanity'
-
-export function useApiClient(): SanityClient {
-  const client = useClient({apiVersion: 'vX'})
-  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

@@ -1,65 +0,0 @@
-import {Card, Text} from '@sanity/ui'
-import {createContext, PropsWithChildren, useContext, useEffect, useState} from 'react'
-import {useProjectId} from 'sanity'
-
-import {useApiClient} from './embeddingsApiHooks'
-
-export type FeatureStatus = 'enabled' | 'disabled' | 'loading' | 'error'
-export const FeatureEnabledContext = createContext<FeatureStatus>('loading')
-
-export function useIsFeatureEnabled() {
-  const client = useApiClient()
-  const [status, setStatus] = useState<FeatureStatus>('loading')
-
-  useEffect(() => {
-    client
-      .request<{enabled: boolean}>({
-        method: 'GET',
-        url: `/embeddings-index/status`,
-      })
-      .then((response) => {
-        setStatus(response.enabled ? 'enabled' : 'disabled')
-      })
-      .catch((err) => {
-        console.error(err)
-        setStatus('error')
-      })
-  }, [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(props: {urlSuffix?: string}) {
-  const projectId = useProjectId()
-
-  return (
-    <Card tone="primary" border padding={4}>
-      <Text size={1}>
-        💎 Unlock semantic search with the Embeddings Index API — available on Team, Business, and
-        Enterprise plans.{' '}
-        <a href={`https://www.sanity.io/manage/project/${projectId}/plan${props.urlSuffix ?? ''}`}>
-          Upgrade now →
-        </a>
-      </Text>
-    </Card>
-  )
-}
-
-export function FeatureError() {
-  return (
-    <Card padding={4} border tone="critical">
-      An error occurred. See console for details.
-    </Card>
-  )
-}

package/src/embeddingsIndexDashboard/EmbeddingsIndexTool.tsx

@@ -1,168 +0,0 @@
-import {AddIcon, UndoIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Heading, Spinner, Stack} from '@sanity/ui'
-import {useCallback, useEffect, useState} from 'react'
-
-import {deleteIndex, getIndexes, IndexState, NamedIndex} from '../api/embeddingsApi'
-import {useApiClient} from '../api/embeddingsApiHooks'
-import {FeatureDisabledNotice, FeatureError, useIsFeatureEnabled} from '../api/isEnabled'
-import {EditIndexDialog} from './IndexEditor'
-import {IndexInfo} from './IndexInfo'
-import {IndexList} from './IndexList'
-
-export function EmbeddingsIndexTool() {
-  const featureState = useIsFeatureEnabled()
-  return (
-    <Card flex={1}>
-      <Flex justify="center" flex={1}>
-        {featureState === 'error' ? (
-          <Box padding={4}>
-            <FeatureError />
-          </Box>
-        ) : null}
-
-        {featureState === 'disabled' ? (
-          <Box padding={4}>
-            <FeatureDisabledNotice urlSuffix="?ref=embeddings-tab" />
-          </Box>
-        ) : null}
-
-        {featureState === 'loading' ? (
-          <Box padding={6}>
-            <Spinner size={4} />
-          </Box>
-        ) : null}
-
-        {featureState === 'enabled' ? (
-          <Card flex={1} style={{maxWidth: 1200}} padding={5}>
-            <Indexes />
-          </Card>
-        ) : null}
-      </Flex>
-    </Card>
-  )
-}
-
-const NO_INDEXES: IndexState[] = []
-
-function Indexes() {
-  const client = useApiClient()
-  const [indexes, setIndexes] = useState<IndexState[]>(NO_INDEXES)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(false)
-  const [createIndexOpen, setCreateIndexOpen] = useState(false)
-  const [selectedIndex, setSelectedIndex] = useState<IndexState | undefined>(undefined)
-
-  const onCreateIndexClose = useCallback(() => setCreateIndexOpen(false), [])
-
-  useEffect(() => {
-    setSelectedIndex(indexes.find((i) => i.indexName === selectedIndex?.indexName))
-  }, [indexes, selectedIndex])
-
-  const updateIndexes = useCallback(() => {
-    setLoading(true)
-    setError(false)
-    getIndexes(client)
-      .then((response: IndexState[]) => {
-        setLoading(false)
-        setIndexes(response)
-      })
-      .catch((e) => {
-        // eslint-disable-next-line no-unused-expressions
-        console.error(e)
-        setError(true)
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [client])
-
-  const deleteNamedIndex = useCallback(
-    (index: NamedIndex) => {
-      if (
-        // eslint-disable-next-line no-alert
-        !confirm(`Are you sure you want to delete ${index.indexName} for dataset ${index.dataset}?`)
-      ) {
-        return
-      }
-      setLoading(true)
-      setError(false)
-      deleteIndex(index.indexName, client)
-        .then(() => {
-          setTimeout(() => updateIndexes())
-        })
-        .catch((e) => {
-          // eslint-disable-next-line no-unused-expressions
-          console.error(e)
-          setError(true)
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    },
-    [client, updateIndexes],
-  )
-
-  const onSelectIndex = useCallback(
-    (index: IndexState) => {
-      setSelectedIndex(index)
-      updateIndexes()
-    },
-    [setSelectedIndex, updateIndexes],
-  )
-
-  useEffect(() => {
-    updateIndexes()
-  }, [updateIndexes])
-
-  const openCreate = useCallback(() => setCreateIndexOpen(true), [])
-  const onSubmit = useCallback(
-    (index: IndexState) => {
-      setIndexes((current) => [...current, index])
-      setSelectedIndex(index)
-      updateIndexes()
-    },
-    [updateIndexes],
-  )
-  return (
-    <Stack space={4}>
-      <Flex gap={2} align="center" style={{height: 30}}>
-        <Box flex={1}>
-          <Heading size={1}>Embeddings indexes</Heading>
-        </Box>
-        <Box style={{justifySelf: 'flex-end'}}>
-          <Button
-            icon={AddIcon}
-            text={'New index'}
-            tone="default"
-            mode="ghost"
-            onClick={openCreate}
-          />
-        </Box>
-        <Button
-          size={1}
-          icon={loading ? <Spinner /> : UndoIcon}
-          title={'Refresh index list'}
-          tone="default"
-          mode="bleed"
-          onClick={updateIndexes}
-          disabled={loading}
-        />
-      </Flex>
-      {error ? (
-        <Card tone="critical" padding={2} border>
-          An error occurred. See console for details.
-        </Card>
-      ) : null}
-      <IndexList
-        loading={loading}
-        indexes={indexes}
-        selectedIndex={selectedIndex}
-        onIndexSelected={onSelectIndex}
-      />
-      {selectedIndex && (
-        <IndexInfo selectedIndex={selectedIndex} onDeleteIndex={deleteNamedIndex} />
-      )}
-      <EditIndexDialog open={createIndexOpen} onClose={onCreateIndexClose} onSubmit={onSubmit} />
-    </Stack>
-  )
-}

package/src/embeddingsIndexDashboard/IndexEditor.tsx

@@ -1,185 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Box, Button, Card, Dialog, Spinner, Stack, Text} from '@sanity/ui'
-import {FormEvent, useCallback, useEffect, useId, useRef, useState} from 'react'
-import {useSchema} from 'sanity'
-
-import {IndexState, NamedIndex} from '../api/embeddingsApi'
-import {useApiClient} from '../api/embeddingsApiHooks'
-import {useDefaultIndex} from './hooks'
-import {IndexFormInput} from './IndexFormInput'
-
-export function EditIndexDialog(props: {
-  open: boolean
-  onClose: () => void
-  onSubmit: (index: IndexState) => void
-}) {
-  const {open, onClose, onSubmit} = props
-  const id = useId()
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) {
-      return
-    }
-    setTimeout(() => ref.current?.querySelector('input')?.focus())
-  }, [ref, open])
-
-  const handleSubmit = useCallback(
-    (index: IndexState) => {
-      onSubmit(index)
-      onClose()
-    },
-    [onSubmit, onClose],
-  )
-
-  return open ? (
-    <Dialog id={id} width={1} ref={ref} onClose={onClose} header="Create embeddings index">
-      <Stack padding={4} space={5}>
-        <IndexEditor readOnly={false} onSubmit={handleSubmit} />
-      </Stack>
-    </Dialog>
-  ) : null
-}
-
-export function IndexEditor(props: {
-  index?: Partial<NamedIndex>
-  readOnly: boolean
-  onSubmit?: (index: IndexState) => void
-}) {
-  const {readOnly, index: selectedIndex, onSubmit} = props
-  const client = useApiClient()
-  const schema = useSchema()
-  const defaultIndex = useDefaultIndex(schema, client.config().dataset ?? '')
-  const [errors, setErrors] = useState<string[] | undefined>()
-  const [loading, setLoading] = useState<boolean>()
-  const [index, setIndex] = useState<Partial<NamedIndex>>(() => ({
-    ...defaultIndex,
-    ...selectedIndex,
-  }))
-
-  useEffect(() => setIndex(selectedIndex ?? {...defaultIndex}), [selectedIndex, defaultIndex])
-
-  const handleSubmit = useCallback(
-    (e: FormEvent) => {
-      e.preventDefault()
-      if (readOnly) {
-        return
-      }
-
-      const validationErrors: string[] = []
-
-      if (!index.indexName) {
-        validationErrors.push('Index name is required')
-      } else if (!index.indexName.match(/^[a-zA-Z0-9-_]+$/g)) {
-        validationErrors.push('Index name can only contain the letters a-z, numbers - and _')
-      }
-
-      if (!index.dataset) {
-        validationErrors.push('Dataset is required')
-      }
-
-      if (!index.filter) {
-        validationErrors.push('Filter is required')
-      }
-
-      if (!index.projection) {
-        validationErrors.push('Projection is required')
-      }
-
-      if (validationErrors.length) {
-        setErrors(validationErrors)
-        return
-      }
-
-      const {projectId} = client.config()
-      setLoading(true)
-      client
-        .request({
-          method: 'POST',
-          url: `/embeddings-index/${index.dataset}?projectId=${projectId}`,
-          body: {
-            indexName: index.indexName,
-            projection: index.projection,
-            filter: index.filter,
-          },
-        })
-        .then((response: {index: IndexState}) => {
-          if (onSubmit) {
-            onSubmit(response.index)
-          }
-        })
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .catch((err: any) => {
-          console.error(err)
-          setErrors([err.message])
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    },
-    [index, readOnly, onSubmit, client],
-  )
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <Stack space={4}>
-        {errors?.length ? (
-          <Card tone="critical" border padding={2}>
-            <Text>
-              <ul style={{marginLeft: -10}}>
-                {/* eslint-disable-next-line react/no-array-index-key */}
-                {errors?.map((error, i) => <li key={`${error}-${i}`}>{error}</li>)}
-              </ul>
-            </Text>
-          </Card>
-        ) : null}
-        <IndexFormInput
-          label="Index name"
-          placeholder={'Name of index without spaces...'}
-          index={index}
-          prop="indexName"
-          onChange={setIndex}
-          readOnly={readOnly}
-        />
-        <IndexFormInput label="Dataset" index={index} prop="dataset" onChange={setIndex} readOnly />
-        <IndexFormInput
-          label="Filter"
-          description="Must be a valid GROQ filter"
-          placeholder={defaultIndex.filter}
-          index={index}
-          prop="filter"
-          onChange={setIndex}
-          readOnly={readOnly}
-          type="textarea"
-        />
-        <IndexFormInput
-          label="Projection"
-          description="Must be a valid GROQ projection, starting { and ending with }"
-          placeholder={defaultIndex.projection}
-          index={index}
-          prop="projection"
-          onChange={setIndex}
-          readOnly={readOnly}
-          type="textarea"
-        />
-        {onSubmit && (
-          <Button
-            type="submit"
-            text="Create index"
-            icon={
-              loading ? (
-                <Box style={{marginTop: 5}}>
-                  <Spinner />
-                </Box>
-              ) : (
-                AddIcon
-              )
-            }
-            disabled={readOnly || loading}
-            tone="primary"
-          />
-        )}
-      </Stack>
-    </form>
-  )
-}

package/src/embeddingsIndexDashboard/IndexFormInput.tsx

@@ -1,86 +0,0 @@
-import {Box, Label, Stack, Text, TextArea, TextInput} from '@sanity/ui'
-import {Dispatch, FormEvent, SetStateAction, useCallback, useId} from 'react'
-
-import {NamedIndex} from '../api/embeddingsApi'
-
-export interface IndexFormInputProps {
-  index: Partial<NamedIndex>
-  prop: keyof NamedIndex
-  label: string
-  description?: string
-  onChange: Dispatch<SetStateAction<Partial<NamedIndex>>>
-  readOnly: boolean
-  placeholder?: string
-  type?: 'text' | 'textarea'
-}
-
-export function IndexFormInput(props: IndexFormInputProps) {
-  const {label, description, index, prop, onChange, readOnly, placeholder, type} = props
-  const handleChange = useCallback(
-    (propValue: string) => onChange((current) => ({...current, [prop]: propValue})),
-    [onChange, prop],
-  )
-  return (
-    <FormInput
-      label={label}
-      description={description}
-      onChange={handleChange}
-      value={index[prop] ?? ''}
-      readOnly={readOnly}
-      placeholder={placeholder}
-      type={type}
-    />
-  )
-}
-
-interface FormInputProps {
-  label: string
-  description?: string
-  onChange: (value: string) => void
-  value: string
-  readOnly: boolean
-  placeholder?: string
-  type?: 'text' | 'textarea'
-}
-
-function FormInput(props: FormInputProps) {
-  const {label, description, onChange, value, readOnly, placeholder, type = 'text'} = props
-  const id = useId()
-  const handleChange = useCallback(
-    (e: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => onChange(e.currentTarget.value),
-    [onChange],
-  )
-  return (
-    <Stack space={3}>
-      <Label muted htmlFor={id}>
-        <label htmlFor={id}>{label}</label>
-      </Label>
-      {description && (
-        <Box>
-          <Text size={1} muted>
-            {description}
-          </Text>
-        </Box>
-      )}
-      {type === 'text' ? (
-        <TextInput
-          id={id}
-          value={value}
-          onChange={handleChange}
-          readOnly={readOnly}
-          placeholder={placeholder}
-        />
-      ) : (
-        <TextArea
-          id={id}
-          value={value}
-          rows={3}
-          onChange={handleChange}
-          readOnly={readOnly}
-          placeholder={placeholder}
-          style={{resize: 'vertical'}}
-        />
-      )}
-    </Stack>
-  )
-}

package/src/embeddingsIndexDashboard/IndexInfo.tsx

@@ -1,117 +0,0 @@
-import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Flex,
-  Heading,
-  Label,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useCallback} from 'react'
-
-import {IndexState} from '../api/embeddingsApi'
-import {IndexEditor} from './IndexEditor'
-import {QueryIndex} from './QueryIndex'
-
-export interface IndexInfoProps {
-  selectedIndex: IndexState
-  onDeleteIndex: (index: IndexState) => void
-}
-
-export function IndexInfo({selectedIndex, onDeleteIndex}: IndexInfoProps) {
-  const handleDelete = useCallback(
-    () => onDeleteIndex(selectedIndex),
-    [selectedIndex, onDeleteIndex],
-  )
-  return (
-    <Stack space={4} flex={1}>
-      <Flex align="center" flex={1} gap={2}>
-        <Box flex={1}>
-          <Heading>Index: {selectedIndex?.indexName ?? 'Untitled'}</Heading>
-        </Box>
-        <Box>
-          <MenuButton
-            button={
-              <Button
-                title="Open index actions"
-                icon={EllipsisVerticalIcon}
-                padding={2}
-                mode="ghost"
-              />
-            }
-            id={`button-${selectedIndex.indexName}`}
-            menu={
-              <Menu>
-                <MenuItem
-                  text="Delete index"
-                  icon={TrashIcon}
-                  tone="critical"
-                  onClick={handleDelete}
-                />
-              </Menu>
-            }
-            popover={{placement: 'right'}}
-          />
-        </Box>
-      </Flex>
-
-      <Flex gap={6}>
-        <Stack space={4} flex={1} style={{maxWidth: 600}}>
-          <Box>
-            <IndexEditor index={selectedIndex} readOnly />
-          </Box>
-          <IndexStatus selectedIndex={selectedIndex} />
-        </Stack>
-
-        <Stack space={3} flex={1}>
-          <Label muted>Query index</Label>
-          <QueryIndex indexName={selectedIndex.indexName} key={selectedIndex.indexName} />
-        </Stack>
-      </Flex>
-    </Stack>
-  )
-}
-
-function IndexStatus({selectedIndex}: {selectedIndex: IndexState}) {
-  return (
-    <Stack space={4} flex={1}>
-      <Flex gap={2} align="center">
-        <Box flex={1}>
-          <Label size={1} muted>
-            Status
-          </Label>
-        </Box>
-        <Stack space={2}>
-          <Text>{selectedIndex.status}</Text>
-        </Stack>
-      </Flex>
-      <Flex gap={5} align="center">
-        <Box flex={1}>
-          <Label size={1} muted>
-            Indexing progress
-          </Label>
-        </Box>
-        <Stack space={2}>
-          <Text>
-            {selectedIndex.startDocumentCount - selectedIndex.remainingDocumentCount} /{' '}
-            {selectedIndex.startDocumentCount}
-          </Text>
-        </Stack>
-      </Flex>
-      <Flex gap={5} align="center">
-        <Box flex={1}>
-          <Label size={1} muted>
-            Failed documents
-          </Label>
-        </Box>
-        <Stack space={2}>
-          <Text>{selectedIndex.failedDocumentCount}</Text>
-        </Stack>
-      </Flex>
-    </Stack>
-  )
-}