@sanity/assist 1.2.13 → 1.2.15-lang.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/assist",
-  "version": "1.2.13",
+  "version": "1.2.15-lang.1",
   "description": "",
   "keywords": [
     "sanity",
@@ -54,28 +54,29 @@
     "release": "semantic-release"
   },
   "dependencies": {
-    "@sanity/icons": "^2.4.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.6.0",
+    "@sanity/ui": "^2.0.0-beta.17",
     "date-fns": "^2.30.0",
+    "lodash.get": "^4.4.2",
     "react-fast-compare": "^3.2.1",
     "react-is": "^18.2.0",
     "rxjs": "^7.8.0",
     "rxjs-exhaustmap-with-trailing": "^2.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.7.2",
-    "@commitlint/config-conventional": "^17.7.0",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@rollup/plugin-image": "^3.0.3",
     "@sanity/pkg-utils": "^2.4.10",
     "@sanity/plugin-kit": "^3.1.10",
-    "@sanity/semantic-release-preset": "^4.1.4",
-    "@types/react": "^18.2.27",
-    "@types/styled-components": "^5.1.28",
+    "@sanity/semantic-release-preset": "^4.1.6",
+    "@types/react": "^18.2.37",
+    "@types/styled-components": "^5.1.30",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "date-fns": "^2.30.0",
-    "eslint": "^8.51.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -84,17 +85,17 @@
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^4.4.0",
-    "sanity": "^3.19.1",
+    "rimraf": "^5.0.5",
+    "sanity": "^3.24.1",
     "semantic-release": "^21.1.2",
-    "styled-components": "^5.3.11",
-    "typescript": "^5.2.2",
+    "styled-components": "^6.1.1",
+    "typescript": "^5.3.3",
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "react": "^18",
     "sanity": "^3.16",
-    "styled-components": "^5.2"
+    "styled-components": "^5.2 || ^6.0.0"
   },
   "engines": {
     "node": ">=14"

package/src/_lib/form/DocumentForm.tsx

@@ -148,7 +148,7 @@ export function DocumentForm(
             readOnly={formState.readOnly}
             schemaType={formState.schemaType}
             validation={validation}
-            value={formState.value}
+            value={formState.value as any}
           />
         )
       ) : (

package/src/assistDocument/components/instruction/InstructionInput.tsx

@@ -8,14 +8,15 @@ export function InstructionInput(props: ObjectInputProps) {
     <Stack space={[4, 4, 4, 5]}>
       <NameField {...props} />
       <ShareField {...props} />
-      <PromptField {...props} />
+      <ObjectMember fieldName={'prompt'} {...props} />
+      <ObjectMember fieldName={'output'} {...props} />
     </Stack>
   )
 }
 
