@sanity/assist 1.2.14 → 1.2.15-lang.2

package/src/fieldActions/assistFieldActions.tsx

@@ -3,6 +3,7 @@ import {
   DocumentFieldActionGroup,
   DocumentFieldActionItem,
   ObjectSchemaType,
+  typed,
   useCurrentUser,
 } from 'sanity'
 import {ControlsIcon, SparklesIcon} from '@sanity/icons'
@@ -24,6 +25,7 @@ import {generateCaptionsActions} from './generateCaptionActions'
 import {useDocumentPane} from 'sanity/desk'
 import {useSelectedField, useTypePath} from '../assistInspector/helpers'
 import {isSchemaAssistEnabled} from '../helpers/assistSupported'
+import {translateActions, TranslateProps} from './translateActions'
 
 function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
   return node
@@ -47,6 +49,7 @@ export const assistFieldActions: DocumentFieldAction = {
       documentSchemaType,
       documentId,
       selectedPath,
+      assistableDocumentId,
     } =
       // document field actions do not have access to the document context
       // conditional hook _should_ be safe here since the logical path will be stable
@@ -89,7 +92,13 @@ export const assistFieldActions: DocumentFieldAction = {
     const isSelected = isInspectorOpen && isPathSelected
 
     const imageCaptionAction = generateCaptionsActions.useAction(props)
-
+    const translateAction = translateActions.useAction(
+      typed<TranslateProps>({
+        ...props,
+        documentId: assistableDocumentId,
+        documentIsAssistable,
+      })
+    )
     const manageInstructions = useCallback(
       () =>
         isSelected
@@ -134,7 +143,7 @@ export const assistFieldActions: DocumentFieldAction = {
     )
 
     const runInstructionsGroup = useMemo(() => {
-      return instructions?.length || imageCaptionAction
+      return instructions?.length || imageCaptionAction || translateAction
         ? node({
             type: 'group',
             icon: () => null,
@@ -151,7 +160,7 @@ export const assistFieldActions: DocumentFieldAction = {
                 })
               ),
               imageCaptionAction,
-            ].filter(Boolean),
+            ].filter((a): a is DocumentFieldActionItem => !!a),
             expanded: true,
           })
         : undefined
@@ -163,6 +172,7 @@ export const assistFieldActions: DocumentFieldAction = {
       documentIsNew,
       assistSupported,
       imageCaptionAction,
+      translateAction,
     ])
 
     const instructionsLength = instructions?.length || 0
@@ -185,12 +195,14 @@ export const assistFieldActions: DocumentFieldAction = {
           type: 'group',
           icon: SparklesIcon,
           title: pluginTitleShort,
-          children: [runInstructionsGroup, assistSupported && manageInstructionsItem].filter(
-            (c): c is DocumentFieldActionItem | DocumentFieldActionGroup => !!c
-          ),
+          children: [
+            runInstructionsGroup,
+            translateAction,
+            assistSupported && manageInstructionsItem,
+          ].filter((c): c is DocumentFieldActionItem | DocumentFieldActionGroup => !!c),
           expanded: false,
           renderAsButton: true,
-          hidden: !assistSupported && !imageCaptionAction,
+          hidden: !assistSupported && !imageCaptionAction && !translateAction,
         }),
       [
         //documentIsNew,
@@ -198,6 +210,7 @@ export const assistFieldActions: DocumentFieldAction = {
         manageInstructionsItem,
         assistSupported,
         imageCaptionAction,
+        translateAction,
       ]
     )
 
@@ -216,7 +229,7 @@ export const assistFieldActions: DocumentFieldAction = {
     )
 
     // If there are no instructions, we don't want to render the group
