sanity-plugin-taxonomy-manager 4.7.2 → 5.0.0

package/src/components/inputs/ArrayHierarchyInput.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import type {DocumentId} from '@sanity/id-utils'
 import {
   Grid,
@@ -17,9 +16,9 @@ import {useState, useEffect, useCallback} from 'react'
 import type {ArrayFieldProps, ObjectOptions} from 'sanity'
 import {FormField, useClient, useFormValue, isVersionId, isDraftId, usePerspective} from 'sanity'
 
-import {useEmbeddingsRecs} from '../../hooks'
+import {useTaxonomyDataPort} from '../../seams/TaxonomyPortContext'
 import NodeTree from '../../static/NodeTree'
-import type {ConceptSchemeDocument, EmbeddingsIndexConfig} from '../../types'
+import type {ConceptSchemeDocument, SemanticSearchConfig} from '../../types'
 import {TreeView} from '../TreeView'
 
 type ReferenceOptions = ObjectOptions & {
@@ -37,7 +36,7 @@ type ReferenceOptions = ObjectOptions & {
 }
 
 type ArrayHierarchyInputProps = ArrayFieldProps & {
-  embeddingsIndex?: EmbeddingsIndexConfig
+  semanticSearch?: SemanticSearchConfig
 }
 
 // Extract the return type of the filter function
@@ -60,19 +59,18 @@ type FilterResult = Awaited<ReturnType<ReferenceOptions['filter']>>
  *   by default instead of collapsed.
  *
  * @param props - Standard Sanity `ArrayFieldProps` extended with an optional
- *   `embeddingsIndex` configuration object.
- * @param props.embeddingsIndex - Optional configuration for AI-assisted term
- *   recommendations via a Sanity Embeddings Index. When provided, opening the tree
- *   browser queries the specified index and annotates matching taxonomy terms with
- *   a relevance score to help authors identify the most appropriate terms.
- * @param props.embeddingsIndex.indexName - The name of the Sanity Embeddings Index
- *   to query. Must be an index that includes `skosConcept` documents.
- * @param props.embeddingsIndex.fieldReferences - An array of field names from the
- *   current document whose values are concatenated and sent as the embeddings search
- *   query. All listed fields must contain values when the tree browser is opened;
- *   empty fields will display an error message in the tree view rather than scores.
- * @param props.embeddingsIndex.maxResults - Maximum number of semantically matching
- *   terms to return from the embeddings index. Defaults to `3`.
+ *   `semanticSearch` configuration object.
+ * @param props.semanticSearch - Optional configuration for AI-assisted term
+ *   recommendations. When provided, opening the tree browser scores `skosConcept`
+ *   documents against the dataset's embeddings (`text::semanticSimilarity()`) and
+ *   annotates matching taxonomy terms with a relevance score to help authors
+ *   identify the most appropriate terms. Requires dataset embeddings to be enabled.
+ * @param props.semanticSearch.fieldReferences - An array of field names from the
+ *   current document whose values are concatenated and sent as the search query.
+ *   All listed fields must contain values when the tree browser is opened; empty
+ *   fields will display a message in the tree view rather than scores.
+ * @param props.semanticSearch.maxResults - Maximum number of semantically matching
+ *   terms to return. Defaults to `3`.
  *
  * @example
  * Basic usage with a scheme filter:
@@ -166,8 +164,7 @@ type FilterResult = Awaited<ReturnType<ReferenceOptions['filter']>>
  *     field: (props) => (
  *       <ArrayHierarchyInput
  *         {...props}
- *         embeddingsIndex={{
- *           indexName: 'my-taxonomy-index',
+ *         semanticSearch={{
  *           fieldReferences: ['title', 'description'],
  *           maxResults: 4,
  *         }}
@@ -187,7 +184,7 @@ export function ArrayHierarchyInput(props: ArrayHierarchyInputProps) {
   // the resource document in which the input component appears:
   const documentId = useFormValue(['_id']) as string
   // name of the field to input a value:
-  const {name, title, value = [], embeddingsIndex} = props
+  const {name, title, value = [], semanticSearch} = props
 
   // Get release and draft status of the document
   const isInRelease = isVersionId(documentId as DocumentId)
@@ -209,7 +206,8 @@ export function ArrayHierarchyInput(props: ArrayHierarchyInputProps) {
 
   const {filter} = props.schemaType.of[0].options as ReferenceOptions
 
-  const {conceptRecs, recsError, triggerEmbeddingsSearch} = useEmbeddingsRecs(embeddingsIndex)
+  const port = useTaxonomyDataPort()
+  const {conceptRecs, recsError, triggerSearch} = port.useSemanticRecommendations(semanticSearch)
 
   const toast = useToast()
 
@@ -244,8 +242,8 @@ export function ArrayHierarchyInput(props: ArrayHierarchyInputProps) {
 
   const browseHierarchy = useCallback(() => {
     setOpen(true)
-    triggerEmbeddingsSearch()
-  }, [triggerEmbeddingsSearch])
+    triggerSearch(schemeId)
+  }, [triggerSearch, schemeId])
 
   const handleClose = useCallback(() => {
     setOpen(false)
@@ -322,7 +320,7 @@ export function ArrayHierarchyInput(props: ArrayHierarchyInputProps) {
         })
         .catch((err) => console.error(err))
     },
-    [value, isDraft, isInRelease, client, documentId, toast, name]
+    [value, isDraft, isInRelease, client, documentId, toast, name],
   )
 
   // Check to be sure a filter is present
@@ -414,6 +412,7 @@ export function ArrayHierarchyInput(props: ArrayHierarchyInputProps) {
     return (
       <FormField
         title={title}
+        path={props.path}
         description={props.description}
         level={props.level}
         validation={props.validation}

package/src/components/inputs/Identifier.tsx

@@ -4,7 +4,7 @@ import {useCallback} from 'react'
 import {set} from 'sanity'
 import type {StringInputProps} from 'sanity'
 
-import {createId} from '../../helpers/createId'
+import {createId} from '../../core/createId'
 import type {Options} from '../../types'
 
 type IdentifierProps = StringInputProps & {

package/src/components/inputs/InputHierarchy.test.tsx

@@ -0,0 +1,38 @@
+import {screen} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
+
+import {ReleaseContext, SchemeContext} from '../../context'
+import {TaxonomyPortProvider} from '../../seams/TaxonomyPortContext'
+import {createFakeDataPort} from '../../test/FakeDataPort'
+import {renderWithUi} from '../../test/renderWithUi'
+import type {ConceptSchemeDocument} from '../../types'
+
+import {InputHierarchy} from './InputHierarchy'
+
+const scheme = {
+  displayed: {_id: 'scheme-9', _type: 'skosConceptScheme'},
+} as unknown as ConceptSchemeDocument
+
+describe('InputHierarchy (input watch seam)', () => {
+  it('watches the branch-scoped input tree with the resolved params', () => {
+    const port = createFakeDataPort({loading: true})
+
+    renderWithUi(
+      <TaxonomyPortProvider port={port}>
+        <SchemeContext.Provider value={scheme}>
+          <ReleaseContext.Provider value={'drafts'}>
+            <InputHierarchy branchId={'branch-1'} inputComponent selectConcept={() => undefined} />
+          </ReleaseContext.Provider>
+        </SchemeContext.Provider>
+      </TaxonomyPortProvider>
+    )
+
+    expect(screen.getByText('Loading hierarchy…')).toBeInTheDocument()
+    expect(port.lastWatchParams).toEqual({
+      mode: 'input',
+      documentId: 'scheme-9',
+      branchId: 'branch-1',
+      perspective: 'drafts',
+    })
+  })
+})

package/src/components/inputs/InputHierarchy.tsx

@@ -1,19 +1,14 @@
-/* eslint-disable react/require-default-props */
 import type {DocumentId} from '@sanity/id-utils'
 import {getPublishedId} from '@sanity/id-utils'
 import {Flex, Spinner, Box, Text, Card} from '@sanity/ui'
 import {nanoid} from 'nanoid'
-import {useCallback, useContext, useMemo} from 'react'
-import {useListeningQuery} from 'sanity-plugin-utils'
+import {useContext, useMemo} from 'react'
 
 import {ReleaseContext, SchemeContext, TreeContext} from '../../context'
-import {inputBuilder} from '../../queries'
-import type {
-  ChildConceptTerm,
-  ConceptSchemeDocument,
-  DocumentConcepts,
-  TreeViewProps,
-} from '../../types'
+import {recommendedConceptIds} from '../../core/semanticRecommendations'
+import {annotateRecommendations} from '../../core/tree/annotateRecommendations'
+import {useTaxonomyDataPort} from '../../seams/TaxonomyPortContext'
+import type {ConceptSchemeDocument, TreeViewProps} from '../../types'
 import {TreeStructure} from '../TreeStructure'
 
 /**
@@ -34,73 +29,30 @@ export const InputHierarchy = ({
 }: TreeViewProps) => {
   const document: ConceptSchemeDocument = useContext(SchemeContext) || ({} as ConceptSchemeDocument)
   const documentId = getPublishedId(document.displayed?._id as DocumentId)
-  const releaseContext: string = useContext(ReleaseContext) as string
+  const releaseContext = useContext(ReleaseContext)
   const initialVisibility = expanded ? 'open' : 'closed'
-  const {data, loading, error} = useListeningQuery<DocumentConcepts>(
-    {
-      fetch: inputBuilder(),
-      listen: `*[_type == "skosConcept" || _id == $id]`,
-    },
-    {
-      // GROQ's select($branchId != null => ...) requires null, not empty string.
-      // ListenQueryParams doesn't accept null, so we cast past it.
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-      params: {id: documentId, branchId} as any,
-      options: {
-        perspective: releaseContext === undefined ? 'drafts' : [releaseContext],
-      },
-    }
-  ) as {data: DocumentConcepts; loading: boolean; error: Error | null}
+  const port = useTaxonomyDataPort()
+  const {data, loading, error} = port.useWatchTree({
+    mode: 'input',
+    documentId,
+    branchId,
+    perspective: releaseContext,
+  })
 
-  // Build a score lookup map from conceptRecs:
-  const scoreMap = useMemo(() => {
-    const map = new Map<string, number>()
-    if (Array.isArray(conceptRecs)) {
-      for (const rec of conceptRecs) {
-        map.set(rec.value.documentId, rec.score)
-      }
-    }
-    return map
-  }, [conceptRecs])
+  // Mark which concepts are recommendations (by published id):
+  const recommendedIds = useMemo(() => recommendedConceptIds(conceptRecs ?? []), [conceptRecs])
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const treeId = useMemo(() => nanoid(6), [scoreMap])
-
-  // Recursively annotate tree nodes
-  // Walk the tree creating new objects with score attached where
-  // there's a match. Use getPublishedId() to normalize the tree
-  // node id before comparing against the lookup map.
-  // Process children first, then check if any child has score
-  // or hasMatchingDescendant.
-  const addScores = useCallback(function addScores<T extends ChildConceptTerm>(
-    node: T,
-    scores: Map<string, number>
-  ): T {
-    const publishedId = getPublishedId(node.id as DocumentId)
-    const score = scores.get(publishedId)
-
-    const annotatedChildren = node.childConcepts?.map((c) => addScores(c, scores))
-
-    const hasMatchingDescendant =
-      annotatedChildren?.some((c) => c.score !== undefined || c.hasMatchingDescendant) ?? false
-
-    return {
-      ...node,
-      ...(score === undefined ? {} : {score}),
-      ...(hasMatchingDescendant ? {hasMatchingDescendant: true} : {}),
-      ...(annotatedChildren ? {childConcepts: annotatedChildren} : {}),
-    } as T
-  },
-  [])
+  const treeId = useMemo(() => nanoid(6), [recommendedIds])
 
   // Compute merged data with useMemo:
   const mergedData = useMemo(() => {
-    if (!data || scoreMap.size === 0 || recsError) return data
+    if (!data || recommendedIds.size === 0 || recsError) return data
     return {
-      topConcepts: data.topConcepts?.map((tc) => addScores(tc, scoreMap)),
-      concepts: data.concepts?.map((c) => addScores(c, scoreMap)),
+      topConcepts: data.topConcepts?.map((tc) => annotateRecommendations(tc, recommendedIds)),
+      concepts: data.concepts?.map((c) => annotateRecommendations(c, recommendedIds)),
     }
-  }, [addScores, data, scoreMap, recsError])
+  }, [data, recommendedIds, recsError])
 
   if (loading) {
     return (

package/src/components/inputs/ReferenceHierarchyInput.test.tsx

@@ -0,0 +1,109 @@
+import {screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type {ReactNode} from 'react'
+import {beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {TaxonomyPortProvider} from '../../seams/TaxonomyPortContext'
+import {createFakeDataPort} from '../../test/FakeDataPort'
+import {fakeSchemeClient, filterFor, referenceFieldProps} from '../../test/inputHarness'
+import {renderWithUi} from '../../test/renderWithUi'
+
+import {ReferenceHierarchyInput} from './ReferenceHierarchyInput'
+
+// jsdom has no Studio runtime, so the Studio hooks the input pulls from `sanity`
+// are replaced with controllable fakes and FormField with a passthrough. The data
+// seam goes through an injected FakeDataPort, so the real recommendations hook
+// (which also reads the client) is never reached. isDraftId/isVersionId stay real.
+const mocks = vi.hoisted(() => ({
+  useClient: vi.fn(),
+  useFormValue: vi.fn(),
+  usePerspective: vi.fn(),
+}))
+
+vi.mock('sanity', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('sanity')>()
+  return {
+    ...actual,
+    useClient: mocks.useClient,
+    useFormValue: mocks.useFormValue,
+    usePerspective: mocks.usePerspective,
+    FormField: ({title, children}: {title?: string; children?: ReactNode}) => (
+      <div data-testid="form-field">
+        {title}
+        {children}
+      </div>
+    ),
+  }
+})
+
+function renderInput(
+  props = referenceFieldProps(),
+  port = createFakeDataPort()
+) {
+  return renderWithUi(
+    <TaxonomyPortProvider port={port}>
+      <ReferenceHierarchyInput {...props} />
+    </TaxonomyPortProvider>
+  )
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  mocks.useClient.mockReturnValue(fakeSchemeClient())
+  mocks.useFormValue.mockReturnValue('doc-1')
+  mocks.usePerspective.mockReturnValue({selectedPerspectiveName: undefined})
+})
+
+describe('ReferenceHierarchyInput', () => {
+  it('warns when the field is configured without a filter', () => {
+    renderInput(referenceFieldProps({schemaType: {options: {}}}))
+
+    expect(screen.getByText(/must be used with an accompanying/i)).toBeInTheDocument()
+  })
+
+  it('disables the browse button on the published perspective', async () => {
+    mocks.usePerspective.mockReturnValue({selectedPerspectiveName: 'published'})
+    renderInput()
+
+    expect(await screen.findByRole('button', {name: /browse taxonomy tree/i})).toBeDisabled()
+  })
+
+  it('enables the browse button off the published perspective', async () => {
+    renderInput()
+
+    expect(await screen.findByRole('button', {name: /browse taxonomy tree/i})).toBeEnabled()
+  })
+
+  it('suppresses the default input in browse-only mode, showing an empty preview', async () => {
+    renderInput(
+      referenceFieldProps({
+        schemaType: {options: {filter: filterFor({schemeId: 'scheme-x'}, {browseOnly: true})}},
+      })
+    )
+
+    expect(await screen.findByText('No items')).toBeInTheDocument()
+    expect(screen.queryByTestId('default-input')).not.toBeInTheDocument()
+  })
+
+  it('renders the default input when not browse-only', async () => {
+    renderInput()
+
+    expect(await screen.findByTestId('default-input')).toBeInTheDocument()
+  })
+
+  it('runs a scheme-scoped search on browse and badges recommended concepts', async () => {
+    const port = createFakeDataPort({
+      tree: {topConcepts: [{id: 'concept-1', prefLabel: 'Biology', _originalId: 'concept-1'}], concepts: []},
+      recommendations: [{conceptId: 'concept-1', score: 0.9}],
+    })
+    renderInput(referenceFieldProps(), port)
+
+    await userEvent.setup().click(await screen.findByRole('button', {name: /browse taxonomy tree/i}))
+
+    // The search is triggered scoped to the field's resolved scheme...
+    expect(port.lastSearchSchemeId).toBe('scheme-x')
+    // ...and the recommended concept is badged in the opened tree.
+    expect(await screen.findByText('Biology')).toBeInTheDocument()
+    expect(await screen.findByText('recommended')).toBeInTheDocument()
+  })
+})

package/src/components/inputs/ReferenceHierarchyInput.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import {isVersionId} from '@sanity/id-utils'
 import type {DocumentId} from '@sanity/id-utils'
 import {Grid, Stack, Button, Dialog, Box, Spinner, Text, Flex, Card} from '@sanity/ui'
@@ -6,9 +5,9 @@ import {useState, useEffect, useCallback} from 'react'
 import type {ObjectFieldProps, ObjectOptions, Reference} from 'sanity'
 import {FormField, isDraftId, useClient, useFormValue, usePerspective} from 'sanity'
 
-import {useEmbeddingsRecs} from '../../hooks'
+import {useTaxonomyDataPort} from '../../seams/TaxonomyPortContext'
 import NodeTree from '../../static/NodeTree'
-import type {ConceptSchemeDocument, EmbeddingsIndexConfig} from '../../types'
+import type {ConceptSchemeDocument, SemanticSearchConfig} from '../../types'
 import {TreeView} from '../TreeView'
 
 type ReferenceOptions = ObjectOptions & {
@@ -26,7 +25,7 @@ type ReferenceOptions = ObjectOptions & {
 }
 
 type HierarchyInput = ObjectFieldProps<Reference> & {
-  embeddingsIndex?: EmbeddingsIndexConfig
+  semanticSearch?: SemanticSearchConfig
 }
 
 // Extract the return type of the filter function
@@ -47,19 +46,18 @@ type FilterResult = Awaited<ReturnType<ReferenceOptions['filter']>>
  *   by default instead of collapsed.
  *
  * @param props - Standard Sanity `ObjectFieldProps<Reference>` extended with an optional
- *   `embeddingsIndex` configuration object.
- * @param props.embeddingsIndex - Optional configuration for AI-assisted term
- *   recommendations via a Sanity Embeddings Index. When provided, opening the tree
- *   browser queries the specified index and annotates matching taxonomy terms with
- *   a relevance score to help authors identify the most appropriate term.
- * @param props.embeddingsIndex.indexName - The name of the Sanity Embeddings Index
- *   to query. Must be an index that includes `skosConcept` documents.
- * @param props.embeddingsIndex.fieldReferences - An array of field names from the
- *   current document whose values are concatenated and sent as the embeddings search
- *   query. All listed fields must contain values when the tree browser is opened;
- *   empty fields will display an error message in the tree view rather than scores.
- * @param props.embeddingsIndex.maxResults - Maximum number of semantically matching
- *   terms to return from the embeddings index. Defaults to `3`.
+ *   `semanticSearch` configuration object.
+ * @param props.semanticSearch - Optional configuration for AI-assisted term
+ *   recommendations. When provided, opening the tree browser scores `skosConcept`
+ *   documents against the dataset's embeddings (`text::semanticSimilarity()`) and
+ *   annotates matching taxonomy terms with a relevance score to help authors
+ *   identify the most appropriate term. Requires dataset embeddings to be enabled.
+ * @param props.semanticSearch.fieldReferences - An array of field names from the
+ *   current document whose values are concatenated and sent as the search query.
+ *   All listed fields must contain values when the tree browser is opened; empty
+ *   fields will display a message in the tree view rather than scores.
+ * @param props.semanticSearch.maxResults - Maximum number of semantically matching
+ *   terms to return. Defaults to `3`.
  *
  * @example
  * Basic usage with a scheme filter:
@@ -116,7 +114,7 @@ type FilterResult = Awaited<ReturnType<ReferenceOptions['filter']>>
  * ```
  *
  * @example
- * AI-assisted recommendations via an embeddings index:
+ * AI-assisted recommendations via dataset embeddings:
  * ```jsx
  * import {ReferenceHierarchyInput, schemeFilter} from 'sanity-plugin-taxonomy-manager'
  *
@@ -133,8 +131,7 @@ type FilterResult = Awaited<ReturnType<ReferenceOptions['filter']>>
  *     field: (props) => (
  *       <ReferenceHierarchyInput
  *         {...props}
- *         embeddingsIndex={{
- *           indexName: 'my-taxonomy-index',
+ *         semanticSearch={{
  *           fieldReferences: ['title', 'metaDescription'],
  *           maxResults: 4,
  *         }}
@@ -155,9 +152,10 @@ export function ReferenceHierarchyInput(props: HierarchyInput) {
   const documentId = useFormValue(['_id']) as string
 
   // name of the field to input a value
-  const {name, title, value, embeddingsIndex} = props
+  const {name, title, value, semanticSearch} = props
 
-  const {conceptRecs, recsError, triggerEmbeddingsSearch} = useEmbeddingsRecs(embeddingsIndex)
+  const port = useTaxonomyDataPort()
+  const {conceptRecs, recsError, triggerSearch} = port.useSemanticRecommendations(semanticSearch)
 
   // Get release and draft status of the document
   const isInRelease = isVersionId(documentId as DocumentId)
@@ -212,8 +210,8 @@ export function ReferenceHierarchyInput(props: HierarchyInput) {
 
   const browseHierarchy = useCallback(() => {
     setOpen(true)
-    triggerEmbeddingsSearch()
-  }, [triggerEmbeddingsSearch])
+    triggerSearch(schemeId)
+  }, [triggerSearch, schemeId])
 
   const handleClose = useCallback(() => {
     setOpen(false)
@@ -268,7 +266,7 @@ export function ReferenceHierarchyInput(props: HierarchyInput) {
         .then(() => setOpen(false))
         .catch((err) => console.error(err))
     },
-    [client, documentId, isDraft, isInRelease, name]
+    [client, documentId, isDraft, isInRelease, name],
   )
 
   // Check to be sure a filter is present
@@ -337,6 +335,7 @@ export function ReferenceHierarchyInput(props: HierarchyInput) {
     return (
       <FormField
         title={title}
+        path={props.path}
         description={props.description}
         level={props.level}
         validation={props.validation}

package/src/components/interactions/ConceptDetailLink.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import {Button, Text, Box, Badge, Tooltip} from '@sanity/ui'
 import {useCallback, useContext} from 'react'
 import {RouterContext} from 'sanity/router'

package/src/components/interactions/ConceptEditAction.tsx

@@ -44,7 +44,7 @@ export const ConceptEditAction = ({
         mode={'bleed'}
         onClick={handler}
         tone={typeMap[action].tone}
-        aria-label="Remove this concept from this scheme"
+        aria-label={typeMap[action].message}
       />
     </Tooltip>
   )

package/src/components/interactions/ConceptSelectLink.test.tsx

@@ -0,0 +1,49 @@
+import {screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {describe, expect, it, vi} from 'vitest'
+
+import {renderWithUi} from '../../test/renderWithUi'
+import type {ChildConceptTerm} from '../../types'
+
+import {ConceptSelectLink} from './ConceptSelectLink'
+
+const concept = (over: Partial<ChildConceptTerm> = {}): ChildConceptTerm => ({
+  id: 'concept-1',
+  prefLabel: 'Mathematics',
+  ...over,
+})
+
+describe('ConceptSelectLink (recommendation display)', () => {
+  it('shows a "recommended" badge, never a percentage', () => {
+    renderWithUi(
+      <ConceptSelectLink concept={concept({recommended: true})} selectConcept={() => undefined} />
+    )
+
+    expect(screen.getByText('recommended')).toBeInTheDocument()
+    expect(screen.queryByText(/%/)).not.toBeInTheDocument()
+  })
+
+  it('shows no recommendation badge when the concept is not recommended', () => {
+    renderWithUi(<ConceptSelectLink concept={concept()} selectConcept={() => undefined} />)
+
+    expect(screen.queryByText('recommended')).not.toBeInTheDocument()
+  })
+
+  it('writes the concept reference when clicked', async () => {
+    const selectConcept = vi.fn()
+    renderWithUi(
+      <ConceptSelectLink
+        concept={concept({id: 'concept-9', _originalId: 'drafts.concept-9'})}
+        selectConcept={selectConcept}
+      />
+    )
+
+    await userEvent.setup().click(screen.getByRole('button', {name: /Mathematics/}))
+
+    expect(selectConcept).toHaveBeenCalledWith({
+      _ref: 'concept-9',
+      _type: 'reference',
+      _originalId: 'drafts.concept-9',
+    })
+  })
+})

package/src/components/interactions/ConceptSelectLink.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import {Button, Text, Box, Badge, Tooltip} from '@sanity/ui'
 import {useCallback} from 'react'
 
@@ -23,7 +22,7 @@ export function ConceptSelectLink({
     _originalId: string | undefined
   }) => void
 }) {
-  const {prefLabel, id, _originalId, score} = concept ?? {}
+  const {prefLabel, id, _originalId, recommended} = concept ?? {}
   const displayLabel = prefLabel || '[new concept]'
 
   const handleClick = useCallback(() => {
@@ -46,7 +45,7 @@ export function ConceptSelectLink({
             <Box padding={1} sizing="content">
               <Text muted size={1}>
                 {`Select "${prefLabel}"`}
-                {score && ` (${(score * 100).toFixed(1)}% resource match)`}
+                {recommended && ` (recommended)`}
               </Text>
             </Box>
           }
@@ -68,9 +67,14 @@ export function ConceptSelectLink({
                   {topConcept ? 'top concept' : 'orphan'}
                 </Badge>
               )}
-              {score && (
-                <Badge fontSize={0} marginLeft={3} style={{verticalAlign: 'middle'}}>
-                  {`${(score * 100).toFixed(1)}%`}
+              {recommended && (
+                <Badge
+                  tone="positive"
+                  fontSize={0}
+                  marginLeft={3}
+                  style={{verticalAlign: 'middle'}}
+                >
+                  recommended
                 </Badge>
               )}
             </Text>