-function PromptField(props: ObjectInputProps) {
-  const promptMember = findFieldMember(props.members, 'prompt')
-  return promptMember ? <ObjectInputMember {...props} member={promptMember} /> : null
+function ObjectMember({fieldName, ...props}: ObjectInputProps & {fieldName: string}) {
+  const member = findFieldMember(props.members, fieldName)
+  return member ? <ObjectInputMember {...props} member={member} /> : null
 }
 
 const NONE: (FieldMember | FieldError)[] = []

package/src/assistDocument/components/instruction/InstructionOutputField.tsx

@@ -0,0 +1,45 @@
+import {
+  ArrayFieldProps,
+  ArraySchemaType,
+  isArrayOfObjectsSchemaType,
+  isObjectSchemaType,
+  ObjectSchemaType,
+} from 'sanity'
+import {useCallback, useContext, useState} from 'react'
+import {SelectedFieldContext} from '../SelectedFieldContext'
+
+export function InstructionOutputField(props: ArrayFieldProps) {
+  const {fieldSchema} = useContext(SelectedFieldContext) ?? {}
+
+  if (
+    !fieldSchema ||
+    !(isObjectSchemaType(fieldSchema) || isArrayOfObjectsSchemaType(fieldSchema))
+  ) {
+    return null
+  }
+
+  return (
+    <EnabledOutputField {...props} fieldSchema={fieldSchema}>
+      {props.children}
+    </EnabledOutputField>
+  )
+}
+
+function EnabledOutputField({
+  fieldSchema,
+  ...props
+}: ArrayFieldProps & {fieldSchema: ObjectSchemaType | ArraySchemaType<ObjectSchemaType>}) {
+  const [open, setOpen] = useState(!!props.value?.length)
+  const onExpand = useCallback(() => setOpen(true), [])
+  const onCollapse = useCallback(() => setOpen(false), [])
+
+  return props.renderDefault({
+    ...props,
+    collapsible: true,
+    onExpand,
+    onCollapse,
+    collapsed: !open,
+    level: 1,
+    title: isObjectSchemaType(fieldSchema) ? 'Allowed fields' : 'Allowed types',
+  })
+}

package/src/assistDocument/components/instruction/InstructionOutputInput.tsx

@@ -0,0 +1,205 @@
+import {
+  ArrayOfObjectsInputProps,
+  ArraySchemaType,
+  FormPatch,
+  insert,
+  isArrayOfObjectsSchemaType,
+  isObjectSchemaType,
+  ObjectSchemaType,
+  PatchEvent,
+  setIfMissing,
+  typed,
+  unset,
+} from 'sanity'
+import {useCallback, useContext, useEffect, useMemo} from 'react'
+import {SelectedFieldContext} from '../SelectedFieldContext'
+import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
+import {isType} from '../../../helpers/typeUtils'
+import {isAssistSupported} from '../../../helpers/assistSupported'
+import {OutputFieldItem, outputFieldTypeName, OutputTypeItem} from '../../../types'
+
+export function InstructionOutputInput(props: ArrayOfObjectsInputProps) {
+  const {fieldSchema} = useContext(SelectedFieldContext) ?? {}
+
+  if (!fieldSchema) {
+    return null
+  }
+
+  if (isObjectSchemaType(fieldSchema)) {
+    return <ObjectOutputInput {...props} fieldSchema={fieldSchema} />
+  }
+
+  if (isArrayOfObjectsSchemaType(fieldSchema)) {
+    return <ArrayOutputInput {...props} fieldSchema={fieldSchema} />
+  }
+  return null
+}
+
+function useEmptySelectAllValue(
+  value: (OutputTypeItem | OutputFieldItem)[],
+  allowedValues: {name: string}[],
+  onChange: (patch: FormPatch | FormPatch[] | PatchEvent) => void
+) {
+  useEffect(() => {
+    const validValues = value?.filter((v) =>
+      allowedValues.find(
+        (f) => f.name === (v._type === outputFieldTypeName ? v.relativePath : v.type)
+      )
+    )
+    const valueLength = value?.length ?? 0
+    const validLength = validValues?.length ?? 0
+    if ((!validLength && valueLength) || validLength >= allowedValues.length) {
+      // if we end up here, we consider this a "no selected fields/types" selections. This should render and behave as all values selected.
+      // we need this behaviour to accommodate new fields/types being added to the model, so they get visited by instructions without having to update the filter
+      // when things have been explicitly selected, we let the selection remain as is
+      onChange(PatchEvent.from([unset()]))
+    }
+  }, [allowedValues, value, onChange])
+}
+
+function ObjectOutputInput({
+  fieldSchema,
+  ...props
+}: ArrayOfObjectsInputProps & {fieldSchema: ObjectSchemaType}) {
+  const {value, onChange} = props
+
+  const fields = useMemo(
+    () => fieldSchema.fields.filter((field) => isAssistSupported(field.type)),
+    [fieldSchema.fields]
+  )
+
+  useEmptySelectAllValue(value as OutputTypeItem[], fields, onChange)
+
+  const onSelectChange = useCallback(
+    (checked: boolean, selectedValue: string) => {
+      if (checked) {
+        if (value?.length) {
+          onChange(PatchEvent.from(unset([{_key: selectedValue}])))
+        } else {
+          // we went from empty array to everything selected but one
+          const items = fields
+            .filter((f) => f.name !== selectedValue)
+            .map((field) =>
+              typed<OutputFieldItem>({
+                _key: field.name,
+                _type: 'sanity.assist.output.field',
+                relativePath: field.name,
+              })
+            )
+          onChange(PatchEvent.from([setIfMissing([]), insert(items, 'after', [-1])]))
+        }
+      } else {
+        const patchValue: OutputFieldItem = {
+          _key: selectedValue,
+          _type: 'sanity.assist.output.field',
+          relativePath: selectedValue,
+        }
+        onChange(PatchEvent.from([setIfMissing([]), insert([patchValue], 'after', [-1])]))
+      }
+    },
+    [onChange, value, fields]
+  )
+
+  return (
+    <Stack space={2}>
+      {fields.map((field) => {
+        return (
+          <Flex key={field.name} align="center" gap={2}>
+            <Selectable
+              value={field.name}
+              title={field.type.title ?? field.name}
+              arrayValue={value as OutputFieldItem[]}
+              onChange={onSelectChange}
+            />
+          </Flex>
+        )
+      })}
+    </Stack>
+  )
+}
+
+function ArrayOutputInput({
+  fieldSchema,
+  ...props
+}: ArrayOfObjectsInputProps & {fieldSchema: ArraySchemaType}) {
+  const {value, onChange} = props
+
+  const ofItems = useMemo(
+    () => fieldSchema.of.filter((itemType) => isAssistSupported(itemType)),
+    [fieldSchema.of]
+  )
+
+  useEmptySelectAllValue(value as OutputTypeItem[], ofItems, onChange)
+
+  const onSelectChange = useCallback(
+    (checked: boolean, selectedValue: string) => {
+      if (checked) {
+        if (value?.length) {
+          onChange(PatchEvent.from(unset([{_key: selectedValue}])))
+        } else {
+          // we went from empty array to everything selected but one
+          const items = ofItems
+            .filter((f) => f.name !== selectedValue)
+            .map((field) =>
+              typed<OutputTypeItem>({
+                _key: field.name,
+                _type: 'sanity.assist.output.type',
+                type: field.name,
+              })
+            )
+          onChange(PatchEvent.from([setIfMissing([]), insert(items, 'after', [-1])]))
+        }
+      } else {
+        const patchValue: OutputTypeItem = {
+          _key: selectedValue,
+          _type: 'sanity.assist.output.type',
+          type: selectedValue,
+        }
+        onChange(PatchEvent.from([setIfMissing([]), insert([patchValue], 'after', [-1])]))
+      }
+    },
+    [onChange, value, ofItems]
+  )
+  return (
+    <Stack space={2}>
+      {ofItems.map((itemType) => {
+        return (
+          <Flex key={itemType.name}>
+            <Selectable
+              value={itemType.name}
+              title={isType(itemType, 'block') ? 'Text' : itemType.title ?? itemType.name}
+              arrayValue={value as OutputTypeItem[] | undefined}
+              onChange={onSelectChange}
+            />
+          </Flex>
+        )
+      })}
+    </Stack>
+  )
+}
+
+function Selectable({
+  title,
+  arrayValue,
+  value,
+  onChange,
+}: {
+  title: string
+  value: string
+  arrayValue?: {_key: string}[]
+  onChange: (checked: boolean, value: string) => void
+}) {
+  const checked = !arrayValue?.length || !!arrayValue?.find((v) => v._key === value)
+  const handleChange = useCallback(() => onChange(checked, value), [onChange, checked, value])
+
+  return (
+    <Flex gap={2} align="flex-start">
+      <Checkbox checked={checked} onChange={handleChange} />
+      <Card marginTop={1} onClick={() => handleChange}>
+        <Text style={{cursor: 'default'}} size={1}>
+          {title}
+        </Text>
+      </Card>
+    </Flex>
+  )
+}

package/src/assistDocument/hooks/useStudioAssistDocument.ts

@@ -3,24 +3,14 @@ import {
   assistDocumentTypeName,
   AssistTasksStatus,
   assistTasksStatusTypeName,
-  FieldRef,
-  fieldReferenceTypeName,
   InstructionTask,
   StudioAssistDocument,
   StudioAssistField,
   StudioInstruction,
 } from '../../types'
-import {
-  ObjectSchemaType,
-  pathToString,
-  typed,
-  useClient,
-  useCurrentUser,
-  useValidationStatus,
-  ValidationMarker,
-} from 'sanity'
+import {ObjectSchemaType, typed, useClient, useCurrentUser} from 'sanity'
 import {useDocumentState} from './useDocumentState'
-import {assistDocumentId, assistTasksStatusId, publicId} from '../../helpers/ids'
+import {assistDocumentId, assistTasksStatusId} from '../../helpers/ids'
 import {maxHistoryVisibilityMs} from '../../constants'
 
 interface UseAssistDocumentProps {
@@ -37,7 +27,6 @@ export function useStudioAssistDocument({
   const documentTypeName = schemaType.name
   const currentUser = useCurrentUser()
 
-  const validation = useValidationStatus(publicId(documentId), schemaType.name).validation
   const assistDocument = useDocumentState<StudioAssistDocument>(
     assistDocumentId(documentTypeName),
     assistDocumentTypeName
@@ -73,7 +62,7 @@ export function useStudioAssistDocument({
         tasks: tasks.filter((task) => task.path === assistField.path),
         instructions: assistField.instructions
           ?.filter((p) => !p.userId || p.userId === currentUser?.id)
-          .map((instruction) => asStudioInstruction(instruction, tasks, validation)),
+          .map((instruction) => asStudioInstruction(instruction, tasks)),
       }
     })
     return typed<StudioAssistDocument>({
@@ -89,23 +78,13 @@ export function useStudioAssistDocument({
       }),
       fields: fields,
     })
-  }, [assistDocument, assistTasksStatus, currentUser, validation])
+  }, [assistDocument, assistTasksStatus, currentUser])
 }
 
 function asStudioInstruction(
   instruction: StudioInstruction,
-  run: InstructionTask[],
-  validation: ValidationMarker[]
+  run: InstructionTask[]
 ): StudioInstruction {
-  const errors = validation.filter((marker) => marker.level === 'error')
-
-  const fieldRefs: FieldRef[] = (instruction?.prompt ?? []).flatMap((block) => {
-    if (block._type === 'block') {
-      return block.children.filter((c): c is FieldRef => c._type === fieldReferenceTypeName)
-    }
-    return []
-  })
-
   return {
     ...instruction,
     tasks: run
@@ -115,11 +94,5 @@ function asStudioInstruction(
           task.started &&
           new Date().getTime() - new Date(task.started).getTime() < maxHistoryVisibilityMs
       ),
-    validation: errors.filter((marker) =>
-      fieldRefs
-        .map((r) => r.path)
-        .filter((p): p is string => !!p)
-        .find((path) => pathToString(marker.path) === path)
-    ),
   }
 }

