@sanity/assist 5.0.3 → 6.0.0

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

@@ -1,54 +0,0 @@
-import {Box} from '@sanity/ui'
-import {useCallback, useContext, useEffect, useId, useRef} from 'react'
-import {set, StringInputProps} from 'sanity'
-
-import {FieldAutocomplete} from '../../../assistInspector/FieldAutocomplete'
-import {FieldRef} from '../../../assistInspector/helpers'
-import {AssistTypeContext} from '../AssistTypeContext'
-import {SelectedFieldContext} from '../SelectedFieldContext'
-
-export function FieldRefPathInput(props: StringInputProps) {
-  const documentSchema = useContext(SelectedFieldContext)?.documentSchema
-  const {typePath} = useContext(AssistTypeContext)
-  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])
-
-  const filter = useCallback(
-    (field: FieldRef) => {
-      if (!field.key.includes('|') || !typePath) {
-        return true
-      }
-      if (field.key.includes('|') && !typePath.includes('|')) {
-        return false
-      }
-
-      const fieldSegments = field.key.split('.')
-      const lastArrayItemIndex = fieldSegments.findLastIndex((s) => s.includes('|'))
-      const mustStartWith = fieldSegments.slice(0, lastArrayItemIndex + 1).join('.')
-      return typePath.startsWith(mustStartWith)
-    },
-    [typePath],
-  )
-  if (!documentSchema) {
-    return props.renderDefault(props)
-  }
-
-  return (
-    <Box flex={1} style={{minWidth: 300}} ref={ref}>
-      <FieldAutocomplete
-        id={id}
-        schemaType={documentSchema}
-        onSelect={onSelect}
-        fieldPath={props.value}
-        filter={filter}
-      />
-    </Box>
-  )
-}

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

