@sanity/assist 1.0.0

package/src/assistConnectors/draw/connectorPath.ts

@@ -0,0 +1,142 @@
+import {ConnectorLine, ConnectorOptions} from '../../_lib/connector'
+
+export function drawArrowPath(
+  options: ConnectorOptions,
+  x: number,
+  y: number,
+  dir: number
+): string {
+  return [
+    `M ${x - options.arrow.size} ${y - options.arrow.size * dir} `,
+    `L ${x} ${y}`,
+    `L ${x + options.arrow.size} ${y - options.arrow.size * dir}`,
+  ].join('')
+}
+
+function moveTo(x: number, y: number) {
+  return `M${x} ${y}`
+}
+
+function lineTo(x: number, y: number) {
+  return `L${x} ${y}`
+}
+
+function join(strings: string[], delim = '') {
+  return strings.join(delim)
+}
+
+function quadCurve(x1: number, y1: number, x: number, y: number) {
+  return `Q${x1} ${y1} ${x} ${y}`
+}
+
+export function drawConnectorPath(options: ConnectorOptions, line: ConnectorLine): string {
+  const {cornerRadius} = options.path
+  const {from, to} = line
+  const {x: fromX, y: fromY} = from
+  const {x: _toX, y: toY} = to
+
+  const toX = _toX - 1
+
+  // Calculate divider position
+  const dividerX = to.bounds.x + options.divider.offsetX
+
+  // Calculate connector FROM path X position
+  const fromPathX = from.isAbove || from.isBelow ? fromX + options.arrow.marginX : fromX
+
+  // Calculate maximum corner radius
+  const r0 = Math.min(cornerRadius, Math.abs(fromPathX - dividerX) / 2)
+  const r1 = Math.min(cornerRadius, Math.abs(fromY - toY) / 2)
+
+  const cmds: string[] = []
+
+  // FROM
+  if (from.isAbove) {
+    cmds.push(
+      moveTo(
+        fromX + options.arrow.marginX,
+        fromY - options.arrow.threshold + options.arrow.marginY
+      ),
+      lineTo(fromX + options.arrow.marginX, fromY - r0),
+      quadCurve(fromX + options.arrow.marginX, fromY, fromX + options.arrow.marginX + r0, fromY)
+    )
+  } else if (from.isBelow) {
+    cmds.push(
+      moveTo(
+        fromX + options.arrow.marginX,
+        fromY + options.arrow.threshold - options.arrow.marginY
+      ),
+      lineTo(fromX + options.arrow.marginX, fromY + r0),
+      quadCurve(fromX + options.arrow.marginX, fromY, fromX + options.arrow.marginX + r0, fromY)
+    )
+  } else {
+    cmds.push(moveTo(fromX, fromY))
+  }
+
+  // TO
+  if (to.isAbove) {
+    if (fromY < to.bounds.y) {
+      cmds.push(
+        lineTo(dividerX - r1, fromY),
+        quadCurve(dividerX, fromY, dividerX, fromY + r1),
+        lineTo(dividerX, toY - r1),
+        quadCurve(dividerX, toY, dividerX + r1, toY),
+        lineTo(dividerX - cornerRadius, toY),
+        quadCurve(dividerX, toY, dividerX, toY - cornerRadius),
+        lineTo(dividerX, toY - options.arrow.threshold + options.arrow.marginY)
+      )
+    } else {
+      cmds.push(
+        lineTo(dividerX - cornerRadius, fromY),
+        quadCurve(dividerX, fromY, dividerX, fromY - cornerRadius),
+        lineTo(dividerX, toY - options.arrow.threshold + options.arrow.marginY)
+      )
+    }
+  } else if (to.isBelow) {
+    if (fromY > to.bounds.y + to.bounds.h) {
+      // curl around
+      cmds.push(
+        lineTo(dividerX - options.arrow.marginX - r1, fromY),
+        quadCurve(
+          dividerX - options.arrow.marginX,
+          fromY,
+          dividerX - options.arrow.marginX,
+          fromY - r1
+        ),
+        lineTo(dividerX - options.arrow.marginX, toY + r1),
+        quadCurve(
+          dividerX - options.arrow.marginX,
+          toY,
+          dividerX - options.arrow.marginX + r1,
+          toY
+        ),
+        lineTo(dividerX - cornerRadius, toY),
+        quadCurve(dividerX, toY, dividerX, toY + cornerRadius),
+        lineTo(dividerX, toY + options.arrow.threshold - options.arrow.marginY)
+      )
+    } else {
+      cmds.push(
+        lineTo(dividerX - cornerRadius, fromY),
+        quadCurve(dividerX, fromY, dividerX, fromY + cornerRadius),
+        lineTo(dividerX, toY + options.arrow.threshold - options.arrow.marginY)
+      )
+    }
+  } else if (fromY < toY) {
+    cmds.push(
+      lineTo(dividerX - r0, fromY),
+      quadCurve(dividerX, fromY, dividerX, fromY + r1),
+      lineTo(dividerX, toY - r1),
+      quadCurve(dividerX, toY, dividerX + r1, toY),
+      lineTo(toX, toY)
+    )
+  } else {
+    cmds.push(
+      lineTo(dividerX - Math.min(r0, r1), fromY),
+      quadCurve(dividerX, fromY, dividerX, fromY - Math.min(r0, r1)),
+      lineTo(dividerX, toY + r1),
+      quadCurve(dividerX, toY, dividerX + r1, toY),
+      lineTo(toX, toY)
+    )
+  }
+
+  return join(cmds)
+}