package/src/assistFormComponents/AssistField.tsx

@@ -46,14 +46,15 @@ export function AssistField(props: FieldProps) {
   )
 
   const {showOnboarding, dismissOnboarding} = useOnboardingFeature(fieldOnboardingKey)
+  const singlePresence = presence[0]
 
   const actions = (
     <Flex gap={2} align="center" justify="space-between">
-      {presence.map((pre) => (
-        <Box key={pre.user.id}>
-          <AiFieldPresence key={pre.lastActiveAt} presence={pre} />
+      {singlePresence && (
+        <Box>
+          <AiFieldPresence presence={singlePresence} />
         </Box>
-      ))}
+      )}
 
       {isFirstAssisted && showOnboarding && <AssistOnboardingPopover dismiss={dismissOnboarding} />}
     </Flex>

package/src/assistFormComponents/AssistFormBlock.tsx

@@ -18,13 +18,12 @@ export function AssistFormBlock(props: BlockProps) {
     },
     [onChange, key]
   )
+  const singlePresence = presence[0]
   return (
     <ErrorWrapper onChange={localOnChange}>
       <Flex align="center" justify="space-between">
         <Box flex={1}>{props.renderDefault(props)}</Box>
-        {presence.map((pre) => (
-          <AiFieldPresence key={pre.lastActiveAt} presence={pre} />
-        ))}
+        {singlePresence && <AiFieldPresence presence={singlePresence} />}
       </Flex>
     </ErrorWrapper>
   )

