@sanity/assist 1.2.16 → 2.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sanity/assist",
-  "version": "1.2.16",
-  "description": "",
+  "version": "2.0.1",
+  "description": "You create the instructions; Sanity AI Assist does the rest.",
   "keywords": [
     "sanity",
     "sanity-plugin",
@@ -54,10 +54,11 @@
     "release": "semantic-release"
   },
   "dependencies": {
-    "@sanity/icons": "^2.4.0",
+    "@sanity/icons": "^2.8.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^2.0.0-beta.13",
+    "@sanity/ui": "^2.0.2",
     "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",
@@ -69,11 +70,11 @@
     "@rollup/plugin-image": "^3.0.3",
     "@sanity/pkg-utils": "^2.4.10",
     "@sanity/plugin-kit": "^3.1.10",
-    "@sanity/semantic-release-preset": "^4.1.6",
+    "@sanity/semantic-release-preset": "^4.1.7",
     "@types/react": "^18.2.37",
     "@types/styled-components": "^5.1.30",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "date-fns": "^2.30.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^8.10.0",
@@ -85,15 +86,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "sanity": "^3.23.1",
-    "semantic-release": "^21.1.2",
+    "sanity": "^3.28.0",
+    "semantic-release": "^23.0.2",
     "styled-components": "^6.1.1",
     "typescript": "^5.3.3",
-    "vitest": "^0.34.6"
+    "vitest": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^18",
-    "sanity": "^3.16",
+    "sanity": "^3.26",
     "styled-components": "^5.2 || ^6.0.0"
   },
   "engines": {

package/src/_lib/form/DocumentForm.tsx

@@ -12,6 +12,7 @@ import {
   useDocumentStore,
 } from 'sanity'
 import {useDocumentPane} from 'sanity/desk'
+import {assistFormId} from './constants'
 
 const preventDefault = (ev: React.FormEvent) => ev.preventDefault()
 
@@ -135,7 +136,7 @@ export function DocumentForm(
             changed={formState.changed}
             focused={formState.focused}
             groups={formState.groups}
-            id="root"
+            id={assistFormId}
             members={formState.members}
             onChange={onChange}
             onFieldGroupSelect={onSetActiveFieldGroup}

package/src/_lib/form/constants.ts

@@ -0,0 +1 @@
+export const assistFormId = 'assist'

package/src/assistDocument/AssistDocumentInput.tsx

@@ -1,4 +1,4 @@
-import {InputProps, ObjectInputProps} from 'sanity'
+import {InputProps, ObjectInputProps, ObjectSchemaType} from 'sanity'
 import {AssistDocumentContextProvider} from './AssistDocumentContextProvider'
 import {FirstAssistedPathProvider} from '../onboarding/FirstAssistedPathProvider'
 import {useInstructionToaster} from './hooks/useInstructionToaster'
@@ -7,9 +7,12 @@ import {useLayer} from '@sanity/ui'
 import {useDocumentPane} from 'sanity/desk'
 import {usePathKey} from '../helpers/misc'
 import {ConnectFromRegion} from '../_lib/connector'
+import {assistDocumentTypeName} from '../types'
+import {useMemo} from 'react'
+import {assistFormId} from '../_lib/form/constants'
 
 export function AssistDocumentInputWrapper(props: InputProps) {
-  if (!isType(props.schemaType, 'document') && props.id !== 'root') {
+  if (!isType(props.schemaType, 'document') && props.id !== 'root' && props.id !== assistFormId) {
     return <AssistInput {...props} />
   }
 
@@ -24,10 +27,27 @@ export function AssistDocumentInputWrapper(props: InputProps) {
 function AssistDocumentInput({documentId, ...props}: ObjectInputProps & {documentId: string}) {
   useInstructionToaster(documentId, props.schemaType)
 
+  const schemaType = useMemo(() => {
+    if (props.schemaType.name !== assistDocumentTypeName) {
+      return props.schemaType
+    }
+    return {
+      ...props.schemaType,
+      type: {
+        ...props.schemaType.type,
+        // compatability with i18nArrays plugin that requires this to be document
+        name: 'document',
+      },
+    } as ObjectSchemaType
+  }, [props.schemaType])
+
   return (
     <FirstAssistedPathProvider members={props.members}>
-      <AssistDocumentContextProvider schemaType={props.schemaType} documentId={documentId}>
-        {props.renderDefault(props)}
+      <AssistDocumentContextProvider schemaType={schemaType} documentId={documentId}>
+        {props.renderDefault({
+          ...props,
+          schemaType,
+        })}
       </AssistDocumentContextProvider>
     </FirstAssistedPathProvider>
   )

package/src/assistDocument/RequestRunInstructionProvider.tsx

@@ -1,13 +1,13 @@
 import {useRunInstruction} from '../assistLayout/RunInstructionProvider'
 import {useCallback, useEffect, useState} from 'react'
 import {ObjectSchemaType, PatchEvent, SanityDocument, unset} from 'sanity'
-import {RunInstructionArgs} from '../assistLayout/AssistLayout'
 import {publicId} from '../helpers/ids'
 
-export interface DocumentArgs {
+export interface DraftDelayedTaskArgs<T> {
   documentOnChange: (event: PatchEvent) => void
   // indicates if the document is a draft or liveEditable currently
   isDocAssistable: boolean
+  task: (args: T) => void
 }
 
 export function isDocAssistable(
@@ -23,28 +23,44 @@ export function getAssistableDocId(documentSchemaType: ObjectSchemaType, documen
   return documentSchemaType.liveEdit ? baseId : `drafts.${baseId}`
 }
 
-export function useRequestRunInstruction(args: DocumentArgs) {
-  const {documentOnChange, isDocAssistable} = args
-
+export function useRequestRunInstruction(args: {
+  documentOnChange: (event: PatchEvent) => void
+  // indicates if the document is a draft or liveEditable currently
+  isDocAssistable: boolean
+}) {
   const {runInstruction, instructionLoading} = useRunInstruction()
-  const [queuedTask, setQueuedTask] = useState<RunInstructionArgs | undefined>(undefined)
-
-  useEffect(() => {
-    if (queuedTask && isDocAssistable) {
-      runInstruction(queuedTask)
-      setQueuedTask(undefined)
-    }
-  }, [queuedTask, isDocAssistable, runInstruction])
+  const requestRunInstruction = useDraftDelayedTask({
+    ...args,
+    task: runInstruction,
+  })
 
   return {
     instructionLoading,
-    requestRunInstruction: useCallback(
-      (task: RunInstructionArgs) => {
-        // make a dummy edit: this will trigger the document/draft to be created
-        documentOnChange(PatchEvent.from([unset(['_force_document_creation'])]))
-        setQueuedTask(task)
-      },
-      [setQueuedTask, documentOnChange]
-    ),
+    requestRunInstruction,
   }
 }
+
+/**
+ * Ensures that the current document is a draft before running task
+ */
+export function useDraftDelayedTask<T>(args: DraftDelayedTaskArgs<T>) {
+  const {documentOnChange, isDocAssistable, task} = args
+
+  const [queuedArgs, setQueuedArgs] = useState<T | undefined>(undefined)
+
+  useEffect(() => {
+    if (queuedArgs && isDocAssistable) {
+      task(queuedArgs)
+      setQueuedArgs(undefined)
+    }
+  }, [queuedArgs, isDocAssistable, task])
+
+  return useCallback(
+    (taskArgs: T) => {
+      // make a dummy edit: this will trigger the document/draft to be created
+      documentOnChange(PatchEvent.from([unset(['_force_document_creation'])]))
+      setQueuedArgs(taskArgs)
+    },
+    [setQueuedArgs, documentOnChange]
+  )
+}

package/src/assistDocument/components/AssistDocumentForm.tsx

@@ -6,6 +6,7 @@ import {
   documentRootKey,
   fieldPathParam,
   instructionParam,
+  StudioInstruction,
 } from '../../types'
 import {createContext, useContext, useEffect, useMemo, useRef} from 'react'
 import {
@@ -16,6 +17,7 @@ import {
   KeyedSegment,
   ObjectInputProps,
   ObjectSchemaType,
+  PatchEvent,
   Path,
   SchemaType,
   set,
@@ -30,6 +32,7 @@ import {useAiPaneRouter} from '../../assistInspector/helpers'
 import {SelectedFieldContextProvider, SelectedFieldContextValue} from './SelectedFieldContext'
 import {Card, Stack, Text} from '@sanity/ui'
 import {documentTypeFromAiDocumentId} from '../../helpers/ids'
+import {useAiAssistanceConfig} from '../../assistLayout/AiAssistanceConfigContext'
 
 const EMPTY_FIELDS: AssistField[] = []
 
@@ -104,8 +107,6 @@ function AssistDocumentFormEditable(props: ObjectInputProps) {
     }
   }, [title, documentSchema, onChange, id])
 
-  const fieldExists = !!fields?.some((f) => f._key === typePath)
-
   const {onPathOpen, ...formCallbacks} = useFormCallbacks()
 
   const newCallbacks: FormCallbacksValue = useMemo(
@@ -141,7 +142,8 @@ function AssistDocumentFormEditable(props: ObjectInputProps) {
           key={typePath}
           pathKey={typePath}
           activePath={activePath}
-          fieldExists={fieldExists}
+          fields={fields}
+          documentSchema={documentSchema}
           onChange={onChange}
         />
         {instruction && <BackToInstructionListLink />}
@@ -195,36 +197,78 @@ function useSelectedSchema(
 function FieldsInitializer({
   pathKey,
   activePath,
-  fieldExists,
+  fields,
+  documentSchema,
   onChange,
 }: {
   pathKey?: string
   activePath?: Path
-  fieldExists: boolean
+  fields: AssistField[] | undefined
+  documentSchema: ObjectSchemaType | undefined
   onChange: ObjectInputProps['onChange']
 }) {
+  const {
+    config: {__presets: presets},
+  } = useAiAssistanceConfig()
+
+  const existingField = fields?.find((f) => f._key === pathKey)
+  const documentPresets = !!documentSchema?.name && presets?.[documentSchema?.name]
+
+  const missingPresetInstructions = useMemo(() => {
+    if (!documentPresets || !pathKey) {
+      return undefined
+    }
+    const existingInstructions = existingField?.instructions
+    const presetField = documentPresets.fields?.find((f) => f.path === pathKey)
+    return presetField?.instructions?.filter(
+      (i) => !existingInstructions?.some((ei) => ei._key === i._key)
+    )
+  }, [documentPresets, pathKey, existingField])
+
   // need this to not fire onChange twice in React strict mode
   const initialized = useRef(false)
   useEffect(() => {
-    if (initialized.current || fieldExists || activePath || !pathKey) {
+    if (initialized.current || !pathKey) {
+      return
+    }
+    if (existingField && !missingPresetInstructions?.length) {
       return
     }
-    onChange([
-      setIfMissing([], ['fields']),
-      insert(
-        [
-          typed<AssistField>({
-            _key: pathKey,
-            _type: assistFieldTypeName,
-            path: pathKey,
-          }),
-        ],
-        'after',
-        ['fields', -1]
-      ),
-    ])
+
+    let event = PatchEvent.from([setIfMissing([], ['fields'])])
+    if (!existingField) {
+      event = event.append(
+        insert(
+          [
+            typed<AssistField>({
+              _key: pathKey,
+              _type: assistFieldTypeName,
+              path: pathKey,
+            }),
+          ],
+          'after',
+          ['fields', -1]
+        )
+      )
+    }
+    if (missingPresetInstructions?.length) {
+      event = event.append(
+        insert(
+          missingPresetInstructions.map(
+            (preset): StudioInstruction => ({
+              ...preset,
+              _type: 'sanity.assist.instruction',
+              prompt: preset.prompt?.map((p) => ({markDefs: [], ...p})),
+            })
+          ),
+          'after',
+          ['fields', {_key: pathKey}, 'instructions', -1]
+        )
+      )
+    }
+    onChange(event)
     initialized.current = true
-  }, [activePath, onChange, pathKey, fieldExists])
+  }, [activePath, onChange, pathKey, existingField, missingPresetInstructions])
 
   return null
 }

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