package/src/assistConnectors/index.ts

@@ -0,0 +1 @@
+export * from './AssistConnectorsOverlay'

package/src/assistDocument/AssistDocumentContext.tsx

@@ -0,0 +1,31 @@
+import {DocumentInspector, ObjectSchemaType, PatchEvent} from 'sanity'
+import {createContext, useContext} from 'react'
+import {StudioAssistDocument} from '../types'
+
+export type AssistDocumentContextValue = (
+  | {assistDocument: StudioAssistDocument; loading: false}
+  | {assistDocument: undefined; loading: true}
+) & {
+  documentIsNew: boolean
+  assistableDocumentId: string
+  documentIsAssistable: boolean
+  documentId: string
+  documentSchemaType: ObjectSchemaType
+  openInspector: (inspectorName: string, paneParams?: Record<string, string>) => void
+  closeInspector: (inspectorName?: string) => void
+  inspector: DocumentInspector | null
+  selectedPath?: string
+  documentOnChange: (event: PatchEvent) => void
+}
+
+export const AssistDocumentContext = createContext<AssistDocumentContextValue | undefined>(
+  undefined
+)
+
+export function useAssistDocumentContext(): AssistDocumentContextValue {
+  const context = useContext(AssistDocumentContext)
+  if (!context) {
+    throw new Error('AssistDocumentContext value is missing')
+  }
+  return context
+}

package/src/assistDocument/AssistDocumentContextProvider.tsx

@@ -0,0 +1,17 @@
+import {ObjectSchemaType} from 'sanity'
+import {AssistDocumentContext} from './AssistDocumentContext'
+import {useAssistDocumentContextValue} from './hooks/useAssistDocumentContextValue'
+import {PropsWithChildren} from 'react'
+
+export interface AIDocumentInputProps {
+  documentId: string
+  schemaType: ObjectSchemaType
+}
+
+export function AssistDocumentContextProvider(props: PropsWithChildren<AIDocumentInputProps>) {
+  const {documentId, schemaType} = props
+  const value = useAssistDocumentContextValue(documentId, schemaType)
+  return (
+    <AssistDocumentContext.Provider value={value}>{props.children}</AssistDocumentContext.Provider>
+  )
+}

package/src/assistDocument/AssistDocumentInput.tsx

