@sanity/assist 1.2.13 → 1.2.15-lang.1

package/src/fieldActions/translateActions.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import {
+  DocumentFieldAction,
+  DocumentFieldActionGroup,
+  DocumentFieldActionItem,
+  ObjectSchemaType,
+} from 'sanity'
+import {TranslateIcon} from '@sanity/icons'
+import {useMemo, useRef} from 'react'
+import {useApiClient, useTranslate} from '../useApiClient'
+import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
+import {Box, Spinner} from '@sanity/ui'
+import {isAssistSupported} from '../helpers/assistSupported'
+import {useDocumentPane} from 'sanity/desk'
+import {useFieldTranslation} from '../translate/FieldTranslationProvider'
+
+function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
+  return node
+}
+
+export const translateActions: DocumentFieldAction = {
+  name: 'sanity-assist-translate',
+  useAction(props) {
+    const {config} = useAiAssistanceConfig()
+    const apiClient = useApiClient(config?.__customApiClient)
+    const {translate, loading} = useTranslate(apiClient)
+
+    const isDocumentLevel = props.path.length === 0
+    const {schemaType, documentId} = props
+
+    if (isDocumentLevel) {
+      const {value: documentValue} = useDocumentPane()
+      const docRef = useRef(documentValue)
+      docRef.current = documentValue
+
+      const docTransTypes = config.translate?.document?.documentTypes
+      const documentTranslation =
+        (!docTransTypes && isAssistSupported(schemaType)) ||
+        docTransTypes?.includes(schemaType.name)
+      const languagePath = config.translate?.document?.languageField
+
+      //const {value: languageId} = extractWithPath(languagePath, documentValue)[0] ?? {}
+      // if this is true, it is stable, and not breaking rules of hooks
+      const translateDocumentAction = useMemo(
+        () =>
+          languagePath && documentTranslation
+            ? node({
+                type: 'action',
+                icon: loading
+                  ? () => (
+                      <Box style={{height: 17}}>
+                        <Spinner style={{transform: 'translateY(6px)'}} />
+                      </Box>
+                    )
+                  : TranslateIcon,
+                title: `Translate document`,
+                onAction: () => {
+                  if (loading || !languagePath || !documentId) {
+                    return
+                  }
+                  translate({languagePath, documentId: documentId ?? ''})
+                },
+                renderAsButton: true,
+                disabled: loading,
+              })
+            : undefined,
+        [languagePath, translate, documentId, loading, documentTranslation]
+      )
+
+      const fieldTranslate = useFieldTranslation()
+
+      const fieldTransEnabled = config.translate?.field?.documentTypes?.includes(schemaType.name)
+      const translateFieldsAction = useMemo(
+        () =>
+          fieldTransEnabled
+            ? node({
+                type: 'action',
+                icon: loading
+                  ? () => (
+                      <Box style={{height: 17}}>
+                        <Spinner style={{transform: 'translateY(6px)'}} />
+                      </Box>
+                    )
+                  : TranslateIcon,
+                title: `Translate fields`,
+                onAction: () => {
+                  if (loading || !documentId) {
+                    return
+                  }
+                  fieldTranslate.openFieldTranslation(
+                    docRef.current,
+                    schemaType as ObjectSchemaType
+                  )
+                },
+                renderAsButton: true,
+                disabled: loading,
+              })
+            : undefined,
+        [fieldTranslate, schemaType, documentId, loading, fieldTransEnabled]
+      )
+
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useMemo(() => {
+        return node({
+          type: 'group',
+          icon: () => null,
+          title: 'Translate',
+          children: [translateDocumentAction, translateFieldsAction].filter(
+            (c): c is DocumentFieldActionItem => !!c
+          ),
+          expanded: true,
+        })
+      }, [translateDocumentAction, translateFieldsAction])
+    }
+    // works but not supported by types
+    return undefined as unknown as DocumentFieldActionItem
+  },
+}

package/src/helpers/assistSupported.ts

