@sanity/assist 1.0.0

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

@@ -0,0 +1,87 @@
+import {FieldError, FieldMember, ObjectInputMember, ObjectInputProps} from 'sanity'
+import {findFieldMember, findFieldsetMember} from '../helpers'
+import {Box, Flex, Stack, Text} from '@sanity/ui'
+import {useId, useMemo} from 'react'
+
+export function InstructionInput(props: ObjectInputProps) {
+  return (
+    <Stack space={[4, 4, 4, 5]}>
+      <NameField {...props} />
+      <ShareField {...props} />
+      <PromptField {...props} />
+    </Stack>
+  )
+}
+
+function PromptField(props: ObjectInputProps) {
+  const promptMember = findFieldMember(props.members, 'prompt')
+  return promptMember ? <ObjectInputMember {...props} member={promptMember} /> : null
+}
+
+const NONE: (FieldMember | FieldError)[] = []
+
+function NameField(props: ObjectInputProps) {
+  const fieldsetMember = findFieldsetMember(props.members, 'appearance')
+  const titleId = useId()
+
+  const members = fieldsetMember?.fieldSet.members ?? NONE
+  const iconMember = findFieldMember(members, 'icon')
+  const titleMember = findFieldMember(members, 'title')
+
+  const titlePlaceholder = 'Untitled'
+  const moddedTitleMember = useMemo(() => {
+    if (!titleMember) {
+      return undefined
+    }
+    if (titleMember.kind === 'error') {
+      return titleMember
+    }
+    return {
+      ...titleMember,
+      field: {
+        ...titleMember?.field,
+        schemaType: {
+          ...titleMember?.field.schemaType,
+          placeholder: titlePlaceholder,
+        },
+      },
+    }
+  }, [titleMember, titlePlaceholder])
+
+  return (
+    <Stack space={5}>
+      <Stack space={2}>
+        <Flex gap={1}>
+          <Text as="label" weight="semibold" size={1} htmlFor={titleId}>
+            Name
+          </Text>
+        </Flex>
+
+        <Text muted size={1}>
+          How this instruction appears in menus
+        </Text>
+
+        <Flex align="center">
+          {iconMember && (
+            <Box flex="none">
+              <ObjectInputMember {...props} member={iconMember} />
+            </Box>
+          )}
+          {moddedTitleMember && (
+            <Box flex={1} style={{marginLeft: -1}}>
+              <ObjectInputMember {...props} member={moddedTitleMember} />
+            </Box>
+          )}
+        </Flex>
+      </Stack>
+    </Stack>
+  )
+}
+
+function ShareField(props: ObjectInputProps) {
+  const fieldsetMember = findFieldsetMember(props.members, 'appearance')
+  const members = fieldsetMember?.fieldSet.members ?? NONE
+  const visibilityMember = findFieldMember(members, 'userId')
+
+  return <>{visibilityMember && <ObjectInputMember {...props} member={visibilityMember} />}</>
+}

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

@@ -0,0 +1,52 @@
+import {ArrayOfObjectsInputProps, set, typed} from 'sanity'
+import {Box} from '@sanity/ui'
+import styled from 'styled-components'
+import {useEffect} from 'react'
+import {ContextBlock, FieldRef, PromptBlock, PromptTextBlock, UserInputBlock} from '../../../types'
+import {randomKey} from '../../../_lib/randomKey'
+
+const PteMods = styled(Box)`
+  & [data-testid='pt-editor__toolbar-card'] > div > div:last-child {
+    display: none;
+  }
+  & [data-testid='pt-editor'] {
+    min-height: 300px;
+  }
+  & [data-testid='pt-editor'] .pt-inline-object * {
+    max-width: 400px;
+  }
+`
+
+export function PromptInput(props: ArrayOfObjectsInputProps) {
+  // quickfixes the model (converts blocks to inline blocks for alpha customers)
+  // backend supports both types, but this prevents "missing block" schema errors
+  useOnlyInlineBlocks(props)
+  return <PteMods>{props.renderDefault(props)}</PteMods>
+}
+
+function useOnlyInlineBlocks(props: ArrayOfObjectsInputProps) {
+  useEffect(() => {
+    let needsFix = false
+    const val = ((props.value as PromptBlock[]) ?? []).map((block) => {
+      if (block._type === 'block') {
+        return block
+      }
+
+      needsFix = true
+      return typed<PromptTextBlock>({
+        _key: randomKey(12),
+        _type: 'block',
+        level: 0,
+        markDefs: [],
+        style: 'normal',
+        children: [block as FieldRef | ContextBlock | UserInputBlock],
+      })
+    })
+
+    if (needsFix) {
+      props.onChange(set(val))
+    }
+    // only run this once when loading the field
+    // eslint-disable-next-line
+  }, [])
+}