@@ -0,0 +1,46 @@
+import {InputProps, ObjectInputProps} from 'sanity'
+import {AssistDocumentContextProvider} from './AssistDocumentContextProvider'
+import {FirstAssistedPathProvider} from '../onboarding/FirstAssistedPathProvider'
+import {useInstructionToaster} from './hooks/useInstructionToaster'
+import {isType} from '../helpers/typeUtils'
+import {useLayer} from '@sanity/ui'
+import {useDocumentPane} from 'sanity/desk'
+import {usePathKey} from '../helpers/misc'
+import {ConnectFromRegion} from '../_lib/connector'
+
+export function AssistDocumentInputWrapper(props: InputProps) {
+  if (!isType(props.schemaType, 'document') && props.id !== 'root') {
+    return <AssistInput {...props} />
+  }
+
+  const documentId = (props.value as any)?._id as string | undefined
+  if (!documentId) {
+    return props.renderDefault(props)
+  }
+
+  return <AssistDocumentInput {...(props as ObjectInputProps)} documentId={documentId} />
+}
+
+function AssistDocumentInput({documentId, ...props}: ObjectInputProps & {documentId: string}) {
+  useInstructionToaster(documentId, props.schemaType)
+
+  return (
+    <FirstAssistedPathProvider members={props.members}>
+      <AssistDocumentContextProvider schemaType={props.schemaType} documentId={documentId}>
+        {props.renderDefault(props)}
+      </AssistDocumentContextProvider>
+    </FirstAssistedPathProvider>
+  )
+}
+
+function AssistInput(props: InputProps) {
+  const {zIndex} = useLayer()
+  const {paneKey} = useDocumentPane()
+  const pathKey = usePathKey(props.path)
+
+  return (
+    <ConnectFromRegion _key={`${paneKey}_${pathKey}`} zIndex={zIndex} style={{minWidth: 0}}>
+      {props.renderDefault(props)}
+    </ConnectFromRegion>
+  )
+}

package/src/assistDocument/RequestRunInstructionProvider.tsx

@@ -0,0 +1,50 @@
+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 {
+  documentOnChange: (event: PatchEvent) => void
+  // indicates if the document is a draft or liveEditable currently
+  isDocAssistable: boolean
+}
+
+export function isDocAssistable(
+  documentSchemaType: ObjectSchemaType,
+  published?: SanityDocument | null,
+  draft?: SanityDocument | null
+) {
+  return !!(documentSchemaType.liveEdit ? published : draft)
+}
+
+export function getAssistableDocId(documentSchemaType: ObjectSchemaType, documentId: string) {
+  const baseId = publicId(documentId)
+  return documentSchemaType.liveEdit ? baseId : `drafts.${baseId}`
+}
+
+export function useRequestRunInstruction(args: DocumentArgs) {
+  const {documentOnChange, isDocAssistable} = args
+
+  const {runInstruction, instructionLoading} = useRunInstruction()
+  const [queuedTask, setQueuedTask] = useState<RunInstructionArgs | undefined>(undefined)
+
+  useEffect(() => {
+    if (queuedTask && isDocAssistable) {
+      runInstruction(queuedTask)
+      setQueuedTask(undefined)
+    }
+  }, [queuedTask, isDocAssistable, 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]
+    ),
+  }
+}

package/src/assistDocument/components/AssistDocumentForm.tsx