@@ -43,7 +43,7 @@ function isUnsupportedType(type: SchemaType) {
     type.jsonType === 'number' ||
     type.name === 'sanity.imageCrop' ||
     type.name === 'sanity.imageHotspot' ||
-    isType(type, 'reference') ||
+    (isType(type, 'reference') && !type?.options?.aiWritingAssistance?.embeddingsIndex) ||
     isType(type, 'crossDatasetReference') ||
     isType(type, 'slug') ||
     isType(type, 'url') ||

package/src/node_modules/.vitest/results.json

@@ -0,0 +1 @@
+{"version":"0.32.2","results":[[":schemas/serialize/serializeSchema.test.ts",{"duration":12,"failed":false}],[":translate/paths.test.ts",{"duration":6,"failed":false}]]}

package/src/plugin.tsx

@@ -15,8 +15,11 @@ import {createAssistDocumentPresence} from './presence/AssistDocumentPresence'
 import {isSchemaAssistEnabled} from './helpers/assistSupported'
 import {isImage} from './helpers/typeUtils'
 import {ImageContextProvider} from './components/ImageContext'
+import {TranslationConfig} from './translate/types'
 
 export interface AssistPluginConfig {
+  translate?: TranslationConfig
+
   /**
    * Set this to false to disable model migration from the alpha version of this plugin
    */
@@ -36,6 +39,9 @@ export const assist = definePlugin<AssistPluginConfig | void>((config) => {
     schema: {
       types: schemaTypes,
     },
+    i18n: {
+      bundles: [{}],
+    },
 
     document: {
       inspectors: (prev, context) => {
@@ -45,8 +51,12 @@ export const assist = definePlugin<AssistPluginConfig | void>((config) => {
         }
         return prev
       },
-      unstable_fieldActions: (prev) => {
-        return [...prev, assistFieldActions]
+      unstable_fieldActions: (prev, {documentType, schema}) => {
+        const docSchema = schema.get(documentType)
+        if (docSchema && isSchemaAssistEnabled(docSchema)) {
+          return [...prev, assistFieldActions]
+        }
+        return prev
       },
       unstable_languageFilter: (prev, {documentId, schema, schemaType}) => {
         const docSchema = schema.get(schemaType)

package/src/presence/AssistAvatar.tsx

@@ -88,7 +88,7 @@ export function AssistAvatar(props: {state?: 'present' | 'active'}) {
       </Outline>
       <IconDisc>
         <Text as="span" size={0} style={{color: 'inherit'}}>
-          <SparklesIcon />
+          <SparklesIcon style={{color: 'inherit'}} />
         </Text>
       </IconDisc>
     </Root>

package/src/schemas/assistDocumentSchema.tsx

@@ -18,6 +18,8 @@ import {
   instructionContextTypeName,
   instructionTaskTypeName,
   instructionTypeName,
+  outputFieldTypeName,
+  outputTypeTypeName,
   promptTypeName,
   userInputTypeName,
 } from '../types'
@@ -37,6 +39,8 @@ import {PromptInput} from '../assistDocument/components/instruction/PromptInput'
 import {instructionGuideUrl} from '../constants'
 import {InstructionsArrayField} from '../assistDocument/components/InstructionsArrayField'
 import {getFieldRefsWithDocument} from '../assistInspector/helpers'
+import {InstructionOutputField} from '../assistDocument/components/instruction/InstructionOutputField'
+import {InstructionOutputInput} from '../assistDocument/components/instruction/InstructionOutputInput'
 
 export const fieldReference = defineType({
   type: 'object',
@@ -329,6 +333,41 @@ export const instruction = defineType({
         return context.currentUser?.id ?? ''
       },
     }),
+    defineField({
+      type: 'array',
+      name: 'output',
+      title: 'Output filter',
+      components: {
+        input: InstructionOutputInput,
+        field: InstructionOutputField,
+      },
+      of: [
+        defineArrayMember({
+          type: 'object' as const,
+          name: outputFieldTypeName,
+          title: 'Output field',
+          fields: [
+            {
+              type: 'string',
+              name: 'path',
+              title: 'Path',
+            },
+          ],
+        }),
+        defineArrayMember({
+          type: 'object' as const,
+          name: outputTypeTypeName,
+          title: 'Output type',
+          fields: [
+            {
+              type: 'string',
+              name: 'type',
+              title: 'Type',
+            },
+          ],
+        }),
+      ],
+    }),
   ],
 })
 

package/src/schemas/serialize/serializeSchema.test.ts

@@ -23,7 +23,7 @@ const mockStudioTypes = [
 ]
 
 describe('serializeSchema', () => {
-  test('should not serialize excluded document schema', () => {
+  test('should serialize excluded document schema to support exclude: false overrides at the field level', () => {
     const schema = Schema.compile({
       name: 'test',
       types: [
@@ -42,7 +42,20 @@ describe('serializeSchema', () => {
 
     const serializedTypes = serializeSchema(schema, {leanFormat: true})
 
-    expect(serializedTypes).toEqual([])
+    expect(serializedTypes).toEqual([
+      {
+        fields: [
+          {
+            name: 'title',
+            title: 'Title',
+            type: 'string',
+          },
+        ],
+        name: 'article',
+        title: 'Article',
+        type: 'document',
+      },
+    ])
   })
 
   test('should serialize simple schema', () => {

package/src/schemas/serialize/serializeSchema.ts

@@ -2,6 +2,7 @@ import {
   ArraySchemaType,
   ImageOptions,
   ObjectSchemaType,
+  ReferenceOptions,
   ReferenceSchemaType,
   Schema,
   SchemaType,
@@ -29,7 +30,8 @@ export function serializeSchema(schema: Schema, options?: Options): SerializedSc
     .filter((t) => !(hiddenTypes.includes(t) || t.startsWith('sanity.')))
     .map((t) => schema.get(t))
     .filter((t): t is SchemaType => !!t)
-    .filter((t) => isAssistSupported(t))
+    // because a field can override exclude at the type level, we have to also serialize excluded types
+    // so don't do this: .filter((t) => isAssistSupported(t))
     .filter((t) => !t.hidden && !t.readOnly)
     .map((t) => getSchemaStub(t, schema, options))
     .filter((t) => {
@@ -77,13 +79,12 @@ function getBaseFields(
   typeName: string,
   options: Options | undefined
 ) {
-  const imagePromptField = (type.options as ImageOptions)?.imagePromptField
+  const schemaOptions = removeUndef({
+    imagePromptField: (type.options as ImageOptions)?.imagePromptField,
+    embeddingsIndex: (type.options as ReferenceOptions)?.aiWritingAssistance?.embeddingsIndex,
+  })
   return removeUndef({
-    options: imagePromptField
-      ? {
-          imagePromptField: imagePromptField,
-        }
-      : undefined,
+    options: Object.keys(schemaOptions).length ? schemaOptions : undefined,
     values: Array.isArray(type?.options?.list)
       ? type?.options?.list.map((v: string | {value: string; title: string}) =>
           typeof v === 'string' ? v : v.value ?? `${v.title}`

package/src/schemas/typeDefExtensions.ts

@@ -22,7 +22,18 @@ declare module 'sanity' {
   }
   interface NumberOptions extends AssistOptions {}
   interface ObjectOptions extends AssistOptions {}
-  interface ReferenceBaseOptions extends AssistOptions {}
+  interface ReferenceBaseOptions {
+    aiWritingAssistance?: {
+      /** Set to true to disable assistance for this field or type */
+      exclude?: boolean
+
+      /**
+       * When set, the reference field will allow instructions to be added to it.
+       * Should be the name of the embeddings-index where assist will look for contextually relevant documents
+       * */
+      embeddingsIndex?: string
+    }
+  }
   interface SlugOptions extends AssistOptions {}
   interface StringOptions extends AssistOptions {}
   interface TextOptions extends AssistOptions {}

package/src/translate/FieldTranslationProvider.tsx

@@ -0,0 +1,254 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
+import {ObjectSchemaType, SanityDocumentLike, useClient} from 'sanity'
+import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
+import {useApiClient, useTranslate} from '../useApiClient'
+import {Box, Button, Checkbox, Dialog, Flex, Radio, Spinner, Stack, Text, Tooltip} from '@sanity/ui'
+import {
+  defaultLanguageOutputs,
+  getDocumentMembersFlat,
+  getTranslationMap,
+  TranslationMap,
+} from './paths'
+import {PlayIcon} from '@sanity/icons'
+import {Language} from './types'
+import {getLanguageParams} from './getLanguageParams'
+
+export interface FieldTranslationContextValue {
+  openFieldTranslation: (document: SanityDocumentLike, documentSchema: ObjectSchemaType) => void
+  translationLoading: boolean
+}
+
+export const FieldTranslationContext = createContext<FieldTranslationContextValue>({
+  openFieldTranslation: () => {},
+  translationLoading: false,
+})
+
+export function useFieldTranslation() {
+  return useContext(FieldTranslationContext)
+}
+
+export function FieldTranslationProvider(props: PropsWithChildren<{}>) {
+  const {config: assistConfig} = useAiAssistanceConfig()
+  const apiClient = useApiClient(assistConfig.__customApiClient)
+  const config = assistConfig.translate?.field
+  const {translate: runTranslate} = useTranslate(apiClient)
+
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const [document, setDocument] = useState<SanityDocumentLike | undefined>()
+  const [documentSchema, setDocumentSchema] = useState<ObjectSchemaType | undefined>()
+  const [languages, setLanguages] = useState<Language[] | undefined>()
+  const [fromLanguage, setFromLanguage] = useState<Language | undefined>(undefined)
+  const [toLanguages, setToLanguages] = useState<Language[] | undefined>(undefined)
+  const [translationMap, setTranslationMap] = useState<TranslationMap[] | undefined>()
+
+  const close = useCallback(() => {
+    setDialogOpen(false)
+    setLanguages(undefined)
+    setDocument(undefined)
+    setDocument(undefined)
+  }, [])
+  const languageClient = useClient({apiVersion: config?.apiVersion ?? '2022-11-27'})
+  const documentId = document?._id
+  const id = useId()
+
+  const selectFromLanguage = useCallback(
+    (
+      from: Language,
+      languages: Language[] | undefined,
+      document: SanityDocumentLike | undefined,
+      documentSchema: ObjectSchemaType | undefined
+    ) => {
+      setFromLanguage(from)
+      if (!document || !documentSchema || !languages) {
+        setTranslationMap(undefined)
+        return
+      }
+
+      const to = languages.filter((l) => l.id !== from?.id)
+      setToLanguages(to)
+      const fromId = from?.id
+      const toIds = to?.map((l) => l.id) ?? []
+      const docMembers = getDocumentMembersFlat(document, documentSchema)
+      if (fromId && toIds?.length) {
+        const transMap = getTranslationMap(
+          documentSchema,
+          docMembers,
+          fromId,
+          toIds,
+          config?.translationOutputs ?? defaultLanguageOutputs
+        )
+        setTranslationMap(transMap)
+      } else {
+        setTranslationMap(undefined)
+      }
+    },
+    [config]
+  )
+
+  const toggleToLanguage = useCallback(
+    (
+      toggledLang: Language,
+      toLanguages: Language[] | undefined,
+      languages: Language[] | undefined
+    ) => {
+      if (!languages) {
+        return
+      }
+      const wasSelected = !!toLanguages?.find((l) => l.id === toggledLang.id)
+      const newToLangs = languages.filter(
+        (anyLang) =>
+          !!toLanguages?.find(
+            (selectedLang) => toggledLang.id !== selectedLang.id && selectedLang.id === anyLang.id
+          ) ||
+          (toggledLang.id === anyLang.id && !wasSelected)
+      )
+      setToLanguages(newToLangs)
+    },
+    []
+  )
+
+  const contextValue: FieldTranslationContextValue = useMemo(() => {
+    return {
+      openFieldTranslation: async (
+        document: SanityDocumentLike,
+        documentSchema: ObjectSchemaType
+      ) => {
+        setDialogOpen(true)
+        const languageParams = getLanguageParams(config?.selectLanguageParams, document)
+        const languages: Language[] | undefined = await (typeof config?.languages === 'function'
+          ? config?.languages(languageClient, languageParams)
+          : Promise.resolve(config?.languages))
+        setLanguages(languages)
+        setDocument(document)
+        setDocumentSchema(documentSchema)
+        const fromLanguage = languages?.[0]
+        if (fromLanguage) {
+          selectFromLanguage(fromLanguage, languages, document, documentSchema)
+        } else {
+          console.error('No languages available for selected language params', languageParams)
+        }
+      },
+      translationLoading: false,
+    }
+  }, [selectFromLanguage, config, languageClient])
+
+  const runDisabled =
+    !fromLanguage || !toLanguages?.length || !translationMap?.length || !documentId
+
+  const onRunTranslation = useCallback(() => {
+    if (translationMap && documentId) {
+      runTranslate({
+        documentId,
+        fieldLanguageMap: translationMap.map((map) => ({
+          ...map,
+          // eslint-disable-next-line max-nested-callbacks
+          outputs: map.outputs.filter((out) => !!toLanguages?.find((l) => l.id === out.id)),
+        })),
+      })
+    }
+    close()
+  }, [translationMap, documentId, runTranslate, close, toLanguages])
+
+  const runButton = (
+    <Button
+      text={`Translate`}
+      tone="primary"
+      icon={PlayIcon}
+      style={{width: '100%'}}
+      disabled={runDisabled}
+      onClick={onRunTranslation}
+    />
+  )
+
+  return (
+    <FieldTranslationContext.Provider value={contextValue}>
+      {dialogOpen ? (
+        <Dialog
+          id={id}
+          width={1}
+          open={dialogOpen}
+          onClose={close}
+          header="Translate fields"
+          footer={
+            <Flex justify="space-between" padding={2} flex={1}>
+              {runDisabled ? (
+                <Tooltip
+                  content={
+                    <Flex padding={2}>
+                      <Text>Nothing to translate.</Text>
+                    </Flex>
+                  }
+                  placement="top"
+                >
+                  <Flex flex={1}>{runButton}</Flex>
+                </Tooltip>
+              ) : (
+                runButton
+              )}
+            </Flex>
+          }
+        >
+          {languages ? (
+            <Flex padding={4} gap={5} align="flex-start" justify="center">
+              <Stack space={2}>
+                <Box marginBottom={2}>
+                  <Text weight="semibold">From</Text>
+                </Box>
+                {languages?.map((l) => (
+                  <Flex key={l.id} gap={3} align="center">
+                    <Radio
+                      name="fromLang"
+                      value={l.id}
+                      checked={l.id === fromLanguage?.id}
+                      onClick={() => selectFromLanguage(l, languages, document, documentSchema)}
+                    />
+                    <Text>{l.title ?? l.id}</Text>
+                  </Flex>
+                ))}
+              </Stack>
+
+              <Stack space={2}>
+                <Box marginBottom={2}>
+                  <Text weight="semibold">To</Text>
+                </Box>
+                {languages
+                  ?.filter((l) => l.id !== fromLanguage?.id)
+                  .map((l) => (
+                    <Flex key={l.id} gap={3} align="center">
+                      <Checkbox
+                        name="toLang"
+                        value={l.id}
+                        checked={!!toLanguages?.find((tl) => tl.id === l.id)}
+                        onClick={() => toggleToLanguage(l, toLanguages, languages)}
+                        disabled={
+                          !translationMap?.find((tm) => tm.outputs.find((o) => o.id === l.id))
+                        }
+                      />
+                      <Text>{l.title ?? l.id}</Text>
+                    </Flex>
+                  ))}
+              </Stack>
+            </Flex>
+          ) : (
+            <Flex padding={4} gap={2} align="flex-start" justify="center">
+              <Box>
+                <Spinner />
+              </Box>
+              <Text>Loading languages...</Text>
+            </Flex>
+          )}
+        </Dialog>
+      ) : null}
+      {props.children}
+    </FieldTranslationContext.Provider>
+  )
+}

package/src/translate/getLanguageParams.ts

@@ -0,0 +1,26 @@
+import {SanityDocumentLike} from 'sanity'
+import get from 'lodash/get'
+
+export const getLanguageParams = (
+  select: Record<string, string> | undefined,
+  document: SanityDocumentLike | undefined
+): Record<string, unknown> => {
+  if (!select || !document) {
+    return {}
+  }
+
+  const selection: Record<string, string> = select || {}
+  const selectedValue: Record<string, unknown> = {}
+  for (const [key, path] of Object.entries(selection)) {
+    let value = get(document, path)
+    if (Array.isArray(value)) {
+      // If there are references in the array, ensure they have `_ref` set, otherwise they are considered empty and can safely be ignored
+      value = value.filter((item) =>
+        typeof item === 'object' ? item?._type !== 'reference' || '_ref' in item : true
+      )
+    }
+    selectedValue[key] = value
+  }
+
+  return selectedValue
+}