@@ -1,89 +0,0 @@
-import {Box, Flex, Stack, Text} from '@sanity/ui'
-import {useId, useMemo} from 'react'
-import {FieldError, FieldMember, ObjectInputMember, ObjectInputProps} from 'sanity'
-
-import {findFieldMember, findFieldsetMember} from '../helpers'
-
-export function InstructionInput(props: ObjectInputProps) {
-  return (
-    <Stack space={[4, 4, 4, 5]}>
-      <NameField {...props} />
-      <ShareField {...props} />
-      <ObjectMember fieldName={'prompt'} {...props} />
-      <ObjectMember fieldName={'output'} {...props} />
-    </Stack>
-  )
-}
-
-function ObjectMember({fieldName, ...props}: ObjectInputProps & {fieldName: string}) {
-  const member = findFieldMember(props.members, fieldName)
-  return member ? <ObjectInputMember {...props} member={member} /> : 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/InstructionOutputField.tsx

@@ -1,46 +0,0 @@
-import {useCallback, useContext, useState} from 'react'
-import {
-  ArrayFieldProps,
-  ArraySchemaType,
-  isArrayOfObjectsSchemaType,
-  isObjectSchemaType,
-  ObjectSchemaType,
-} from 'sanity'
-
-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

@@ -1,206 +0,0 @@
-import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
-import {useCallback, useContext, useEffect, useMemo} from 'react'
-import {
-  ArrayOfObjectsInputProps,
-  ArraySchemaType,
-  FormPatch,
-  insert,
-  isArrayOfObjectsSchemaType,
-  isObjectSchemaType,
-  ObjectSchemaType,
-  PatchEvent,
-  setIfMissing,
-  typed,
-  unset,
-} from 'sanity'
-
-import {isAssistSupported} from '../../../helpers/assistSupported'
-import {isType} from '../../../helpers/typeUtils'
-import {OutputFieldItem, outputFieldTypeName, OutputTypeItem} from '../../../types'
-import {SelectedFieldContext} from '../SelectedFieldContext'
-
-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/components/instruction/PromptInput.tsx

@@ -1,59 +0,0 @@
-import {Box} from '@sanity/ui'
-import {useEffect} from 'react'
-import {type ArrayOfObjectsInputProps, set, typed} from 'sanity'
-import {styled} from 'styled-components'
-
-import {randomKey} from '../../../_lib/randomKey'
-import type {
-  ContextBlock,
-  FieldRef,
-  PromptBlock,
-  PromptTextBlock,
-  UserInputBlock,
-} from '../../../types'
-
-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

@@ -1,46 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
-import {ElementType, ReactNode, useCallback, useId, useMemo} from 'react'
-import {set, StringInputProps} from 'sanity'
-
-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

@@ -1,37 +0,0 @@
-import {Card, Flex, Switch, Text} from '@sanity/ui'
-import {useCallback, useId} from 'react'
-import {set, StringInputProps, unset, useCurrentUser} from 'sanity'
-
-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

@@ -1,129 +0,0 @@
-import {useCallback, useEffect, useMemo, useState} from 'react'
-import {getDraftId, getVersionId, type ObjectSchemaType, useSchema} from 'sanity'
-import {useDocumentPane} from 'sanity/structure'
-import {fieldPathParam, InstructionTask} from '../../types'
-import {AssistDocumentContextValue} from '../AssistDocumentContext'
-import {isDocAssistable} from '../RequestRunInstructionProvider'
-import {useStudioAssistDocument} from './useStudioAssistDocument'
-import {useAiAssistanceConfig} from '../../assistLayout/AiAssistanceConfigContext'
-import {useAiPaneRouter} from '../../assistInspector/helpers'
-
-export function useAssistDocumentContextValue(documentId: string, documentType: string) {
-  const schema = useSchema()
-
-  const {getFieldRefs, getFieldRefsByTypePath} = useAiAssistanceConfig()
-  const documentSchemaType = useMemo(() => {
-    const schemaType = schema.get(documentType) as ObjectSchemaType | undefined
-    if (!schemaType) {
-      throw new Error(`Schema type "${documentType}" not found`)
-    }
-    return schemaType
-  }, [documentType, schema])
-
-  const {fieldRefs, fieldRefsByTypePath} = useMemo(() => {
-    return {
-      fieldRefs: getFieldRefs(documentType),
-      fieldRefsByTypePath: getFieldRefsByTypePath(documentType),
-    }
-  }, [getFieldRefs, getFieldRefsByTypePath, documentType])
-
-  const {
-    openInspector,
-    closeInspector,
-    inspector,
-    onChange: documentOnChange,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore this is a valid option available in `corel` - Remove after corel is merged to next
-    selectedReleaseId,
-    editState,
-  } = useDocumentPane()
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore this is a valid option available in `corel` - Remove after corel is merged to next
-  const {draft, published, version} = editState || {}
-
-  const assistableDocumentId = selectedReleaseId
-    ? getVersionId(documentId, selectedReleaseId)
-    : documentSchemaType.liveEdit
-      ? documentId
-      : getDraftId(documentId)
-
-  const documentIsNew = selectedReleaseId ? !version?._id : !draft?._id && !published?._id
-  const documentIsAssistable = selectedReleaseId
-    ? !!version
-    : isDocAssistable(documentSchemaType, published, draft)
-
-  const {params} = useAiPaneRouter()
-  const selectedPath = params[fieldPathParam]
-
-  const assistDocument = useStudioAssistDocument({
-    documentId: assistableDocumentId,
-    schemaType: documentSchemaType,
-  })
-  const {syntheticTasks, addSyntheticTask, removeSyntheticTask} =
-    useSyntheticTasks(assistableDocumentId)
-
-  const value: AssistDocumentContextValue = useMemo(() => {
-    const base = {
-      assistableDocumentId,
-      documentSchemaType,
-      documentIsNew,
-      documentIsAssistable,
-      openInspector,
-      closeInspector,
-      inspector,
-      documentOnChange,
-      selectedPath,
-      syntheticTasks,
-      addSyntheticTask,
-      removeSyntheticTask,
-      fieldRefs,
-      fieldRefsByTypePath,
-    }
-    if (!assistDocument) {
-      return {...base, loading: true, assistDocument: undefined}
-    }
-    return {
-      ...base,
-      loading: false,
-      assistDocument: assistDocument,
-    }
-  }, [
-    assistDocument,
-    documentIsAssistable,
-    assistableDocumentId,
-    documentSchemaType,
-    documentIsNew,
-    openInspector,
-    closeInspector,
-    inspector,
-    documentOnChange,
-    selectedPath,
-    syntheticTasks,
-    addSyntheticTask,
-    removeSyntheticTask,
-    fieldRefs,
-    fieldRefsByTypePath,
-  ])
-
-  return value
-}
-
-function useSyntheticTasks(assistableDocumentId: string) {
-  const [syntheticTasks, setSyntheticTasks] = useState<InstructionTask[]>(() => [])
-  const addSyntheticTask = useCallback((task: InstructionTask) => {
-    setSyntheticTasks((current) => [...current, task])
-  }, [])
-  const removeSyntheticTask = useCallback((task: InstructionTask) => {
-    setSyntheticTasks((current) => current.filter((t) => task._key !== t._key))
-  }, [])
-
-  useEffect(() => {
-    setSyntheticTasks([])
-  }, [assistableDocumentId])
-
-  return {
-    syntheticTasks,
-    addSyntheticTask,
-    removeSyntheticTask,
-  }
-}

package/src/assistDocument/hooks/useDocumentState.ts

@@ -1,6 +0,0 @@
-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
-}