package/src/assistDocument/components/instruction/appearance/IconInput.tsx

@@ -0,0 +1,46 @@
+import {icons} from '@sanity/icons'
+import {set, StringInputProps} from 'sanity'
+import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
+import {ElementType, ReactNode, useCallback, useId, useMemo} from 'react'
+
+export function IconInput(props: StringInputProps) {
+  const {value, onChange} = props
+  const id = useId()
+  const items = useMemo(
+    () =>
+      Object.entries(icons).map(([key, icon]) => (
+        <IconItem key={key} iconKey={key} icon={icon} onChange={onChange} />
+      )),
+    [onChange]
+  )
+
+  const selectedIcon = useMemo(() => getIcon(value), [value])
+
+  return (
+    <MenuButton
+      button={
+        <Button icon={selectedIcon} title="Select icon" padding={3} mode="ghost" radius={1} />
+      }
+      id={id}
+      menu={<Menu style={{maxHeight: 300}}>{items}</Menu>}
+      popover={{portal: true}}
+    />
+  )
+}
+
+function IconItem({
+  icon,
+  iconKey: key,
+  onChange,
+}: {
+  iconKey: string
+  icon: ElementType | ReactNode
+  onChange: StringInputProps['onChange']
+}) {
+  const onClick = useCallback(() => onChange(set(key)), [onChange, key])
+  return <MenuItem icon={icon} title={key} text={key} onClick={onClick} />
+}
+
+export function getIcon(iconName?: string) {
+  return Object.entries(icons).find(([key]) => key === iconName)?.[1] ?? icons.sparkles
+}

package/src/assistDocument/components/instruction/appearance/InstructionVisibility.tsx

@@ -0,0 +1,37 @@
+import {set, StringInputProps, unset, useCurrentUser} from 'sanity'
+import {Card, Flex, Switch, Text} from '@sanity/ui'
+import {useCallback, useId} from 'react'
+
+export function InstructionVisibility(props: StringInputProps) {
+  const {value, onChange} = props
+
+  const user = useCurrentUser()
+
+  const handleChange = useCallback(() => {
+    const newValue = value ? '' : user?.id ?? ''
+    onChange(newValue ? set(newValue) : unset())
+  }, [onChange, user, value])
+
+  const id = useId()
+
+  return (
+    <Card>
+      <Flex gap={2} align="flex-start">
+        <div style={{margin: '-3px 0'}}>
+          <Switch
+            {...props.elementProps}
+            id={id}
+            value={`${!value}`}
+            checked={!value}
+            onChange={handleChange}
+            disabled={props.elementProps.readOnly}
+          />
+        </div>
+
+        <Text muted size={1} weight="medium">
+          <label htmlFor={id}>Make visible to all Studio members</label>
+        </Text>
+      </Flex>
+    </Card>
+  )
+}

package/src/assistDocument/hooks/useAssistDocumentContextValue.tsx

@@ -0,0 +1,68 @@
+import {getPublishedId, ObjectSchemaType, useEditState} from 'sanity'
+import {useStudioAssistDocument} from './useStudioAssistDocument'
+import {AssistDocumentContextValue} from '../AssistDocumentContext'
+import {useMemo} from 'react'
+import {isDocAssistable} from '../RequestRunInstructionProvider'
+import {useDocumentPane} from 'sanity/desk'
+import {useAiPaneRouter} from '../../assistInspector/helpers'
+import {fieldPathParam} from '../../types'
+
+export function useAssistDocumentContextValue(
+  documentId: string,
+  documentSchemaType: ObjectSchemaType
+) {
+  const {published, draft} = useEditState(
+    getPublishedId(documentId),
+    documentSchemaType.name,
+    'low'
+  )
+  const assistableDocumentId = draft?._id || published?._id || documentId
+  const documentIsNew = Boolean(!draft?._id && !published?._id)
+  const documentIsAssistable = isDocAssistable(documentSchemaType, published, draft)
+
+  const {params} = useAiPaneRouter()
+  const selectedPath = params[fieldPathParam]
+  const {openInspector, closeInspector, inspector, onChange: documentOnChange} = useDocumentPane()
+
+  const assistDocument = useStudioAssistDocument({
+    documentId,
+    schemaType: documentSchemaType,
+  })
+
+  const value: AssistDocumentContextValue = useMemo(() => {
+    const base = {
+      documentId,
+      assistableDocumentId,
+      documentSchemaType,
+      documentIsNew,
+      documentIsAssistable,
+      openInspector,
+      closeInspector,
+      inspector,
+      documentOnChange,
+      selectedPath,
+    }
+    if (!assistDocument) {
+      return {...base, loading: true, assistDocument: undefined}
+    }
+    return {
+      ...base,
+      loading: false,
+      assistDocument: assistDocument,
+    }
+  }, [
+    assistDocument,
+    documentIsAssistable,
+    documentId,
+    assistableDocumentId,
+    documentSchemaType,
+    documentIsNew,
+    openInspector,
+    closeInspector,
+    inspector,
+    documentOnChange,
+    selectedPath,
+  ])
+
+  return value
+}