package/src/assistFormComponents/validation/listItem.tsx

@@ -47,9 +47,9 @@ export function ListItem(props: ValidationListItemProps) {
             {path}
           </StyledText>
         )}
-        {marker.item.message && (
+        {marker.item?.message && (
           <StyledText muted size={1} textOverflow={truncate ? 'ellipsis' : undefined}>
-            {marker.item.message}
+            {marker.item?.message}
           </StyledText>
         )}
       </Stack>

package/src/assistInspector/FieldAutocomplete.tsx

@@ -32,6 +32,7 @@ export function FieldAutocomplete(props: FieldSelectorProps) {
     () =>
       fieldRefs
         .filter((field) => (filter ? filter(field) : true))
+        .filter((f) => !isType(f.schemaType, 'reference'))
         .map((field) => ({value: field.key, field})),
     [fieldRefs, filter]
   )

package/src/assistInspector/InstructionTaskHistoryButton.tsx

@@ -167,7 +167,7 @@ export function InstructionTaskHistoryButton(props: InstructionTaskHistoryButton
   )
 }
 
-const TASK_STATUS_BUTTON_TOOLTIP_PROPS: StatusButtonProps['tooltip'] = {
+const TASK_STATUS_BUTTON_TOOLTIP_PROPS: StatusButtonProps['tooltipProps'] = {
   placement: 'top',
 }
 
@@ -190,11 +190,10 @@ const TaskStatusButton = forwardRef(function TaskStatusButton(
       mode="bleed"
       onClick={onClick}
       tone={hasErrors ? 'critical' : undefined}
-      fontSize={1}
       disabled={disabled}
       ref={ref}
       selected={selected}
-      tooltip={TASK_STATUS_BUTTON_TOOLTIP_PROPS}
+      tooltipProps={TASK_STATUS_BUTTON_TOOLTIP_PROPS}
     />
   )
 })

package/src/assistInspector/helpers.ts

@@ -20,7 +20,7 @@ import {
 } from 'sanity'
 import {ComponentType, useContext, useMemo} from 'react'
 import {AssistInspectorRouteParams, documentRootKey, fieldPathParam} from '../types'
-import {usePaneRouter} from 'sanity/desk'
+import {usePaneRouter, type PaneRouterContextValue} from 'sanity/desk'
 import {isAssistSupported} from '../helpers/assistSupported'
 import {isPortableTextArray, isType} from '../helpers/typeUtils'
 import {SelectedFieldContext} from '../assistDocument/components/SelectedFieldContext'
@@ -198,18 +198,16 @@ export function getFieldTitle(field?: FieldRef) {
   return field?.title ?? schemaType?.title ?? schemaType?.name ?? 'Untitled'
 }
 
+export type AiPaneRouter = Omit<PaneRouterContextValue, 'setParams' | 'params'> & {
+  params: AssistInspectorRouteParams
+  setParams: (p: Record<keyof AssistInspectorRouteParams, string | undefined>) => void
+}
+
 export function useAiPaneRouter() {
   const paneRouter = usePaneRouter()
 
   return useMemo(
-    () =>
-      ({...paneRouter, params: paneRouter.params ?? {}} as Omit<
-        typeof paneRouter,
-        'setParams' | 'params'
-      > & {
-        params: AssistInspectorRouteParams
-        setParams: (p: Record<keyof AssistInspectorRouteParams, string | undefined>) => void
-      }),
+    () => ({...paneRouter, params: paneRouter.params ?? {}} as AiPaneRouter),
     [paneRouter]
   )
 }

package/src/assistLayout/AssistLayout.tsx

@@ -9,6 +9,7 @@ import {StudioInstruction} from '../types'
 import {RunInstructionProvider} from './RunInstructionProvider'
 import {ThemeProvider} from '@sanity/ui'
 import {AlphaMigration} from './AlphaMigration'
+import {FieldTranslationProvider} from '../translate/FieldTranslationProvider'
 
 export interface AIStudioLayoutProps extends LayoutProps {
   config: AssistPluginConfig
@@ -26,12 +27,14 @@ export function AssistLayout(props: AIStudioLayoutProps) {
     <AiAssistanceConfigProvider config={props.config}>
       {migrate ? <AlphaMigration /> : null}
       <RunInstructionProvider>
-        <ConnectorsProvider onConnectorsChange={setConnectors}>
-          {props.renderDefault(props)}
-          <ThemeProvider tone="default">
-            <AssistConnectorsOverlay connectors={connectors} />
-          </ThemeProvider>
-        </ConnectorsProvider>
+        <FieldTranslationProvider>
+          <ConnectorsProvider onConnectorsChange={setConnectors}>
+            {props.renderDefault(props)}
+            <ThemeProvider tone="default">
+              <AssistConnectorsOverlay connectors={connectors} />
+            </ThemeProvider>
+          </ConnectorsProvider>
+        </FieldTranslationProvider>
       </RunInstructionProvider>
     </AiAssistanceConfigProvider>
   )

package/src/fieldActions/assistFieldActions.tsx

@@ -24,6 +24,7 @@ import {generateCaptionsActions} from './generateCaptionActions'
 import {useDocumentPane} from 'sanity/desk'
 import {useSelectedField, useTypePath} from '../assistInspector/helpers'
 import {isSchemaAssistEnabled} from '../helpers/assistSupported'
+import {translateActions} from './translateActions'
 
 function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
   return node
@@ -47,6 +48,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 +91,7 @@ export const assistFieldActions: DocumentFieldAction = {
     const isSelected = isInspectorOpen && isPathSelected
 
     const imageCaptionAction = generateCaptionsActions.useAction(props)
-
+    const translateAction = translateActions.useAction({...props, documentId: assistableDocumentId})
     const manageInstructions = useCallback(
       () =>
         isSelected
@@ -134,7 +136,7 @@ export const assistFieldActions: DocumentFieldAction = {
     )
 
     const runInstructionsGroup = useMemo(() => {
-      return instructions?.length || imageCaptionAction
+      return instructions?.length || imageCaptionAction || translateAction
         ? node({
             type: 'group',
             icon: () => null,
@@ -151,7 +153,7 @@ export const assistFieldActions: DocumentFieldAction = {
                 })
               ),
               imageCaptionAction,
-            ].filter(Boolean),
+            ].filter((a): a is DocumentFieldActionItem => !!a),
             expanded: true,
           })
         : undefined
@@ -163,6 +165,7 @@ export const assistFieldActions: DocumentFieldAction = {
       documentIsNew,
       assistSupported,
       imageCaptionAction,
+      translateAction,
     ])
 
     const instructionsLength = instructions?.length || 0
@@ -185,12 +188,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 +203,7 @@ export const assistFieldActions: DocumentFieldAction = {
         manageInstructionsItem,
         assistSupported,
         imageCaptionAction,
+        translateAction,
       ]
     )
 
@@ -216,7 +222,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
     }