@sanity/embeddings-index-ui 1.0.0

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@sanity/embeddings-index-ui",
+  "version": "1.0.0",
+  "description": "Various Sanity Studio plugins for integrating with the embeddings index API",
+  "keywords": [
+    "sanity",
+    "sanity-plugin"
+  ],
+  "homepage": "https://github.com/sanity-io/embeddings-index-ui#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/embeddings-index-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/embeddings-index-ui.git"
+  },
+  "license": "MIT",
+  "author": "Sanity <hello@sanity.io>",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.esm.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
+  "scripts": {
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "clean": "rimraf dist",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@sanity/icons": "^2.4.1",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^1.7.11"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@sanity/pkg-utils": "^2.4.8",
+    "@sanity/plugin-kit": "^3.1.10",
+    "@sanity/semantic-release-preset": "^4.1.4",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.3",
+    "prettier-plugin-packagejson": "^2.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "sanity": "^3.16.1",
+    "semantic-release": "^21.1.1",
+    "styled-components": "^5.3.11",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "sanity": "^3.14"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/sanity.json

@@ -0,0 +1,8 @@
+{
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/api/embeddingsApi.ts

@@ -0,0 +1,68 @@
+import {SanityClient} from 'sanity'
+
+export interface NamedIndex {
+  indexName: string
+  dataset: string
+  project: string
+  projection: string
+  filter: string
+}
+
+export interface IndexState extends NamedIndex {
+  status: string
+  startDocumentCount: number
+  remainingDocumentCount: number
+  failedDocumentCount: number
+}
+
+export interface QueryResult {
+  score: number
+  value: {
+    documentId: string
+    type?: string
+  }
+}
+
+export interface QueryConfig {
+  query: string
+  indexName: string
+  maxResults?: number
+  filter?: {
+    type?: string | string[]
+  }
+}
+
+export function queryIndex(queryConfig: QueryConfig, client: SanityClient): Promise<QueryResult[]> {
+  const {query, indexName, maxResults, filter} = queryConfig
+  const projectId = client.config().projectId
+  const dataset = client.config().dataset
+  const queryString = query?.trim()
+
+  return client.request<QueryResult[]>({
+    method: 'POST',
+    url: `/embeddings-index/query/${dataset}/${indexName}?projectId=${projectId}`,
+    body: {
+      query: queryString,
+      maxResults,
+      filter,
+    },
+  })
+}
+
+export function getIndexes(client: SanityClient): Promise<IndexState[]> {
+  const projectId = client.config().projectId
+  const dataset = client.config().dataset
+  return client.request<IndexState[]>({
+    method: 'GET',
+    url: `/embeddings-index/${dataset}?projectId=${projectId}`,
+  })
+}
+
+export function deleteIndex(indexName: string, client: SanityClient): Promise<IndexState> {
+  const projectId = client.config().projectId
+  const dataset = client.config().dataset
+  return client.request<IndexState>({
+    method: 'DELETE',
+    url: `/embeddings-index/${dataset}/${indexName}?projectId=${projectId}`,
+  })
+}

package/src/api/embeddingsApiHooks.ts

@@ -0,0 +1,12 @@
+import {SanityClient, useClient} from 'sanity'
+import {useMemo} from 'react'
+
+export function useApiClient(
+  customApiClient?: (defaultClient: SanityClient) => SanityClient,
+): SanityClient {
+  const client = useClient({apiVersion: 'vX'})
+  return useMemo(
+    () => (customApiClient ? customApiClient(client) : client),
+    [client, customApiClient],
+  )
+}

package/src/embeddingsIndexDashboard/EmbeddingsIndexTool.tsx

@@ -0,0 +1,150 @@
+import {Box, Button, Card, Flex, Heading, Spinner, Stack} from '@sanity/ui'
+import {useClient} from 'sanity'
+import {useCallback, useEffect, useMemo, 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])
+}
+
+export function EmbeddingsIndexTool() {
+  return (
+    <Card>
+      <Flex justify="center" flex={1}>
+        <Card flex={1} style={{maxWidth: 1200}} padding={5}>
+          <Indexes />
+        </Card>
+      </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

@@ -0,0 +1,181 @@
+import {IndexState, NamedIndex} from '../api/embeddingsApi'
+import {useSchema} from 'sanity'
+import {FormEvent, useCallback, useEffect, useId, useRef, useState} from 'react'
+import {Box, Button, Card, Dialog, Spinner, Stack, Text} from '@sanity/ui'
+import {AddIcon} from '@sanity/icons'
+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)
+          }
+        })
+        .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="Projection"
+          placeholder={defaultIndex.projection}
+          index={index}
+          prop="projection"
+          onChange={setIndex}
+          readOnly={readOnly}
+          type="textarea"
+        />
+        <IndexFormInput
+          label="Filter"
+          placeholder={defaultIndex.filter}
+          index={index}
+          prop="filter"
+          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

@@ -0,0 +1,75 @@
+import {NamedIndex} from '../api/embeddingsApi'
+import {Dispatch, FormEvent, SetStateAction, useCallback, useId} from 'react'
+import {Label, Stack, TextArea, TextInput} from '@sanity/ui'
+
+export interface IndexFormInputProps {
+  index: Partial<NamedIndex>
+  prop: keyof NamedIndex
+  label: string
+  onChange: Dispatch<SetStateAction<Partial<NamedIndex>>>
+  readOnly: boolean
+  placeholder?: string
+  type?: 'text' | 'textarea'
+}
+
+export function IndexFormInput(props: IndexFormInputProps) {
+  const {label, index, prop, onChange, readOnly, placeholder, type} = props
+  const handleChange = useCallback(
+    (propValue: string) => onChange((current) => ({...current, [prop]: propValue})),
+    [onChange, prop],
+  )
+  return (
+    <FormInput
+      label={label}
+      onChange={handleChange}
+      value={index[prop] ?? ''}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      type={type}
+    />
+  )
+}
+
+interface FormInputProps {
+  label: string
+  onChange: (value: string) => void
+  value: string
+  readOnly: boolean
+  placeholder?: string
+  type?: 'text' | 'textarea'
+}
+
+function FormInput(props: FormInputProps) {
+  const {label, 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>
+      {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

@@ -0,0 +1,116 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Label,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import {EllipsisVerticalIcon, TrashIcon} from '@sanity/icons'
+import {IndexEditor} from './IndexEditor'
+import {QueryIndex} from './QueryIndex'
+import {IndexState} from '../api/embeddingsApi'
+import {useCallback} from 'react'
+
+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>
+  )
+}