package/src/assistDocument/hooks/useDocumentState.ts

@@ -0,0 +1,6 @@
+import {useEditState} from 'sanity'
+
+export function useDocumentState<T>(id: string, docType: string): T | undefined {
+  const state = useEditState(id, docType)
+  return (state.draft || state.published) as T | undefined
+}

package/src/assistDocument/hooks/useInstructionToaster.tsx

@@ -0,0 +1,74 @@
+import {useEffect, useRef} from 'react'
+import {InstructionTask} from '../../types'
+import {addSeconds, isAfter} from 'date-fns'
+import {getInstructionTitle} from '../../helpers/misc'
+import {useStudioAssistDocument} from './useStudioAssistDocument'
+import {ObjectSchemaType, useCurrentUser} from 'sanity'
+import {useToast} from '@sanity/ui'
+
+const NO_TASKS: InstructionTask[] = []
+
+export function useInstructionToaster(documentId: string, documentSchemaType: ObjectSchemaType) {
+  const assistDocument = useStudioAssistDocument({documentId, schemaType: documentSchemaType})
+
+  const assistDocLoaded = !!assistDocument
+  const currentUser = useCurrentUser()
+  const toast = useToast()
+  const tasks = assistDocument?.tasks
+  const previousTasks = useRef<InstructionTask[] | undefined | 'initial'>('initial')
+
+  useEffect(() => {
+    if (!assistDocLoaded) {
+      return
+    }
+
+    if (previousTasks.current !== 'initial') {
+      const prevTaskByKey = Object.fromEntries(
+        (previousTasks.current ?? NO_TASKS).map((run) => [run._key, run])
+      )
+      const endedTasks = tasks
+        ?.filter((task) => task.startedByUserId === currentUser?.id)
+        .filter((task) => {
+          const prevTask = prevTaskByKey[task._key]
+          return (!prevTask && task.ended) || (!prevTask?.ended && task.ended)
+        })
+        // filter out old stuff
+        .filter((task) => task.ended && isAfter(addSeconds(new Date(task.ended), 30), new Date()))
+
+      endedTasks?.forEach((task) => {
+        const title = getInstructionTitle(task.instruction)
+        if (task.reason === 'error') {
+          toast.push({
+            title: `Failed: ${title}`,
+            status: 'error',
+            description: `Instruction failed. ${task.message ?? ''}`,
+            closable: true,
+            duration: 10000,
+          })
+        } else if (task.reason === 'timeout') {
+          toast.push({
+            title: `Timeout: ${title}`,
+            status: 'error',
+            description: `Instruction timed out.`,
+            closable: true,
+          })
+        } else if (task.reason === 'success') {
+          toast.push({
+            title: `Success: ${title}`,
+            status: 'success',
+            description: `Instruction completed.`,
+            closable: true,
+          })
+        } else if (task.reason === 'aborted') {
+          toast.push({
+            title: `Canceled: ${title}`,
+            status: 'warning',
+            description: `Instruction canceled.`,
+            closable: true,
+          })
+        }
+      })
+    }
+    previousTasks.current = tasks
+  }, [tasks, previousTasks, toast, currentUser, assistDocLoaded])
+}

package/src/assistDocument/hooks/useStudioAssistDocument.ts