@@ -0,0 +1,188 @@
+import {
+  assistFieldTypeName,
+  AssistInspectorRouteParams,
+  AssistDocument,
+  documentRootKey,
+  fieldPathParam,
+  AssistField,
+  instructionParam,
+} from '../../types'
+import {useEffect, useMemo} from 'react'
+import {
+  FormCallbacksProvider,
+  FormCallbacksValue,
+  FormInput,
+  insert,
+  KeyedSegment,
+  ObjectInputProps,
+  ObjectSchemaType,
+  Path,
+  SchemaType,
+  set,
+  setIfMissing,
+  stringToPath,
+  typed,
+  useFormCallbacks,
+  useSchema,
+} from 'sanity'
+import {BackToInstructionListLink} from './instruction/BackToInstructionsLink'
+import {useAiPaneRouter} from '../../assistInspector/helpers'
+import {SelectedFieldContextProvider, SelectedFieldContextValue} from './SelectedFieldContext'
+import {Stack} from '@sanity/ui'
+import {documentTypeFromAiDocumentId} from '../../helpers/ids'
+
+const EMPTY_FIELDS: AssistField[] = []
+
+export function AssistDocumentForm(props: ObjectInputProps) {
+  const {onChange} = props
+  const value = props.value as AssistDocument | undefined
+  const id = value?._id
+  const fields = value?.fields
+
+  const targetDocumentType = useMemo(() => {
+    if (!id) {
+      return undefined
+    }
+    return documentTypeFromAiDocumentId(id)
+  }, [id])
+
+  const {params, setParams} = useAiPaneRouter()
+  const pathKey = params[fieldPathParam]
+  const instruction = params[instructionParam]
+
+  const activeKey = useMemo(
+    () => (fields ?? EMPTY_FIELDS).find((f) => f.path === pathKey)?._key,
+    [fields, pathKey]
+  )
+
+  const activePath: Path | undefined = useMemo(() => {
+    if (!activeKey) {
+      return undefined
+    }
+    const base = ['fields', {_key: activeKey}]
+    return instruction ? [...base, 'instructions', {_key: instruction}] : base
+  }, [activeKey, instruction])
+
+  const schema = useSchema()
+  const documentSchema: ObjectSchemaType | undefined = useMemo(() => {
+    if (!targetDocumentType) {
+      return undefined
+    }
+    return schema.get(targetDocumentType) as ObjectSchemaType
+  }, [schema, targetDocumentType])
+
+  const fieldSchema = useSelectedSchema(pathKey, documentSchema)
+  const context: SelectedFieldContextValue = useMemo(
+    () => ({
+      documentSchema,
+      fieldSchema: fieldSchema ?? documentSchema,
+    }),
+    [fieldSchema, documentSchema]
+  )
+
+  const title = value?.title
+
+  useEffect(() => {
+    if (!title && documentSchema && !id?.startsWith('drafts.')) {
+      onChange(set(documentSchema.title ?? documentSchema.name, ['title']))
+    }
+  }, [title, documentSchema, onChange, id])
+
+  useEffect(() => {
+    if (activePath || !pathKey) {
+      return
+    }
+    onChange([
+      setIfMissing([], ['fields']),
+      insert(
+        [
+          typed<AssistField>({
+            _key: pathKey,
+            _type: assistFieldTypeName,
+            path: pathKey,
+          }),
+        ],
+        'after',
+        ['fields', -1]
+      ),
+    ])
+  }, [activePath, onChange, pathKey])
+
+  const {onPathOpen, ...formCallbacks} = useFormCallbacks()
+
+  const newCallbacks: FormCallbacksValue = useMemo(
+    () => ({
+      ...formCallbacks,
+      onPathOpen: (path) => {
+        if (!instruction && path.length === 4 && path[2] === 'instructions') {
+          setParams(
+            typed<AssistInspectorRouteParams>({
+              ...params,
+              [instructionParam]: (path[3] as KeyedSegment)?._key,
+            }) as Record<keyof AssistInspectorRouteParams, string | undefined>
+          )
+          onPathOpen([])
+        } else {
+          setTimeout(() => onPathOpen(path), 0)
+        }
+      },
+    }),
+    [formCallbacks, onPathOpen, params, setParams, instruction]
+  )
+
+  useEffect(() => {
+    if (activePath && !instruction) {
+      onPathOpen([])
+    }
+  }, [activePath, instruction, onPathOpen])
+
+  return (
+    <SelectedFieldContextProvider value={context}>
+      <Stack space={5}>
+        {instruction && <BackToInstructionListLink />}
+
+        {activePath && (
+          <FormCallbacksProvider {...newCallbacks}>
+            <div style={{lineHeight: '1.25em'}}>
+              <FormInput {...props} absolutePath={activePath} />
+            </div>
+          </FormCallbacksProvider>
+        )}
+
+        {!activePath && props.renderDefault(props)}
+      </Stack>
+    </SelectedFieldContextProvider>
+  )
+}
+
+function useSelectedSchema(
+  fieldPath: string | undefined,
+  documentSchema: ObjectSchemaType | undefined
+): SchemaType | undefined {
+  return useMemo(() => {
+    if (!fieldPath) {
+      return undefined
+    }
+    if (fieldPath === documentRootKey) {
+      return documentSchema
+    }
+
+    const path = stringToPath(fieldPath)
+    let currentSchema: ObjectSchemaType | undefined = documentSchema
+    for (let i = 0; i < path.length; i++) {
+      const segment = path[i]
+      const field = currentSchema?.fields.find((f) => f.name === segment)
+      if (!field) {
+        return undefined
+      }
+      if (i === path.length - 1) {
+        return field.type
+      }
+      if (field.type.jsonType !== 'object') {
+        return undefined
+      }
+      currentSchema = field.type
+    }
+    return currentSchema
+  }, [documentSchema, fieldPath])
+}

