@sanity/assist 1.2.14 → 1.2.15-lang.10

package/src/translate/FieldTranslationProvider.tsx

@@ -0,0 +1,306 @@
+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,
+  ])
+
+  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((l) => {
+                  return (
+                    <Flex key={l.id} gap={3} align="center" as={'label'}>
+                      <Radio
+                        name="fromLang"
+                        value={l.id}
+                        checked={l.id === fromLanguage?.id}
+                        onChange={() => selectFromLanguage(l, languages, fieldTranslationParams)}
+                      />
+                      <Text>{l.title ?? l.id}</Text>
+                    </Flex>
+                  )
+                })}
+              </Stack>
+
+              <Stack space={2}>
+                <Box marginBottom={2}>
+                  <Text weight="semibold">To</Text>
+                </Box>
+                {languages.map((l) => (
+                  <Flex
+                    key={l.id}
+                    gap={3}
+                    align="center"
+                    as={'label'}
+                    style={l.id === fromLanguage?.id ? {opacity: 0.5} : undefined}
+                  >
+                    <Checkbox
+                      name="toLang"
+                      value={l.id}
+                      checked={
+                        l.id !== fromLanguage?.id && !!toLanguages?.find((tl) => tl.id === l.id)
+                      }
+                      onChange={() => toggleToLanguage(l, toLanguages, languages)}
+                      disabled={l.id === fromLanguage?.id}
+                    />
+                    <Text muted={l.id === fromLanguage?.id}>{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
+}

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

package/src/translate/paths.test.ts

@@ -0,0 +1,133 @@
+import {describe, expect, test} from 'vitest'
+import {Schema} from '@sanity/schema'
+import {defineType, ObjectSchemaType, pathToString, SanityDocumentLike, typed} from 'sanity'
+import {
+  defaultLanguageOutputs,
+  FieldLanguageMap,
+  getDocumentMembersFlat,
+  getFieldLanguageMap,
+} from './paths'
+
+describe('paths', () => {
+  test('should return internationalizedArrayString paths and find translation mappings', () => {
+    const docSchema: ObjectSchemaType = Schema.compile({
+      name: 'test',
+      types: [
+        defineType({
+          type: 'document',
+          name: 'article',
+          fields: [
+            {type: 'string', name: 'title'},
+            {
+              type: 'object',
+              name: 'localeTitle',
+              fields: [
+                {type: 'string', name: 'en'},
+                {type: 'string', name: 'no'},
+              ],
+            },
+            {
+              type: 'array',
+              name: 'translations',
+              of: [
+                {
+                  type: 'object',
+                  name: 'internationalizedArrayString',
+                  fields: [{type: 'string', name: 'value'}],
+                },
+              ],
+            },
+          ],
+        }),
+      ],
+    }).get('article')
+
+    const doc: SanityDocumentLike = {
+      _id: 'na',
+      _type: 'article',
+      title: 'some title',
+      localeTitle: {
+        en: 'en string',
+      },
+      translations: [
+        {
+          _type: 'internationalizedArrayString',
+          _key: 'en',
+          value: 'some string',
+        },
+      ],
+    }
+
+    const members = getDocumentMembersFlat(doc, docSchema)
+    expect(members.map((p) => pathToString(p.path))).toEqual([
+      'title',
+      'localeTitle',
+      'localeTitle.en',
+      // this path has no value in the document, so are not included
+      //'localeTitle.no',
+      'translations',
+      'translations[_key=="en"]',
+      'translations[_key=="en"].value',
+      // these path has no value in the document, so are not included
+      //'translations[_key=="nb"]',
+      //'translations[_key=="nb"].value',
+    ])
+
+    const transMap = getFieldLanguageMap(docSchema, members, 'en', ['nb'], defaultLanguageOutputs)
+
+    expect(transMap).toEqual(
+      typed<FieldLanguageMap[]>([
+        {
+          inputLanguageId: 'en',
+          inputPath: ['translations', {_key: 'en'}],
+          outputs: [{id: 'nb', outputPath: ['translations', {_key: 'nb'}]}],
+        },
+      ])
+    )
+  })
+
+  test('should use first type in array when array item is missing _type', () => {
+    const docSchema: ObjectSchemaType = Schema.compile({
+      name: 'test',
+      types: [
+        defineType({
+          type: 'document',
+          name: 'article',
+          fields: [
+            {
+              type: 'array',
+              name: 'translations',
+              of: [
+                {
+                  type: 'object',
+                  name: 'internationalizedArrayString',
+                  fields: [{type: 'string', name: 'value'}],
+                },
+              ],
+            },
+          ],
+        }),
+      ],
+    }).get('article')
+
+    const doc: SanityDocumentLike = {
+      _id: 'na',
+      _type: 'article',
+      translations: [
+        {
+          //assume type is missing in the data for some reason
+          //_type: 'internationalizedArrayString',
+          _key: 'en',
+          value: 'some string',
+        },
+      ],
+    }
+
+    const members = getDocumentMembersFlat(doc, docSchema)
+    expect(members.map((p) => pathToString(p.path))).toEqual([
+      'translations',
+      'translations[_key=="en"]',
+      'translations[_key=="en"].value',
+    ])
+  })
+})

package/src/translate/paths.ts

@@ -0,0 +1,175 @@
+import {
+  isDocumentSchemaType,
+  isKeySegment,
+  ObjectSchemaType,
+  Path,
+  pathToString,
+  SanityDocumentLike,
+} from 'sanity'
+import {extractWithPath} from '@sanity/mutator'
+import {DocumentMember, TranslationOutput, TranslationOutputsFunction} from './types'
+
+export interface FieldLanguageMap {
+  inputLanguageId: string
+  inputPath: Path
+  outputs: TranslationOutput[]
+}
+
+const MAX_DEPTH = 6
+
+export function getDocumentMembersFlat(doc: SanityDocumentLike, schemaType: ObjectSchemaType) {
+  if (!isDocumentSchemaType(schemaType)) {
+    console.error(`Schema type is not a document`)
+    return []
+  }
+
+  return extractPaths(doc, schemaType, [], MAX_DEPTH)
+}
+
+function extractPaths(
+  doc: SanityDocumentLike,
+  schemaType: ObjectSchemaType,
+  path: Path,
+  maxDepth: number
+): DocumentMember[] {
+  if (path.length >= maxDepth) {
+    return []
+  }
+
+  return schemaType.fields.reduce<DocumentMember[]>((acc, field) => {
+    const fieldPath = [...path, field.name]
+    const fieldSchema = field.type
+    const {value} = extractWithPath(pathToString(fieldPath), doc)[0] ?? {}
+    if (!value) {
+      return acc
+    }
+
+    const thisFieldWithPath: DocumentMember = {
+      path: fieldPath,
+      name: field.name,
+      schemaType: fieldSchema,
+      value,
+    }
+
+    if (fieldSchema.jsonType === 'object') {
+      const innerFields = extractPaths(doc, fieldSchema, fieldPath, maxDepth)
+
+      return [...acc, thisFieldWithPath, ...innerFields]
+    } else if (
+      fieldSchema.jsonType === 'array' &&
+      fieldSchema.of.length &&
+      fieldSchema.of.some((item) => 'fields' in item)
+    ) {
+      const {value: arrayValue} = extractWithPath(pathToString(fieldPath), doc)[0] ?? {}
+
+      let arrayPaths: DocumentMember[] = []
+      if ((arrayValue as any)?.length) {
+        for (const item of arrayValue as any[]) {
+          const itemPath = [...fieldPath, {_key: item._key}]
+          let itemSchema = fieldSchema.of.find((t) => t.name === item._type)
+          if (!item._type) {
+            itemSchema = fieldSchema.of[0]
+            console.warn(
+              'Array item is missing _type - using the first defined type in the array.of schema',
+              {
+                itemPath,
+                item,
+                itemSchema,
+              }
+            )
+          }
+          if (item._key && itemSchema) {
+            const innerFields = extractPaths(
+              doc,
+              itemSchema as ObjectSchemaType,
+              itemPath,
+              maxDepth
+            )
+            const arrayMember = {
+              path: itemPath,
+              name: item._key,
+              schemaType: itemSchema,
+              value: item,
+            }
+            arrayPaths = [...arrayPaths, arrayMember, ...innerFields]
+          }
+        }
+      }
+
+      return [...acc, thisFieldWithPath, ...arrayPaths]
+    }
+
+    return [...acc, thisFieldWithPath]
+  }, [])
+}
+
+/**
+ * Default implementation for plugin config `translate.field.translationOutputs`
+ *
+ * @see FieldTranslationConfig#translationOutputs
+ */
+export const defaultLanguageOutputs: TranslationOutputsFunction = function (
+  member,
+  enclosingType,
+  translateFromLanguageId,
+  translateToLanguageIds
+) {
+  if (
+    member.schemaType.jsonType === 'object' &&
+    member.schemaType.name.startsWith('internationalizedArray')
+  ) {
+    const pathEnd = member.path.slice(-1)
+
+    const language = isKeySegment(pathEnd[0]) ? pathEnd[0]._key : null
+    return language === translateFromLanguageId
+      ? translateToLanguageIds.map((translateToId) => ({
+          id: translateToId,
+          outputPath: [...member.path.slice(0, -1), {_key: translateToId}],
+        }))
+      : undefined
+  }
+
+  if (enclosingType.jsonType === 'object' && enclosingType.name.startsWith('locale')) {
+    return translateFromLanguageId === member.name
+      ? translateToLanguageIds.map((translateToId) => ({
+          id: translateToId,
+          outputPath: [...member.path.slice(0, -1), translateToId],
+        }))
+      : undefined
+  }
+
+  return undefined
+}
+
+export function getFieldLanguageMap(
+  documentSchema: ObjectSchemaType,
+  documentMembers: DocumentMember[],
+  translateFromLanguageId: string,
+  outputLanguageIds: string[],
+  langFn: TranslationOutputsFunction
+): FieldLanguageMap[] {
+  const translationMaps: FieldLanguageMap[] = []
+  for (const member of documentMembers) {
+    const parentPath = member.path.slice(0, -1)
+    const enclosingType =
+      documentMembers.find((m) => pathToString(m.path) === pathToString(parentPath))?.schemaType ??
+      documentSchema
+
+    const translations = langFn(
+      member,
+      enclosingType,
+      translateFromLanguageId,
+      outputLanguageIds
+    )?.filter((translation) => translation.id !== translateFromLanguageId)
+
+    if (translations) {
+      translationMaps.push({
+        inputLanguageId: translateFromLanguageId,
+        inputPath: member.path,
+        outputs: translations,
+      })
+    }
+  }
+
+  return translationMaps
+}