@@ -0,0 +1,119 @@
+import {useEffect, useMemo} from 'react'
+import {
+  assistDocumentTypeName,
+  AssistTasksStatus,
+  assistTasksStatusTypeName,
+  FieldRef,
+  fieldReferenceTypeName,
+  InstructionTask,
+  StudioAssistDocument,
+  StudioAssistField,
+  StudioInstruction,
+} from '../../types'
+import {
+  ObjectSchemaType,
+  pathToString,
+  typed,
+  useClient,
+  useCurrentUser,
+  useValidationStatus,
+  ValidationMarker,
+} from 'sanity'
+import {useDocumentState} from './useDocumentState'
+import {assistDocumentId, assistTasksStatusId, publicId} from '../../helpers/ids'
+import {maxHistoryVisibilityMs} from '../../constants'
+
+interface UseAssistDocumentProps {
+  documentId: string
+  schemaType: ObjectSchemaType
+}
+
+export function useStudioAssistDocument({
+  documentId,
+  schemaType,
+}: UseAssistDocumentProps): StudioAssistDocument | undefined {
+  const documentTypeName = schemaType.name
+  const currentUser = useCurrentUser()
+
+  const validation = useValidationStatus(publicId(documentId), schemaType.name).validation
+  const assistDocument = useDocumentState<StudioAssistDocument>(
+    assistDocumentId(documentTypeName),
+    assistDocumentTypeName
+  )
+  const assistTasksStatus = useDocumentState<AssistTasksStatus>(
+    assistTasksStatusId(documentId ?? ''),
+    assistTasksStatusTypeName
+  )
+
+  const client = useClient({apiVersion: '2023-01-01'})
+
+  useEffect(() => {
+    if (!assistDocument) {
+      client.createIfNotExists({
+        _id: assistDocumentId(documentTypeName),
+        _type: assistDocumentTypeName,
+      })
+    }
+  }, [client, assistDocument, documentTypeName])
+
+  return useMemo(() => {
+    if (!assistDocument) {
+      return undefined
+    }
+    const tasks = assistTasksStatus?.tasks ?? []
+    const fields = (assistDocument?.fields ?? []).map((assistField): StudioAssistField => {
+      return {
+        ...assistField,
+        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)),
+      }
+    })
+    return typed<StudioAssistDocument>({
+      ...assistDocument,
+      tasks: tasks?.map((task) => {
+        const instruction = fields
+          .find((f) => f.path === task.path)
+          ?.instructions?.find((i) => i._key === task.instructionKey)
+        return {
+          ...task,
+          instruction,
+        }
+      }),
+      fields: fields,
+    })
+  }, [assistDocument, assistTasksStatus, currentUser, validation])
+}
+
+function asStudioInstruction(
+  instruction: StudioInstruction,
+  run: InstructionTask[],
+  validation: ValidationMarker[]
+): 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
+      .filter((task) => task.instructionKey === instruction._key)
+      .filter(
+        (task) =>
+          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/assistDocument/index.ts

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

package/src/assistFormComponents/AssistField.tsx

@@ -0,0 +1,51 @@
+import {FieldProps, isArraySchemaType} from 'sanity'
+import {useAssistPresence} from '../presence/useAssistPresence'
+import {useMemo} from 'react'
+import {Box, Flex} from '@sanity/ui'
+import {contextDocumentTypeName} from '../types'
+import {isAssistSupported} from '../helpers/assistSupported'
+import {isPortableTextArray, isType} from '../helpers/typeUtils'
+import {AiFieldPresence} from '../presence/AiFieldPresence'
+import {FieldActionsOnboarding} from '../onboarding/FieldActionsOnboarding'
+
+export function AssistFieldWrapper(props: FieldProps) {
+  const {schemaType} = props
+
+  const isSupported = useMemo(() => isAssistSupported(schemaType), [schemaType])
+
+  if (
+    !isSupported ||
+    schemaType.name.startsWith('sanity.') ||
+    schemaType.name === contextDocumentTypeName
+  ) {
+    return props.renderDefault(props)
+  }
+  if (!isType(props.schemaType, 'document') && props.inputId !== 'root') {
+    return <AssistField {...props}>{props.children}</AssistField>
+  }
+
+  return props.renderDefault(props)
+}
+
+export function AssistField(props: FieldProps) {
+  const isPortableText = useMemo(
+    () => !!(isArraySchemaType(props.schemaType) && isPortableTextArray(props.schemaType)),
+    [props.schemaType]
+  )
+
+  const presence = useAssistPresence(props.path, isPortableText)
+
+  const actions = (
+    <Flex gap={2} align="center" justify="space-between">
+      {presence.map((pre) => (
+        <Box key={pre.user.id}>
+          <AiFieldPresence key={pre.lastActiveAt} presence={pre} />
+        </Box>
+      ))}
+
+      <FieldActionsOnboarding {...props}>{props.actions}</FieldActionsOnboarding>
+    </Flex>
+  )
+
+  return props.renderDefault({...props, actions})
+}

package/src/assistFormComponents/AssistFormBlock.tsx

@@ -0,0 +1,31 @@
+import {BlockProps, PatchEvent, useFormCallbacks} from 'sanity'
+import {useAssistPresence} from '../presence/useAssistPresence'
+import {Box, Flex} from '@sanity/ui'
+import {ErrorWrapper} from '../components/SafeValueInput'
+import {useCallback} from 'react'
+import {AiFieldPresence} from '../presence/AiFieldPresence'
+
+export function AssistFormBlock(props: BlockProps) {
+  const presence = useAssistPresence(props.path, true)
+  const {onChange} = useFormCallbacks()
+  const key = props.value._key
+  const localOnChange = useCallback(
+    (patchEvent: PatchEvent) => {
+      if (!key) {
+        return
+      }
+      onChange(PatchEvent.from(patchEvent).prefixAll({_key: key}))
+    },
+    [onChange, key]
+  )
+  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} />
+        ))}
+      </Flex>
+    </ErrorWrapper>
+  )
+}