-    if (instructionsLength === 0 && !imageCaptionAction) {
+    if (instructionsLength === 0 && !imageCaptionAction && !translateAction) {
       return emptyAction
     }
 

package/src/fieldActions/translateActions.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import {
+  DocumentFieldAction,
+  DocumentFieldActionGroup,
+  DocumentFieldActionItem,
+  DocumentFieldActionProps,
+  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'
+import {useDraftDelayedTask} from '../assistDocument/RequestRunInstructionProvider'
+import {getLanguageParams} from '../translate/getLanguageParams'
+
+function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
+  return node
+}
+
+export type TranslateProps = DocumentFieldActionProps & {documentIsAssistable?: boolean}
+export const translateActions: DocumentFieldAction = {
+  name: 'sanity-assist-translate',
+  useAction(props: TranslateProps) {
+    const {config} = useAiAssistanceConfig()
+    const apiClient = useApiClient(config?.__customApiClient)
+
+    const isDocumentLevel = props.path.length === 0
+    const {schemaType, documentId, documentIsAssistable} = props
+
+    const fieldTransEnabled = config.translate?.field?.documentTypes?.includes(schemaType.name)
+    const docTransTypes = config.translate?.document?.documentTypes
+    const documentTranslationEnabled =
+      isDocumentLevel &&
+      ((!docTransTypes && isAssistSupported(schemaType)) ||
+        docTransTypes?.includes(schemaType.name))
+
+    // these checks are stable (ie, does not change after mount), so not breaking rules of hooks
+    if (documentTranslationEnabled || fieldTransEnabled) {
+      const {value: documentValue, onChange: documentOnChange} = useDocumentPane()
+      const docRef = useRef(documentValue)
+
+      const translationApi = useTranslate(apiClient)
+      const translate = useDraftDelayedTask({
+        documentOnChange,
+        isDocAssistable: documentIsAssistable ?? false,
+        task: translationApi.translate,
+      })
+      docRef.current = documentValue
+      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 && documentTranslationEnabled
+            ? node({
+                type: 'action',
+                icon: translationApi.loading
+                  ? () => (
+                      <Box style={{height: 17}}>
+                        <Spinner style={{transform: 'translateY(6px)'}} />
+                      </Box>
+                    )
+                  : TranslateIcon,
+                title: `Translate document`,
+                onAction: () => {
+                  if (translationApi.loading || !languagePath || !documentId) {
+                    return
+                  }
+                  translate({languagePath, documentId: documentId ?? ''})
+                },
+                renderAsButton: true,
+                disabled: translationApi.loading,
+              })
+            : undefined,
+        [languagePath, translate, documentId, translationApi.loading, documentTranslationEnabled]
+      )
+
+      const fieldTranslate = useFieldTranslation()
+      const openFieldTranslation = useDraftDelayedTask({
+        documentOnChange,
+        isDocAssistable: documentIsAssistable ?? false,
+        task: fieldTranslate.openFieldTranslation,
+      })
+
+      const translateFieldsAction = useMemo(
+        () =>
+          fieldTransEnabled
+            ? node({
+                type: 'action',
+                icon: fieldTranslate.translationLoading
+                  ? () => (
+                      <Box style={{height: 17}}>
+                        <Spinner style={{transform: 'translateY(6px)'}} />
+                      </Box>
+                    )
+                  : TranslateIcon,
+                title: `Translate fields`,
+                onAction: () => {
+                  if (fieldTranslate.translationLoading || !documentId) {
+                    return
+                  }
+                  openFieldTranslation({
+                    document: docRef.current,
+                    documentSchema: schemaType as ObjectSchemaType,
+                  })
+                },
+                renderAsButton: true,
+                disabled: fieldTranslate.translationLoading,
+              })
+            : undefined,
+        [
+          openFieldTranslation,
+          schemaType,
+          documentId,
+          fieldTranslate.translationLoading,
+          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) => {

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.ts

@@ -2,6 +2,7 @@ import {
   ArraySchemaType,
   ImageOptions,
   ObjectSchemaType,
+  ReferenceOptions,
   ReferenceSchemaType,
   Schema,
   SchemaType,
@@ -78,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,267 @@
+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: (args: {
+    document: SanityDocumentLike
+    documentSchema: ObjectSchemaType
+  }) => void
+  translationLoading: boolean
+  //loadLanguages: (document: SanityDocumentLike, documentSchema: ObjectSchemaType) => void
+}
+
+export const FieldTranslationContext = createContext<FieldTranslationContextValue>({
+  openFieldTranslation: () => {},
+  translationLoading: false,
+  //loadLanguages: () => {},
+})
+
+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 openFieldTranslation = useCallback(
+    async ({
+      document,
+      documentSchema,
+    }: {
+      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)
+      }
+    },
+    [selectFromLanguage, config, languageClient]
+  )
+
+  const contextValue: FieldTranslationContextValue = useMemo(() => {
+    return {
+      openFieldTranslation,
+      translationLoading: false,
+    }
+  }, [openFieldTranslation])
+
+  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
+}