@sanity/assist 1.2.16 → 2.0.1

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

@@ -9,6 +9,7 @@ import {AiFieldPresence} from '../presence/AiFieldPresence'
 import {AssistOnboardingPopover} from '../onboarding/FieldActionsOnboarding'
 import {FirstAssistedPathContext} from '../onboarding/FirstAssistedPathProvider'
 import {fieldOnboardingKey, useOnboardingFeature} from '../onboarding/onboardingStore'
+import {assistFormId} from '../_lib/form/constants'
 
 export function AssistFieldWrapper(props: FieldProps) {
   const {schemaType} = props
@@ -22,7 +23,11 @@ export function AssistFieldWrapper(props: FieldProps) {
   ) {
     return props.renderDefault(props)
   }
-  if (!isType(props.schemaType, 'document') && props.inputId !== 'root') {
+  if (
+    !isType(props.schemaType, 'document') &&
+    props.inputId !== 'root' &&
+    props.inputId !== assistFormId
+  ) {
     return <AssistField {...props}>{props.children}</AssistField>
   }
 
@@ -46,14 +51,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/AssistInspector.tsx

@@ -31,6 +31,7 @@ import {InspectorOnboarding} from '../onboarding/InspectorOnboarding'
 import {inspectorOnboardingKey, useOnboardingFeature} from '../onboarding/onboardingStore'
 import {TypePathContext} from '../assistDocument/components/AssistDocumentForm'
 import {FieldTitle} from './FieldAutocomplete'
+import {getConditionalMembers} from '../helpers/conditionalMembers'
 
 const CardWithShadowBelow = styled(Card)`
   position: relative;
@@ -199,9 +200,13 @@ export function AssistInspector(props: DocumentInspectorProps) {
     value: docValue,
     schemaType,
     onChange: documentOnChange,
+    formState,
   } = documentPane
   const {published, draft} = useEditState(documentId, documentType, 'low')
 
+  const formStateRef = useRef(formState)
+  formStateRef.current = formState
+
   const assistableDocId = getAssistableDocId(schemaType, documentId)
   const {instructionLoading, requestRunInstruction} = useRequestRunInstruction({
     documentOnChange,
@@ -261,6 +266,7 @@ export function AssistInspector(props: DocumentInspectorProps) {
         typePath,
         assistDocumentId: assistDocumentId(documentType),
         instruction,
+        conditionalMembers: formStateRef.current ? getConditionalMembers(formStateRef.current) : [],
       }),
     [pathKey, instruction, typePath, documentType, assistableDocId, requestRunInstruction]
   )

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/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 {type PaneRouterContextValue, usePaneRouter} from 'sanity/desk'
 import {isAssistSupported} from '../helpers/assistSupported'
 import {isPortableTextArray, isType} from '../helpers/typeUtils'
 import {SelectedFieldContext} from '../assistDocument/components/SelectedFieldContext'
@@ -96,7 +96,7 @@ export function getFieldRefs(
 
       const syntheticFields =
         field.type.jsonType === 'array' ? getSyntheticFields(field.type, fieldRef, depth + 1) : []
-      if (!isAssistSupported(field.type, true)) {
+      if (!isAssistSupported(field.type)) {
         return [...fields, ...syntheticFields]
       }
       return [fieldRef, ...fields, ...syntheticFields]
@@ -125,7 +125,7 @@ function getSyntheticFields(schemaType: ArraySchemaType, parent?: FieldRef, dept
       const fields =
         itemType.jsonType === 'object' ? getFieldRefs(itemType, fieldRef, depth + 1) : []
 
-      if (!isAssistSupported(itemType, true)) {
+      if (!isAssistSupported(itemType)) {
         return fields
       }
       return [fieldRef, ...fields]
@@ -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

@@ -8,7 +8,7 @@ import {RunInstructionRequest} from '../useApiClient'
 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
@@ -20,18 +20,18 @@ export type RunInstructionArgs = Omit<RunInstructionRequest, 'instructionKey' |
 
 export function AssistLayout(props: AIStudioLayoutProps) {
   const [connectors, setConnectors] = useState<Connector[]>([])
-  const migrate = props.config.alphaMigration ?? true
 
   return (
     <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/components/ImageContext.tsx

@@ -1,17 +1,18 @@
 import {createContext, useEffect, useMemo, useState} from 'react'
 import {InputProps, pathToString, useSyncState} from 'sanity'
-import {getCaptionFieldOption} from '../helpers/typeUtils'
+import {getDescriptionFieldOption, getImageInstructionFieldOption} from '../helpers/typeUtils'
 import {useAssistDocumentContext} from '../assistDocument/AssistDocumentContext'
-import {useApiClient, useGenerateCaption} from '../useApiClient'
+import {canUseAssist, useApiClient, useGenerateCaption} from '../useApiClient'
 import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
 import {publicId} from '../helpers/ids'
 
 export interface ImageContextValue {
-  captionPath: string
+  imageDescriptionPath?: string
+  imageInstructionPath?: string
   assetRef?: string
 }
 
-export const ImageContext = createContext<ImageContextValue | undefined>(undefined)
+export const ImageContext = createContext<ImageContextValue>({})
 
 export function ImageContextProvider(props: InputProps) {
   const {schemaType, path, value} = props
@@ -19,23 +20,39 @@ export function ImageContextProvider(props: InputProps) {
   const [assetRefState, setAssetRefState] = useState<string | undefined>(assetRef)
 
   const {documentId, documentSchemaType} = useAssistDocumentContext()
-  const {config} = useAiAssistanceConfig()
+  const {config, status} = useAiAssistanceConfig()
   const apiClient = useApiClient(config?.__customApiClient)
   const {generateCaption} = useGenerateCaption(apiClient)
 
   const {isSyncing} = useSyncState(publicId(documentId), documentSchemaType.name)
 
   useEffect(() => {
-    const captionField = getCaptionFieldOption(schemaType)
-    if (assetRef && documentId && captionField && assetRef !== assetRefState && !isSyncing) {
+    const descriptionField = getDescriptionFieldOption(schemaType)
+    if (
+      assetRef &&
+      documentId &&
+      descriptionField &&
+      assetRef !== assetRefState &&
+      !isSyncing &&
+      canUseAssist(status)
+    ) {
       setAssetRefState(assetRef)
-      generateCaption({path: pathToString([...path, captionField]), documentId: documentId})
+      generateCaption({path: pathToString([...path, descriptionField]), documentId: documentId})
+    }
+  }, [schemaType, path, assetRef, assetRefState, documentId, generateCaption, isSyncing, status])
+
+  const context: ImageContextValue = useMemo(() => {
+    const descriptionField = getDescriptionFieldOption(schemaType)
+    const imageInstructionField = getImageInstructionFieldOption(schemaType)
+    return {
+      imageDescriptionPath: descriptionField
+        ? pathToString([...path, descriptionField])
+        : undefined,
+      imageInstructionPath: imageInstructionField
+        ? pathToString([...path, imageInstructionField])
+        : undefined,
+      assetRef,
     }
-  }, [schemaType, path, assetRef, assetRefState, documentId, generateCaption, isSyncing])
-
-  const context: ImageContextValue | undefined = useMemo(() => {
-    const captionField = getCaptionFieldOption(schemaType)
-    return captionField ? {captionPath: pathToString([...path, captionField]), assetRef} : undefined
   }, [schemaType, path, assetRef])
 
   return <ImageContext.Provider value={context}>{props.renderDefault(props)}</ImageContext.Provider>

package/src/components/SafeValueInput.tsx

@@ -31,7 +31,10 @@ export function ErrorWrapper(
     [setError]
   )
 
-  const unsetValue = useCallback(() => onChange(PatchEvent.from(unset())), [onChange])
+  const unsetValue = useCallback(() => {
+    onChange(PatchEvent.from(unset()))
+    setError(undefined)
+  }, [onChange])
   const dismiss = useCallback(() => setError(undefined), [])
   const catcher = <ErrorBoundary onCatch={catchError}>{props.children}</ErrorBoundary>
 

package/src/fieldActions/assistFieldActions.tsx

@@ -3,11 +3,12 @@ import {
   DocumentFieldActionGroup,
   DocumentFieldActionItem,
   ObjectSchemaType,
+  typed,
   useCurrentUser,
 } from 'sanity'
 import {ControlsIcon, SparklesIcon} from '@sanity/icons'
-import {useCallback, useMemo} from 'react'
-import {pluginTitle, pluginTitleShort} from '../constants'
+import {useCallback, useMemo, useRef} from 'react'
+import {pluginTitleShort} from '../constants'
 import {useAssistSupported} from '../helpers/useAssistSupported'
 import {useAssistDocumentContext} from '../assistDocument/AssistDocumentContext'
 import {getInstructionTitle, usePathKey} from '../helpers/misc'
@@ -24,6 +25,9 @@ import {generateCaptionsActions} from './generateCaptionActions'
 import {useDocumentPane} from 'sanity/desk'
 import {useSelectedField, useTypePath} from '../assistInspector/helpers'
 import {isSchemaAssistEnabled} from '../helpers/assistSupported'
+import {translateActions, TranslateProps} from '../translate/translateActions'
+import {generateImagActions} from './generateImageActions'
+import {getConditionalMembers} from '../helpers/conditionalMembers'
 
 function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
   return node
@@ -47,6 +51,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
@@ -56,7 +61,10 @@ export const assistFieldActions: DocumentFieldAction = {
         : // eslint-disable-next-line react-hooks/rules-of-hooks
           useAssistDocumentContext()
 
-    const {value: docValue} = useDocumentPane()
+    const {value: docValue, formState} = useDocumentPane()
+    const formStateRef = useRef(formState)
+    formStateRef.current = formState
+
     const currentUser = useCurrentUser()
     const isHidden = !assistDocument
     const pathKey = usePathKey(props.path)
@@ -73,7 +81,8 @@ export const assistFieldActions: DocumentFieldAction = {
     const assistSupported =
       useAssistSupported(props.path, schemaType) &&
       isSelectable &&
-      isSchemaAssistEnabled(documentSchemaType)
+      isSchemaAssistEnabled(documentSchemaType) &&
+      schemaType.readOnly !== true
 
     const fieldAssist = useMemo(
       () =>
@@ -89,7 +98,15 @@ export const assistFieldActions: DocumentFieldAction = {
     const isSelected = isInspectorOpen && isPathSelected
 
     const imageCaptionAction = generateCaptionsActions.useAction(props)
-
+    const imageGenAction = generateImagActions.useAction(props)
+    const translateAction = translateActions.useAction(
+      typed<TranslateProps>({
+        ...props,
+        documentId: assistableDocumentId,
+        documentIsAssistable,
+        documentSchemaType,
+      })
+    )
     const manageInstructions = useCallback(
       () =>
         isSelected
@@ -112,6 +129,9 @@ export const assistFieldActions: DocumentFieldAction = {
           path: pathKey,
           typePath,
           instruction,
+          conditionalMembers: formStateRef.current
+            ? getConditionalMembers(formStateRef.current)
+            : [],
         })
       },
       [requestRunInstruction, assistableDocId, pathKey, typePath, assistDocumentId, fieldAssistKey]
@@ -134,7 +154,7 @@ export const assistFieldActions: DocumentFieldAction = {
     )
 
     const runInstructionsGroup = useMemo(() => {
-      return instructions?.length || imageCaptionAction
+      return instructions?.length || imageCaptionAction || translateAction || imageGenAction
         ? node({
             type: 'group',
             icon: () => null,
@@ -151,7 +171,8 @@ export const assistFieldActions: DocumentFieldAction = {
                 })
               ),
               imageCaptionAction,
-            ].filter(Boolean),
+              imageGenAction,
+            ].filter((a): a is DocumentFieldActionItem => !!a),
             expanded: true,
           })
         : undefined
@@ -163,6 +184,8 @@ export const assistFieldActions: DocumentFieldAction = {
       documentIsNew,
       assistSupported,
       imageCaptionAction,
+      translateAction,
+      imageGenAction,
     ])
 
     const instructionsLength = instructions?.length || 0
@@ -185,12 +208,16 @@ 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)
+            .filter((c) => (c.type === 'group' ? c.children.length : true)),
           expanded: false,
           renderAsButton: true,
-          hidden: !assistSupported && !imageCaptionAction,
+          hidden: !assistSupported && !imageCaptionAction && !translateAction && !imageGenAction,
         }),
       [
         //documentIsNew,
@@ -198,6 +225,8 @@ export const assistFieldActions: DocumentFieldAction = {
         manageInstructionsItem,
         assistSupported,
         imageCaptionAction,
+        translateAction,
+        imageGenAction,
       ]
     )
 
@@ -216,7 +245,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 && !imageGenAction) {
       return emptyAction
     }
 
@@ -239,7 +268,7 @@ function instructionItem(props: {
     iconRight: isPrivate ? PrivateIcon : undefined,
     title: getInstructionTitle(instruction),
     onAction: () => onInstructionAction(instruction),
-    disabled: assistSupported ? false : {reason: `${pluginTitle} is not supported for this field`},
+    disabled: !assistSupported,
     hidden,
   })
 }

package/src/fieldActions/generateCaptionActions.tsx

@@ -2,11 +2,14 @@ import {DocumentFieldAction, DocumentFieldActionGroup, DocumentFieldActionItem}
 import {ImageIcon} from '@sanity/icons'
 import {useContext, useMemo} from 'react'
 import {usePathKey} from '../helpers/misc'
-import {useApiClient, useGenerateCaption} from '../useApiClient'
+import {canUseAssist, useApiClient, useGenerateCaption} from '../useApiClient'
 import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
 import {useAssistDocumentContext} from '../assistDocument/AssistDocumentContext'
 import {ImageContext} from '../components/ImageContext'
 import {Box, Spinner} from '@sanity/ui'
+import {useDocumentPane} from 'sanity/desk'
+import {aiInspectorId} from '../assistInspector/constants'
+import {fieldPathParam, instructionParam} from '../types'
 
 function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
   return node
@@ -16,14 +19,14 @@ export const generateCaptionsActions: DocumentFieldAction = {
   name: 'sanity-assist-generate-captions',
   useAction(props) {
     const pathKey = usePathKey(props.path)
+    const {openInspector} = useDocumentPane()
 
-    const {config} = useAiAssistanceConfig()
+    const {config, status} = useAiAssistanceConfig()
     const apiClient = useApiClient(config?.__customApiClient)
     const {generateCaption, loading} = useGenerateCaption(apiClient)
-
     const imageContext = useContext(ImageContext)
 
-    if (imageContext && pathKey === imageContext?.captionPath) {
+    if (imageContext && pathKey === imageContext?.imageDescriptionPath) {
       //if this is true, it is stable, and not breaking rules of hooks
       // eslint-disable-next-line react-hooks/rules-of-hooks
       const {documentId} = useAssistDocumentContext()
@@ -38,18 +41,26 @@ export const generateCaptionsActions: DocumentFieldAction = {
                 </Box>
               )
             : ImageIcon,
-          title: 'Generate caption',
+          title: 'Generate image description',
           onAction: () => {
             if (loading) {
               return
             }
+            if (!canUseAssist(status)) {
+              openInspector(aiInspectorId, {
+                [fieldPathParam]: pathKey,
+                [instructionParam]: undefined as any,
+              })
+              return
+            }
+
             generateCaption({path: pathKey, documentId: documentId ?? ''})
           },
           renderAsButton: true,
           disabled: loading,
           hidden: !imageContext.assetRef,
         })
-      }, [generateCaption, pathKey, documentId, loading, imageContext])
+      }, [generateCaption, pathKey, documentId, loading, imageContext, status, openInspector])
     }
 
     // works but not supported by types

package/src/fieldActions/generateImageActions.tsx

@@ -0,0 +1,57 @@
+import {DocumentFieldAction, DocumentFieldActionGroup, DocumentFieldActionItem} from 'sanity'
+import {ImageIcon} from '@sanity/icons'
+import {useContext, useMemo} from 'react'
+import {usePathKey} from '../helpers/misc'
+import {useApiClient, useGenerateImage} from '../useApiClient'
+import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
+import {useAssistDocumentContext} from '../assistDocument/AssistDocumentContext'
+import {ImageContext} from '../components/ImageContext'
+import {Box, Spinner} from '@sanity/ui'
+
+function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
+  return node
+}
+
+export const generateImagActions: DocumentFieldAction = {
+  name: 'sanity-assist-generate-image',
+  useAction(props) {
+    const pathKey = usePathKey(props.path)
+
+    const {config} = useAiAssistanceConfig()
+    const apiClient = useApiClient(config?.__customApiClient)
+    const {generateImage, loading} = useGenerateImage(apiClient)
+
+    const imageContext = useContext(ImageContext)
+
+    if (imageContext && pathKey === imageContext?.imageInstructionPath) {
+      //if this is true, it is stable, and not breaking rules of hooks
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const {documentId} = useAssistDocumentContext()
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      return useMemo(() => {
+        return node({
+          type: 'action',
+          icon: loading
+            ? () => (
+                <Box style={{height: 17}}>
+                  <Spinner style={{transform: 'translateY(6px)'}} />
+                </Box>
+              )
+            : ImageIcon,
+          title: 'Generate image from prompt',
+          onAction: () => {
+            if (loading) {
+              return
+            }
+            generateImage({path: pathKey, documentId: documentId ?? ''})
+          },
+          renderAsButton: true,
+          disabled: loading,
+        })
+      }, [generateImage, pathKey, documentId, loading])
+    }
+
+    // works but not supported by types
+    return undefined as unknown as DocumentFieldActionItem
+  },
+}