package/src/assistDocument/components/FieldRefPreview.tsx

@@ -0,0 +1,27 @@
+import {useContext} from 'react'
+import {useSelectedField} from '../../assistInspector/helpers'
+import {Box, Flex, Text} from '@sanity/ui'
+import {PreviewProps} from 'sanity'
+import {SelectedFieldContext} from './SelectedFieldContext'
+import {InlineBlockValueContext} from '../../assistFormComponents/AssistInlineFormBlock'
+
+export function FieldRefPreview(props: PreviewProps & {path?: string}) {
+  const documentSchema = useContext(SelectedFieldContext)?.documentSchema
+  const path = (useContext(InlineBlockValueContext) as {path?: string})?.path ?? props.path
+  const selectedField = useSelectedField(documentSchema, path)
+  return (
+    <Flex gap={2} align="center" style={{width: '100%'}}>
+      <Flex flex={1} gap={2} align="center" paddingY={3} paddingX={1}>
+        {/*<Box>
+          <Text>{selectedField?.icon ? createElement(selectedField?.icon) : <CodeIcon />}</Text>
+        </Box>*/}
+        <Box>
+          <Text size={1} textOverflow="ellipsis">
+            {selectedField?.title ?? 'Select field'}
+          </Text>
+        </Box>
+      </Flex>
+      <>{props.actions}</>
+    </Flex>
+  )
+}

package/src/assistDocument/components/InstructionsArrayField.tsx

@@ -0,0 +1,8 @@
+import {ArrayFieldProps} from 'sanity'
+
+export function InstructionsArrayField(props: ArrayFieldProps) {
+  return props.renderDefault({
+    ...props,
+    title: undefined,
+  })
+}

package/src/assistDocument/components/InstructionsArrayInput.tsx

@@ -0,0 +1,26 @@
+import {ArrayOfObjectsInputProps, useCurrentUser} from 'sanity'
+import {useMemo} from 'react'
+import {StudioInstruction} from '../../types'
+
+export function InstructionsArrayInput(props: ArrayOfObjectsInputProps) {
+  const user = useCurrentUser()
+
+  const originalValue = props.value as StudioInstruction[] | undefined
+  const originalMembers = props.members
+  const value = useMemo(
+    () => (originalValue ?? []).filter((v) => !v.userId || v.userId === user?.id),
+    [originalValue, user]
+  )
+  const members = useMemo(
+    () =>
+      (originalMembers ?? []).filter((v) => {
+        if (v.kind === 'error') {
+          return true
+        }
+        const value = v?.item?.value as any
+        return !value.userId || value.userId === user?.id
+      }),
+    [originalMembers, user]
+  )
+  return props.renderDefault({...props, value, members})
+}

