@sanity/assist 1.2.15 → 2.0.0

package/src/schemas/serialize/serializeSchema.ts

@@ -1,21 +1,24 @@
 import {
   ArraySchemaType,
   ImageOptions,
+  isArraySchemaType,
   ObjectSchemaType,
+  ReferenceOptions,
   ReferenceSchemaType,
   Schema,
   SchemaType,
   typed,
 } from 'sanity'
 import {
+  assistSchemaIdPrefix,
   assistSerializedFieldTypeName,
   assistSerializedTypeName,
   SerializedSchemaMember,
   SerializedSchemaType,
-  assistSchemaIdPrefix,
 } from '../../types'
 import {hiddenTypes} from './schemaUtils'
 import {isAssistSupported} from '../../helpers/assistSupported'
+import {isType} from '../../helpers/typeUtils'
 
 interface Options {
   leanFormat?: boolean
@@ -31,7 +34,6 @@ export function serializeSchema(schema: Schema, options?: Options): SerializedSc
     .filter((t): t is SchemaType => !!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) => {
       if ('to' in t && t.to && !t.to.length) {
@@ -78,13 +80,12 @@ function getBaseFields(
   typeName: string,
   options: Options | undefined
 ) {
-  const imagePromptField = (type.options as ImageOptions)?.imagePromptField
+  const schemaOptions: SerializedSchemaType['options'] = removeUndef({
+    imagePromptField: (type.options as ImageOptions)?.aiAssist?.imageInstructionField,
+    embeddingsIndex: (type.options as ReferenceOptions)?.aiAssist?.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}`
@@ -99,6 +100,22 @@ function getBaseFields(
       'fields' in type && inlineTypes.includes(typeName)
         ? serializeFields(schema, type, options)
         : undefined,
+    annotations:
+      typeName === 'block' && 'fields' in type
+        ? serializeAnnotations(type, schema, options)
+        : undefined,
+    inlineOf:
+      typeName === 'block' && 'fields' in type
+        ? serializeInlineOf(type, schema, options)
+        : undefined,
+    hidden:
+      typeof type.hidden === 'function' ? ('function' as const) : type.hidden ? true : undefined,
+    readOnly:
+      typeof type.readOnly === 'function'
+        ? ('function' as const)
+        : type.readOnly
+        ? true
+        : undefined,
   })
 }
 
@@ -107,10 +124,27 @@ function serializeFields(
   schemaType: ObjectSchemaType,
   options: Options | undefined
 ) {
-  return schemaType.fields
+  const fields = schemaType.fieldsets
+    ? schemaType.fieldsets.flatMap((fs) =>
+        fs.single
+          ? fs.field
+          : fs.fields.map((f) => ({
+              ...f,
+              type: {
+                ...f.type,
+                // if fieldset is (conditionally) hidden, the field must be considered the same way
+                // ie, if the field does not show up in conditionalMembers, it is hidden
+                // regardless of weather or not it is the field function or the fieldset function that hides it
+                hidden:
+                  typeof fs.hidden === 'function' ? fs.hidden : fs.hidden ? true : f.type.hidden,
+              },
+            }))
+      )
+    : schemaType.fields
+
+  return fields
     .filter((f) => !['sanity.imageHotspot', 'sanity.imageCrop'].includes(f.type?.name ?? ''))
     .filter((f) => isAssistSupported(f.type))
-    .filter((f) => !f.type.hidden && !f.type.readOnly)
     .map((field) => serializeMember(schema, field.type, field.name, options))
 }
 
@@ -131,6 +165,39 @@ function serializeMember(
   })
 }
 
+function serializeInlineOf(
+  blockSchemaType: ObjectSchemaType,
+  schema: Schema,
+  options: Options | undefined
+): SerializedSchemaMember[] | undefined {
+  const childrenField = blockSchemaType.fields.find((f) => f.name === 'children')
+  const childrenType = childrenField?.type
+  if (!childrenType || !isArraySchemaType(childrenType)) {
+    return undefined
+  }
+  return arrayOf(
+    {
+      ...childrenType,
+      of: childrenType.of.filter((t) => !isType(t, 'span')),
+    },
+    schema,
+    options
+  )
+}
+
+function serializeAnnotations(
+  blockSchemaType: ObjectSchemaType,
+  schema: Schema,
+  options: Options | undefined
+): SerializedSchemaMember[] | undefined {
+  const markDefs = blockSchemaType.fields.find((f) => f.name === 'markDefs')
+  const marksType = markDefs?.type
+  if (!marksType || !isArraySchemaType(marksType)) {
+    return undefined
+  }
+  return arrayOf(marksType, schema, options)
+}
+
 function arrayOf(
   arrayType: ArraySchemaType,
   schema: Schema,

package/src/schemas/typeDefExtensions.ts

@@ -1,8 +1,14 @@
 /* eslint-disable no-unused-vars */
 export interface AssistOptions {
-  aiWritingAssistance?: {
+  aiAssist?: {
     /** Set to true to disable assistance for this field or type */
     exclude?: boolean
+
+    /**
+     * Set to true to add translation field-action to the field.
+     * Only has an effect in document types configured for document or field level translations.
+     */
+    translateAction?: boolean
   }
 }
 
@@ -16,13 +22,91 @@ declare module 'sanity' {
   interface DocumentOptions extends AssistOptions {}
   interface FileOptions extends AssistOptions {}
   interface GeopointOptions extends AssistOptions {}
-  interface ImageOptions extends AssistOptions {
-    imagePromptField?: string
-    captionField?: string
+  interface ImageOptions {
+    aiAssist?: AssistOptions['aiAssist'] & {
+      /**
+       * When set, an image will be created whenever the `imageInstructionField` is written to by
+       * an AI Assist instruction.
+       *
+       * The value output by AI Assist will be use as an image prompt for an generative image AI.
+       *
+       * This means that instructions directly for the field or instructions that visit the field when running,
+       * will result in the image being changed.
+       *
+       * `imageInstructionField` must be a child-path relative to the image field, ie:
+       * * field
+       * * path.to.field
+       *
+       * ### Example
+       * ```ts
+       * defineType({
+       *   type: 'image',
+       *   name: 'articleImage',
+       *   fields: [
+       *     defineField({
+       *       type: 'text',
+       *       name: 'imagePrompt',
+       *       title: 'Image prompt',
+       *       rows: 2,
+       *     }),
+       *   ],
+       *   options: {
+       *      aiAssist: {
+       *        imageInstructionField: 'imagePrompt',
+       *     }
+       *   },
+       * })
+       * ```
+       */
+      imageInstructionField?: string
+
+      /**
+       * When set, an image description will be automatically created for the image.
+       *
+       * `imageDescriptionField` must be a child-path relative to the image field, ie:
+       * * field
+       * * path.to.field
+       *
+       * Whenever the image asset for the field is changed in the Studio,
+       * an image description is generated and set into the `imageDescriptionField`.
+       *
+       * ### Example
+       * ```ts
+       * defineType({
+       *   type: 'image',
+       *   name: 'articleImage',
+       *   fields: [
+       *     defineField({
+       *       type: 'string',
+       *       name: 'altText',
+       *       title: 'Alt text',
+       *     }),
+       *   ],
+       *   options: {
+       *      aiAssist: {
+       *        imageDescriptionField: 'altText',
+       *     }
+       *   },
+       * })
+       * ```
+       */
+      imageDescriptionField?: string
+    }
   }
   interface NumberOptions extends AssistOptions {}
   interface ObjectOptions extends AssistOptions {}
-  interface ReferenceBaseOptions extends AssistOptions {}
+  interface ReferenceBaseOptions {
+    aiAssist?: {
+      /** 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,360 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
+import {ObjectSchemaType, Path, pathToString, 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,
+  FieldLanguageMap,
+  getDocumentMembersFlat,
+  getFieldLanguageMap,
+} from './paths'
+import {PlayIcon} from '@sanity/icons'
+import {Language} from './types'
+import {getLanguageParams} from './getLanguageParams'
+import {getPreferredToFieldLanguages, setPreferredToFieldLanguages} from './languageStore'
+import {ConditionalMemberState} from '../helpers/conditionalMembers'
+
+interface FieldTranslationParams {
+  document: SanityDocumentLike
+  documentSchema: ObjectSchemaType
+  translatePath: Path
+  conditionalMembers: ConditionalMemberState[]
+}
+
+export interface FieldTranslationContextValue {
+  openFieldTranslation: (args: FieldTranslationParams) => void
+  translationLoading: boolean
+}
+
+export const FieldTranslationContext = createContext<FieldTranslationContextValue>({
+  openFieldTranslation: () => {},
+  translationLoading: false,
+})
+
+export function useFieldTranslation() {
+  return useContext(FieldTranslationContext)
+}
+
+function hasValuesToTranslate(
+  fieldLanguageMaps: FieldLanguageMap[] | undefined,
+  fromLanguage: Language | undefined,
+  basePath: Path
+) {
+  return fieldLanguageMaps?.some(
+    (map) =>
+      map.inputLanguageId === fromLanguage?.id &&
+      map.inputPath &&
+      pathToString(map.inputPath).startsWith(pathToString(basePath))
+  )
+}
+
+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 [fieldTranslationParams, setFieldTranslationParams] = useState<
+    FieldTranslationParams | undefined
+  >()
+  const [languages, setLanguages] = useState<Language[] | undefined>()
+  const [fromLanguage, setFromLanguage] = useState<Language | undefined>(undefined)
+  const [toLanguages, setToLanguages] = useState<Language[] | undefined>(undefined)
+  const [fieldLanguageMaps, setFieldLanguageMaps] = useState<FieldLanguageMap[] | undefined>()
+
+  const close = useCallback(() => {
+    setDialogOpen(false)
+    setLanguages(undefined)
+    setFieldTranslationParams(undefined)
+  }, [])
+  const languageClient = useClient({apiVersion: config?.apiVersion ?? '2022-11-27'})
+  const documentId = fieldTranslationParams?.document?._id
+  const id = useId()
+
+  const selectFromLanguage = useCallback(
+    (
+      from: Language,
+      languages: Language[] | undefined,
+      params: FieldTranslationParams | undefined
+    ) => {
+      const {document, documentSchema} = params ?? {}
+      setFromLanguage(from)
+      if (!document || !documentSchema || !params || !languages) {
+        setFieldLanguageMaps(undefined)
+        return
+      }
+
+      const preferred = getPreferredToFieldLanguages(from.id)
+      const allToLanguages = languages.filter((l) => l.id !== from?.id)
+      const filteredToLanguages = allToLanguages.filter(
+        (l) => !preferred.length || preferred.includes(l.id)
+      )
+
+      setToLanguages(filteredToLanguages)
+      const fromId = from?.id
+      const allToIds = allToLanguages?.map((l) => l.id) ?? []
+      const docMembers = getDocumentMembersFlat(document, documentSchema)
+      if (fromId && allToIds?.length) {
+        const transMap = getFieldLanguageMap(
+          documentSchema,
+          docMembers,
+          fromId,
+          allToIds.filter((toId) => fromId !== toId),
+          config?.translationOutputs ?? defaultLanguageOutputs
+        )
+        setFieldLanguageMaps(transMap)
+      } else {
+        setFieldLanguageMaps(undefined)
+      }
+    },
+    [config]
+  )
+
+  const toggleToLanguage = useCallback(
+    (
+      toggledLang: Language,
+      toLanguages: Language[] | undefined,
+      languages: Language[] | undefined
+    ) => {
+      if (!languages || !fromLanguage) {
+        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)
+      setPreferredToFieldLanguages(
+        fromLanguage.id,
+        newToLangs.map((l) => l.id)
+      )
+    },
+    [fromLanguage]
+  )
+
+  const openFieldTranslation = useCallback(
+    async (params: FieldTranslationParams) => {
+      setDialogOpen(true)
+      const languageParams = getLanguageParams(config?.selectLanguageParams, params.document)
+      const languages: Language[] | undefined = await (typeof config?.languages === 'function'
+        ? config?.languages(languageClient, languageParams)
+        : Promise.resolve(config?.languages))
+      setLanguages(languages)
+      setFieldTranslationParams(params)
+      const fromLanguage = languages?.[0]
+      if (fromLanguage) {
+        selectFromLanguage(fromLanguage, languages, params)
+      } 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 ||
+    !fieldLanguageMaps?.length ||
+    !documentId ||
+    !hasValuesToTranslate(fieldLanguageMaps, fromLanguage, fieldTranslationParams.translatePath)
+
+  const onRunTranslation = useCallback(() => {
+    const translatePath = fieldTranslationParams?.translatePath
+    if (fieldLanguageMaps && documentId && translatePath) {
+      runTranslate({
+        documentId,
+        translatePath: translatePath,
+        fieldLanguageMap: fieldLanguageMaps.map((map) => ({
+          ...map,
+          // eslint-disable-next-line max-nested-callbacks
+          outputs: map.outputs.filter((out) => !!toLanguages?.find((l) => l.id === out.id)),
+        })),
+        conditionalMembers: fieldTranslationParams?.conditionalMembers,
+      })
+    }
+    close()
+  }, [
+    fieldLanguageMaps,
+    documentId,
+    runTranslate,
+    close,
+    toLanguages,
+    fieldTranslationParams?.translatePath,
+    fieldTranslationParams?.conditionalMembers,
+  ])
+
+  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>There is nothing to translate in the selected from-language.</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((radioLanguage) => (
+                  <FromLanguageRadio
+                    key={radioLanguage.id}
+                    {...{
+                      radioLanguage,
+                      fromLanguage,
+                      selectFromLanguage,
+                      languages,
+                      fieldTranslationParams,
+                    }}
+                  />
+                ))}
+              </Stack>
+
+              <Stack space={2}>
+                <Box marginBottom={2}>
+                  <Text weight="semibold">To</Text>
+                </Box>
+                {languages.map((checkboxLanguage) => (
+                  <ToLanguageCheckbox
+                    key={checkboxLanguage.id}
+                    {...{checkboxLanguage, fromLanguage, toLanguages, toggleToLanguage, languages}}
+                  />
+                ))}
+              </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>
+  )
+}
+
+function ToLanguageCheckbox(props: {
+  checkboxLanguage: Language
+  fromLanguage: Language | undefined
+  toLanguages: Language[] | undefined
+  toggleToLanguage: (
+    toggledLang: Language,
+    toLanguages: Language[] | undefined,
+    languages: Language[] | undefined
+  ) => void
+  languages: Language[]
+}) {
+  const {checkboxLanguage, fromLanguage, toLanguages, toggleToLanguage, languages} = props
+  const langId = checkboxLanguage.id
+  const onChange = useCallback(
+    () => toggleToLanguage(checkboxLanguage, toLanguages, languages),
+    [toggleToLanguage, checkboxLanguage, toLanguages, languages]
+  )
+  return (
+    <Flex
+      key={langId}
+      gap={3}
+      align="center"
+      as={'label'}
+      style={langId === fromLanguage?.id ? {opacity: 0.5} : undefined}
+    >
+      <Checkbox
+        name="toLang"
+        value={langId}
+        checked={langId !== fromLanguage?.id && !!toLanguages?.find((tl) => tl.id === langId)}
+        onChange={onChange}
+        disabled={langId === fromLanguage?.id}
+      />
+      <Text muted={langId === fromLanguage?.id}>{checkboxLanguage.title ?? langId}</Text>
+    </Flex>
+  )
+}
+
+function FromLanguageRadio(props: {
+  radioLanguage: Language
+  fromLanguage: Language | undefined
+  selectFromLanguage: (
+    from: Language,
+    languages: Language[] | undefined,
+    params: FieldTranslationParams | undefined
+  ) => void
+  languages: Language[] | undefined
+  fieldTranslationParams: FieldTranslationParams | undefined
+}) {
+  const {languages, radioLanguage, selectFromLanguage, fromLanguage, fieldTranslationParams} = props
+  const langId = radioLanguage.id
+
+  const onChange = useCallback(
+    () => selectFromLanguage(radioLanguage, languages, fieldTranslationParams),
+    [selectFromLanguage, radioLanguage, languages, fieldTranslationParams]
+  )
+  return (
+    <Flex key={langId} gap={3} align="center" as={'label'}>
+      <Radio
+        name="fromLang"
+        value={langId}
+        checked={langId === fromLanguage?.id}
+        onChange={onChange}
+      />
+      <Text>{radioLanguage.title ?? radioLanguage.id}</Text>
+    </Flex>
+  )
+}

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
+}

package/src/translate/languageStore.ts

@@ -0,0 +1,18 @@
+export const toFieldLanguagesKeyPrefix = 'sanityStudio:assist:field-languages:from:'
+
+export function getPreferredToFieldLanguages(fromLanguageId: string): string[] {
+  if (typeof localStorage === 'undefined') {
+    return []
+  }
+
+  const value = localStorage.getItem(`${toFieldLanguagesKeyPrefix}${fromLanguageId}`)
+  return value ? (JSON.parse(value) as string[]) : []
+}
+
+export function setPreferredToFieldLanguages(fromLanguageId: string, languageIds: string[]) {
+  if (typeof localStorage === 'undefined') {
+    return
+  }
+
+  localStorage.setItem(`${toFieldLanguagesKeyPrefix}${fromLanguageId}`, JSON.stringify(languageIds))
+}