@sanity/embeddings-index-ui 1.0.0 → 1.0.2

package/package.json

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

package/src/api/embeddingsApi.ts

@@ -19,7 +19,7 @@ export interface QueryResult {
   score: number
   value: {
     documentId: string
-    type?: string
+    type: string
   }
 }
 

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/embeddingsIndexDashboard/EmbeddingsIndexTool.tsx

@@ -1,16 +1,11 @@
 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'
 
 export function EmbeddingsIndexTool() {
   return (

package/src/embeddingsIndexDashboard/QueryIndex.tsx

@@ -92,10 +92,11 @@ export function ResultList(props: {results: QueryResult[]; query: string}) {
 }
 
 function ResultEntry(props: {result: QueryResult}) {
+  const value = props.result.value
   return (
     <Flex gap={4} align="center">
       <Box flex={1}>
-        <DocumentPreview documentId={props.result.value.documentId} button />
+        <DocumentPreview documentId={value.documentId} schemaTypeName={value.type} button />
       </Box>
       <Box>
         <Text muted size={1}>

package/src/preview/DocumentPreview.tsx

@@ -1,4 +1,4 @@
-import {CSSProperties, useEffect, useMemo, useState} from 'react'
+import {CSSProperties, useMemo} from 'react'
 import {useMemoObservable} from 'react-rx'
 import {
   DefaultPreview,
@@ -7,7 +7,6 @@ import {
   SanityDefaultPreview,
   SanityDocument,
   SchemaType,
-  useClient,
   useDocumentPreviewStore,
   useSchema,
 } from 'sanity'
@@ -17,6 +16,7 @@ import {ErrorOutlineIcon} from '@sanity/icons'
 
 interface ResultPreviewProps {
   documentId: string
+  schemaTypeName: string
   button?: boolean
   style?: CSSProperties
 }
@@ -24,18 +24,13 @@ interface ResultPreviewProps {
 export function DocumentPreview({
   documentId,
   style,
+  schemaTypeName,
   ...buttonProps
 }: ResultPreviewProps & ButtonProps) {
-  const client = useClient({apiVersion: '2023-06-06'})
-  const [type, setType] = useState<string | undefined>(undefined)
   const schema = useSchema()
-  const schemaType = type ? schema.get(type) : undefined
+  const schemaType = schemaTypeName ? schema.get(schemaTypeName) : undefined
 
-  useEffect(() => {
-    client.fetch<string>(`* [_id==$id]._type`, {id: documentId}).then(setType)
-  }, [documentId, client])
-
-  if (!type) {
+  if (!schemaTypeName) {
     return (
       <Card style={{minHeight: '36px'}}>
         <DefaultPreview
@@ -58,7 +53,7 @@ export function DocumentPreview({
           media={() => <ErrorOutlineIcon />}
           title={
             <>
-              Unknown type <code>{type ?? 'N/A'}</code> for {documentId}
+              Unknown type <code>{schemaTypeName ?? 'N/A'}</code> for {documentId}
             </>
           }
         />
@@ -69,6 +64,7 @@ export function DocumentPreview({
   return (
     <DocumentPreviewInner
       documentId={documentId}
+      schemaTypeName={schemaTypeName}
       schemaType={schemaType}
       style={style}
       {...buttonProps}

package/src/referenceInput/SemanticSearchReferenceInput.tsx

@@ -1,12 +1,4 @@
-import {
-  ObjectInputProps,
-  ReferenceSchemaType,
-  set,
-  setIfMissing,
-  typed,
-  unset,
-  useClient,
-} from 'sanity'
+import {ObjectInputProps, ReferenceSchemaType, set, setIfMissing, typed, unset} from 'sanity'
 import {Autocomplete, Box, Button, Flex, Text, AutocompleteOpenButtonProps} from '@sanity/ui'
 import {EarthGlobeIcon, LinkIcon} from '@sanity/icons'
 import {useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
@@ -14,6 +6,7 @@ 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'
 
 interface Option {
   result: QueryResult
@@ -60,11 +53,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
 
@@ -116,7 +104,7 @@ function SemanticSearchInput(props: ObjectInputProps) {
 
       queryIndex(
         {
-          query: queryString,
+          query: queryString.trim().length ? queryString : JSON.stringify(docRef.current) ?? '',
           indexName,
           maxResults,
           filter: {
@@ -194,7 +182,7 @@ function SemanticSearchInput(props: ObjectInputProps) {
       id={id}
       ref={autocompleteRef}
       data-testid="semantic-autocomplete"
-      placeholder="Type to search"
+      placeholder="Type to search..."
       openButton={openButtonConfig}
       onFocus={handleFocus}
       onChange={handleChange}
@@ -210,11 +198,12 @@ function SemanticSearchInput(props: ObjectInputProps) {
 }
 
 function AutocompleteOption(props: Option) {
+  const value = props.result.value
   return (
     <Button mode="bleed" padding={1} style={{width: '100%'}}>
       <Flex gap={2} align="center">
         <Box flex={1}>
-          <DocumentPreview documentId={props.result.value.documentId} />
+          <DocumentPreview documentId={value.documentId} schemaTypeName={value.type} />
         </Box>
         <Box padding={2}>
           <Text size={1} muted title={'Relevance'}>