package/src/assistDocument/components/SelectedFieldContext.tsx

@@ -0,0 +1,10 @@
+import {ObjectSchemaType, SchemaType} from 'sanity'
+import {createContext} from 'react'
+
+export interface SelectedFieldContextValue {
+  documentSchema?: ObjectSchemaType
+  fieldSchema?: SchemaType
+}
+
+export const SelectedFieldContext = createContext<SelectedFieldContextValue | undefined>(undefined)
+export const SelectedFieldContextProvider = SelectedFieldContext.Provider

package/src/assistDocument/components/generic/HiddenFieldTitle.tsx

@@ -0,0 +1,5 @@
+import {FieldProps} from 'sanity'
+
+export function HiddenFieldTitle(props: FieldProps) {
+  return props.renderDefault({...props, title: '', level: props.level - 2, changed: false})
+}

package/src/assistDocument/components/helpers.ts

@@ -0,0 +1,21 @@
+import {FieldError, FieldMember, FieldSetMember, ObjectMember} from 'sanity'
+
+export function findFieldMember(
+  members: ObjectMember[],
+  fieldName: string
+): FieldMember | FieldError | undefined {
+  return members.find(
+    (m): m is FieldMember | FieldError =>
+      (m.kind === 'field' && m.name === fieldName) ||
+      (m.kind === 'error' && m.fieldName === fieldName)
+  )
+}
+
+export function findFieldsetMember(
+  members: ObjectMember[],
+  fieldsetName: string
+): FieldSetMember | undefined {
+  return members.find(
+    (m): m is FieldSetMember => m.kind === 'fieldSet' && m.fieldSet.name === fieldsetName
+  )
+}

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

@@ -0,0 +1,31 @@
+import {ArrowLeftIcon} from '@sanity/icons'
+import {Button} from '@sanity/ui'
+import {useCallback} from 'react'
+import {instructionParam} from '../../../types'
+import {useDocumentPane} from 'sanity/desk'
+import {aiInspectorId} from '../../../assistInspector/constants'
+
+export function BackToInstructionListLink() {
+  const {openInspector} = useDocumentPane()
+
+  const goBack = useCallback(
+    () => openInspector(aiInspectorId, {[instructionParam]: undefined as any}),
+    [openInspector]
+  )
+
+  return (
+    <div>
+      <Button
+        as="a"
+        fontSize={1}
+        icon={ArrowLeftIcon}
+        mode="bleed"
+        padding={1}
+        space={2}
+        onClick={goBack}
+        text="  Instructions"
+        textAlign="left"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+import {set, StringInputProps} from 'sanity'
+import {useCallback, useContext, useEffect, useId, useRef} from 'react'
+import {Box} from '@sanity/ui'
+import {SelectedFieldContext} from '../SelectedFieldContext'
+import {FieldAutocomplete} from '../../../assistInspector/FieldAutocomplete'
+
+export function FieldRefPathInput(props: StringInputProps) {
+  const documentSchema = useContext(SelectedFieldContext)?.documentSchema
+  const ref = useRef<HTMLDivElement>(null)
+  const id = useId()
+  const {onChange} = props
+
+  useEffect(() => {
+    ref.current?.querySelector('input')?.focus()
+  }, [])
+
+  const onSelect = useCallback((path: string) => onChange(set(path)), [onChange])
+
+  if (!documentSchema) {
+    return props.renderDefault(props)
+  }
+
+  return (
+    <Box flex={1} style={{minWidth: 200}} ref={ref}>
+      <FieldAutocomplete
+        id={id}
+        schemaType={documentSchema}
+        onSelect={onSelect}
+        fieldPath={props.value}
+      />
+    </Box>
+  )
+}