@sanity/embeddings-index-ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/embeddings-index-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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/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

@@ -116,7 +116,7 @@ function SemanticSearchInput(props: ObjectInputProps) {
 
       queryIndex(
         {
-          query: queryString,
+          query: queryString.trim().length ? queryString : JSON.stringify(docRef.current) ?? '',
           indexName,
           maxResults,
           filter: {
@@ -194,7 +194,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 +210,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'}>