package/src/assistFormComponents/AssistInlineFormBlock.tsx

@@ -0,0 +1,14 @@
+import {BlockProps} from 'sanity'
+import {Box} from '@sanity/ui'
+import {createContext} from 'react'
+
+// workaround for preview value sometimes lagging behind
+export const InlineBlockValueContext = createContext<unknown>(undefined)
+
+export function AssistInlineFormBlock(props: BlockProps) {
+  return (
+    <InlineBlockValueContext.Provider value={props.value}>
+      <Box flex={1}>{props.renderDefault(props)}</Box>
+    </InlineBlockValueContext.Provider>
+  )
+}

package/src/assistFormComponents/AssistItem.tsx

@@ -0,0 +1,20 @@
+import {ItemProps} from 'sanity'
+import {useAssistPresence} from '../presence/useAssistPresence'
+import {Box, Flex} from '@sanity/ui'
+import {AiFieldPresence} from '../presence/AiFieldPresence'
+
+export function AssistItem(props: ItemProps) {
+  const {path} = props
+  const presence = useAssistPresence(path, true)
+
+  return (
+    <Flex align="center" width="fill" style={{position: 'relative'}}>
+      <Box flex={1}>{props.renderDefault({...props})}</Box>
+      {presence.map((pre) => (
+        <Box key={pre.user.id} style={{position: 'absolute', right: 35}}>
+          <AiFieldPresence presence={pre} />
+        </Box>
+      ))}
+    </Flex>
+  )
+}

package/src/assistFormComponents/validation/listItem.tsx

@@ -0,0 +1,63 @@
+import {Path, ValidationMarker} from 'sanity'
+import {useCallback} from 'react'
+import {Box, ButtonTone, Flex, MenuItem, Stack, Text} from '@sanity/ui'
+import styled from 'styled-components'
+
+interface ValidationListItemProps {
+  marker: ValidationMarker
+  onClick?: (path?: Path) => void
+  path: string
+  truncate?: boolean
+}
+
+const StyledText = styled(Text)`
+  white-space: initial;
+`
+
+const MENU_ITEM_TONES: Record<'error' | 'warning' | 'info', ButtonTone> = {
+  error: 'critical',
+  warning: 'caution',
+  info: 'primary',
+}
+
+export function ListItem(props: ValidationListItemProps) {
+  const {marker, onClick, path, truncate} = props
+
+  const handleClick = useCallback(() => {
+    if (onClick) {
+      onClick(marker.path)
+    }
+  }, [marker.path, onClick])
+
+  const menuItemTone = MENU_ITEM_TONES[marker?.level] || undefined
+
+  const children = (
+    <Flex>
+      {/*      <Box>
+        <Text size={1}>
+          {marker.level === 'error' && <ErrorOutlineIcon />}
+          {marker.level === 'warning' && <WarningOutlineIcon />}
+          {marker.level === 'info' && <InfoOutlineIcon />}
+        </Text>
+      </Box>*/}
+
+      <Stack space={2} flex={1}>
+        {path && (
+          <StyledText size={1} weight="semibold">
+            {path}
+          </StyledText>
+        )}
+        {marker.item.message && (
+          <StyledText muted size={1} textOverflow={truncate ? 'ellipsis' : undefined}>
+            {marker.item.message}
+          </StyledText>
+        )}
+      </Stack>
+    </Flex>
+  )
+  return (
+    <MenuItem padding={1} onClick={handleClick} radius={2} tone={menuItemTone}>
+      <Box padding={2}>{children}</Box>
+    </MenuItem>
+  )
+}