@sanity/assist 5.0.3 → 6.0.0

package/src/assistInspector/InstructionTaskHistoryButton.tsx

@@ -1,262 +0,0 @@
-import {
-  CheckmarkCircleIcon,
-  ClockIcon,
-  CloseCircleIcon,
-  ErrorOutlineIcon,
-  SyncIcon,
-} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Popover,
-  Spinner,
-  Stack,
-  Text,
-  useClickOutside,
-  useGlobalKeyDown,
-  useLayer,
-} from '@sanity/ui'
-import {createElement, type ForwardedRef, forwardRef, useCallback, useMemo, useState} from 'react'
-import {StatusButton, type StatusButtonProps, typed, useClient} from 'sanity'
-import {keyframes, styled} from 'styled-components'
-
-import {TimeAgo} from '../components/TimeAgo'
-import {maxHistoryVisibilityMs, pluginTitle} from '../constants'
-import {assistTasksStatusId} from '../helpers/ids'
-import {getInstructionTitle} from '../helpers/misc'
-import type {AssistTasksStatus, InstructionTask, StudioInstruction, TaskEndedReason} from '../types'
-
-export interface InstructionTaskHistoryButtonProps {
-  documentId?: string
-  tasks: InstructionTask[] | undefined
-  instructions: StudioInstruction[] | undefined
-  showTitles: boolean
-}
-
-interface CancelableInstructionTask extends InstructionTask {
-  cancel: () => void
-  title?: string
-}
-
-const rotate = keyframes`
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`
-
-const SyncSpinningIcon = styled(SyncIcon)`
-  animation: ${rotate} 1s linear infinite;
-`
-
-const TASK_CONFIG = {
-  aborted: {
-    title: 'Canceled',
-    icon: CloseCircleIcon,
-    tone: 'transparent',
-  },
-  error: {
-    title: 'Error',
-    icon: ErrorOutlineIcon,
-    tone: 'critical',
-  },
-  success: {
-    title: 'Completed',
-    icon: CheckmarkCircleIcon,
-    tone: 'positive',
-  },
-  timeout: {
-    title: 'Timeout',
-    icon: ClockIcon,
-    tone: 'caution',
-  },
-} as const
-
-export function InstructionTaskHistoryButton(props: InstructionTaskHistoryButtonProps) {
-  const {tasks, instructions, documentId, showTitles} = props
-
-  const client = useClient({apiVersion: '2023-01-01'})
-  const cancelRun = useCallback(
-    (taskKey: string) => {
-      if (!documentId) {
-        return
-      }
-      const statusDocId = assistTasksStatusId(documentId)
-      const basePath = `${typed<keyof AssistTasksStatus>('tasks')}[_key=="${taskKey}"]`
-      client
-        .patch(statusDocId)
-        .set({
-          [`${basePath}.${typed<keyof InstructionTask>('ended')}`]: new Date().toISOString(),
-          [`${basePath}.${typed<keyof InstructionTask>('reason')}`]:
-            typed<TaskEndedReason>('aborted'),
-        })
-        .commit()
-        .catch(console.error)
-    },
-    [client, documentId],
-  )
-
-  const titledTasks = useMemo(() => {
-    const t =
-      tasks
-        ?.filter(
-          (task) =>
-            task.started &&
-            new Date().getTime() - new Date(task.started).getTime() < maxHistoryVisibilityMs,
-        )
-        .map((task): CancelableInstructionTask => {
-          const instruction = instructions?.find((i) => i._key === task.instructionKey)
-          return {
-            ...task,
-            title: showTitles ? (task.title ?? getInstructionTitle(instruction)) : undefined,
-            cancel: () => cancelRun(task._key),
-          }
-        }) ?? []
-    t.sort((a, b) => new Date(b.started ?? '').getTime() - new Date(a.started ?? '').getTime())
-    return t
-  }, [tasks, instructions, cancelRun, showTitles])
-
-  // const id = useId()
-
-  const isRunning = useMemo(() => titledTasks.some((r) => !r.ended), [titledTasks])
-  const hasErrors = useMemo(
-    () => titledTasks.some((r) => r.reason === 'error' || r.reason === 'timeout'),
-    [titledTasks],
-  )
-
-  const [open, setOpen] = useState(false)
-
-  const toggleOpen = useCallback(() => setOpen((v) => !v), [])
-
-  const [button, setButton] = useState<HTMLButtonElement | null>(null)
-  const [popover, setPopover] = useState<HTMLDivElement | null>(null)
-
-  const handleClickOutside = useCallback(() => {
-    setOpen(false)
-  }, [])
-
-  useClickOutside(handleClickOutside, [button, popover])
-
-  const handleEscape = useCallback(() => {
-    setOpen(false)
-    button?.focus()
-  }, [button])
-
-  return (
-    <Popover
-      constrainSize
-      content={<TaskList onEscape={handleEscape} tasks={titledTasks} />}
-      open={open && !!titledTasks?.length}
-      placement="top"
-      portal
-      ref={setPopover}
-      width={0}
-    >
-      <TaskStatusButton
-        disabled={!titledTasks?.length}
-        hasErrors={hasErrors}
-        isRunning={isRunning}
-        onClick={toggleOpen}
-        ref={setButton}
-        selected={open}
-      />
-    </Popover>
-  )
-}
-
-const TASK_STATUS_BUTTON_TOOLTIP_PROPS: StatusButtonProps['tooltipProps'] = {
-  placement: 'top',
-}
-
-const TaskStatusButton = forwardRef(function TaskStatusButton(
-  props: {
-    disabled: boolean
-    hasErrors: boolean
-    isRunning: boolean
-    onClick: () => void
-    selected: boolean
-  },
-  ref: ForwardedRef<HTMLButtonElement>,
-) {
-  const {disabled, hasErrors, isRunning, onClick, selected} = props
-
-  return (
-    <StatusButton
-      label={`${pluginTitle} status`}
-      aria-label={`${pluginTitle} status`}
-      icon={isRunning ? SyncSpinningIcon : hasErrors ? ErrorOutlineIcon : CheckmarkCircleIcon}
-      mode="bleed"
-      onClick={onClick}
-      tone={hasErrors ? 'critical' : undefined}
-      disabled={disabled}
-      ref={ref}
-      selected={selected}
-      tooltipProps={TASK_STATUS_BUTTON_TOOLTIP_PROPS}
-    />
-  )
-})
-
-function TaskList(props: {onEscape: () => void; tasks: CancelableInstructionTask[]}) {
-  const {onEscape, tasks} = props
-
-  const {isTopLayer} = useLayer()
-
-  useGlobalKeyDown(
-    useCallback(
-      (event) => {
-        if (isTopLayer && event.key === 'Escape') {
-          onEscape()
-        }
-      },
-      [isTopLayer, onEscape],
-    ),
-  )
-
-  return (
-    <Stack padding={1} space={1}>
-      {tasks.map((task) => (
-        <TaskItem key={task._key} task={task} />
-      ))}
-    </Stack>
-  )
-}
-
-function TaskItem(props: {task: CancelableInstructionTask}) {
-  const {task} = props
-
-  const taskType = task.reason && TASK_CONFIG[task.reason]
-  return (
-    <Card radius={2} tone={taskType && taskType?.tone}>
-      <Flex align="center" gap={1}>
-        <Flex align="flex-start" flex={1} gap={3} padding={3}>
-          <Box flex="none">
-            <Text size={1}>
-              {taskType && createElement(taskType.icon)}
-              {!task.reason && <Spinner />}
-            </Text>
-          </Box>
-          <Stack flex={1} space={2}>
-            <Text size={1} weight="medium">
-              {taskType ? taskType.title : 'Running'}
-              {task.title && <>: {task.title}</>}
-            </Text>
-            {task.message ? <Text size={1}>{task.message}</Text> : null}
-            <Text muted size={1}>
-              <TimeAgo date={task.ended ?? task.started} />
-            </Text>
-          </Stack>
-        </Flex>
-
-        {!task.ended && (
-          <Box flex="none" padding={1}>
-            <Button fontSize={1} mode="bleed" onClick={task.cancel} text="Cancel" />
-          </Box>
-        )}
-      </Flex>
-    </Card>
-  )
-}

package/src/assistInspector/constants.ts

@@ -1 +0,0 @@
-export const aiInspectorId = 'ai-assistance'

package/src/assistInspector/helpers.ts

@@ -1,211 +0,0 @@
-import {
-  BlockContentIcon,
-  BlockquoteIcon,
-  DocumentIcon,
-  ImageIcon,
-  LinkIcon,
-  OlistIcon,
-  StringIcon,
-} from '@sanity/icons'
-import {extractWithPath} from '@sanity/mutator'
-import {type ComponentType, useMemo} from 'react'
-import {
-  type ArraySchemaType,
-  isKeySegment,
-  isObjectSchemaType,
-  type ObjectSchemaType,
-  type Path,
-  pathToString,
-  type SanityDocumentLike,
-  type SchemaType,
-  stringToPath,
-} from 'sanity'
-import {type PaneRouterContextValue, usePaneRouter} from 'sanity/structure'
-import {isAssistSupported} from '../helpers/assistSupported'
-import {isPortableTextArray, isType} from '../helpers/typeUtils'
-import {type AssistInspectorRouteParams, documentRootKey} from '../types'
-import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
-
-export interface FieldRef {
-  key: string
-  path: Path
-  title: string
-  schemaType: SchemaType
-  icon: ComponentType
-  synthetic?: boolean
-}
-
-const maxDepth = 6
-
-export function getTypeIcon(schemaType: SchemaType) {
-  let t: SchemaType | undefined = schemaType
-
-  while (t) {
-    if (t.icon) return t.icon
-    t = t.type
-  }
-
-  if (isType(schemaType, 'slug')) return LinkIcon
-  if (isType(schemaType, 'image')) return ImageIcon
-  if (schemaType.jsonType === 'array' && isPortableTextArray(schemaType)) return BlockContentIcon
-
-  if (schemaType.jsonType === 'array') return OlistIcon
-  if (schemaType.jsonType === 'object') return BlockquoteIcon
-  if (schemaType.jsonType === 'string') return StringIcon
-
-  return DocumentIcon
-}
-
-export function asFieldRefsByTypePath(fieldRefs: FieldRef[]): Record<string, FieldRef | undefined> {
-  const lookup: Record<string, FieldRef | undefined> = fieldRefs.reduce(
-    (acc, ref) => ({...acc, [ref.key]: ref}),
-    {},
-  )
-  return lookup
-}
-
-export function getDocumentFieldRef(schemaType: ObjectSchemaType) {
-  return {
-    key: documentRootKey,
-    icon: schemaType.icon ?? DocumentIcon,
-    title: `The entire document`,
-    path: [],
-    schemaType: schemaType,
-  }
-}
-
-export function getFieldRefs(
-  schemaType: ObjectSchemaType,
-  parent?: FieldRef,
-  depth = 0,
-): FieldRef[] {
-  if (depth >= maxDepth) {
-    return []
-  }
-  return schemaType.fields
-    .filter((f) => !f.name.startsWith('_'))
-    .flatMap((field) => {
-      const path: Path = parent ? [...parent.path, field.name] : [field.name]
-      const title = field.type.title ?? field.name
-      const fieldRef: FieldRef = {
-        key: patchableKey(pathToString(path)),
-        path,
-        title: parent ? [parent.title, title].join(' / ') : title,
-        schemaType: field.type,
-        icon: getTypeIcon(field.type),
-      }
-      const fields =
-        field.type.jsonType === 'object' ? getFieldRefs(field.type, fieldRef, depth + 1) : []
-
-      const syntheticFields =
-        field.type.jsonType === 'array' ? getSyntheticFields(field.type, fieldRef, depth + 1) : []
-      if (!isAssistSupported(field.type)) {
-        return [...fields, ...syntheticFields]
-      }
-      return [fieldRef, ...fields, ...syntheticFields]
-    })
-}
-
-function getSyntheticFields(schemaType: ArraySchemaType, parent?: FieldRef, depth = 0) {
-  if (depth >= maxDepth) {
-    return []
-  }
-
-  return schemaType.of
-    .filter((itemType) => !isType(itemType, 'block'))
-    .flatMap((itemType) => {
-      const segment = {_key: itemType.name}
-      const title = itemType.title ?? itemType.name
-      const path: Path = parent ? [...parent.path, segment] : [segment]
-      const fieldRef: FieldRef = {
-        key: patchableKey(pathToString(path)),
-        path,
-        title: parent ? [parent.title, title].join(' / ') : title,
-        schemaType: itemType,
-        icon: getTypeIcon(itemType),
-        synthetic: true,
-      }
-      const fields =
-        itemType.jsonType === 'object' ? getFieldRefs(itemType, fieldRef, depth + 1) : []
-
-      if (!isAssistSupported(itemType)) {
-        return fields
-      }
-      return [fieldRef, ...fields]
-    })
-}
-
-export function getTypePath(doc: SanityDocumentLike, pathString: string) {
-  if (!pathString) {
-    return undefined
-  }
-
-  const path = stringToPath(pathString)
-  const currentPath: Path = []
-  let valid = true
-  const syntheticPath = path.map((segment) => {
-    currentPath.push(segment)
-
-    if (isKeySegment(segment)) {
-      const match = extractWithPath(pathToString(currentPath), doc)[0]
-      const value = match?.value
-      if (match && value && typeof value === 'object' && '_type' in value) {
-        return {_key: value._type as string}
-      }
-      valid = false
-    }
-    return segment
-  })
-
-  return valid ? patchableKey(pathToString(syntheticPath)) : undefined
-}
-
-/**
- * mutator crashes if path contains certain letters
- * @param pathKey
- */
-function patchableKey(pathKey: string) {
-  return pathKey.replace(/[=]=/g, ':').replace(/[[\]]/g, '|').replace(/"/g, '')
-}
-
-export function useTypePath(doc: SanityDocumentLike, pathString: string) {
-  return useMemo(() => getTypePath(doc, pathString), [doc, pathString])
-}
-
-export function useSelectedField(
-  documentSchemaType?: SchemaType,
-  path?: string,
-): FieldRef | undefined {
-  const {getFieldRefs} = useAiAssistanceConfig()
-
-  const selectableFields = useMemo(
-    () =>
-      documentSchemaType && isObjectSchemaType(documentSchemaType)
-        ? [getDocumentFieldRef(documentSchemaType), ...getFieldRefs(documentSchemaType.name)]
-        : [],
-    [documentSchemaType, getFieldRefs],
-  )
-
-  return useMemo(() => {
-    return path ? selectableFields?.find((f) => f.key === path) : undefined
-  }, [selectableFields, path])
-}
-
-export function getFieldTitle(field?: FieldRef) {
-  const schemaType = field?.schemaType
-  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 AiPaneRouter,
-    [paneRouter],
-  )
-}

package/src/assistInspector/index.ts

@@ -1,27 +0,0 @@
-import {SparklesIcon} from '@sanity/icons'
-import {DocumentInspector, typed} from 'sanity'
-
-import {pluginTitle} from '../constants'
-import {AssistInspectorRouteParams, fieldPathParam, instructionParam} from '../types'
-import {AssistInspectorWrapper} from './AssistInspector'
-import {aiInspectorId} from './constants'
-
-export const assistInspector: DocumentInspector = {
-  name: aiInspectorId,
-  useMenuItem: () => ({
-    icon: SparklesIcon,
-    title: pluginTitle,
-    hidden: true,
-    showAsAction: false,
-  }),
-  component: AssistInspectorWrapper,
-  onClose({params}) {
-    return {
-      params: typed<AssistInspectorRouteParams>({
-        ...params,
-        [fieldPathParam]: undefined,
-        [instructionParam]: undefined,
-      }) as typeof params,
-    }
-  },
-}

package/src/assistLayout/AiAssistanceConfigContext.tsx

@@ -1,32 +0,0 @@
-import {createContext, useContext} from 'react'
-
-import {AssistPluginConfig} from '../plugin'
-import {InstructStatus} from '../useApiClient'
-import {SerializedSchemaType} from '../types'
-import {FieldRef} from '../assistInspector/helpers'
-
-export interface AiAssistanceConfigContextValue {
-  config: AssistPluginConfig
-  status?: InstructStatus
-  statusLoading: boolean
-  initLoading: boolean
-  init: () => void
-  error?: Error
-  serializedTypes: SerializedSchemaType[]
-  getFieldRefs: (documentType: string) => FieldRef[]
-  getFieldRefsByTypePath: (documentType: string) => Record<string, FieldRef | undefined>
-}
-
-export const AiAssistanceConfigContext = createContext<AiAssistanceConfigContextValue>({} as any)
-
-export function useAiAssistanceConfig() {
-  const context = useContext(AiAssistanceConfigContext)
-  if (!context) {
-    throw new Error('Missing AiAssistanceConfigContext')
-  }
-  return context
-}
-
-export function useSerializedTypes() {
-  return useAiAssistanceConfig().serializedTypes
-}

package/src/assistLayout/AiAssistanceConfigProvider.tsx

@@ -1,98 +0,0 @@
-import {ReactNode, useCallback, useEffect, useMemo, useState} from 'react'
-import {AssistPluginConfig} from '../plugin'
-import {InstructStatus, useApiClient, useGetInstructStatus, useInitInstruct} from '../useApiClient'
-import {type ObjectSchemaType, Schema, useSchema} from 'sanity'
-import {serializeSchema} from '../schemas/serialize/serializeSchema'
-import {
-  AiAssistanceConfigContext,
-  AiAssistanceConfigContextValue,
-} from './AiAssistanceConfigContext'
-import {createFieldRefCache} from './fieldRefCache'
-
-export function AiAssistanceConfigProvider(props: {
-  children?: ReactNode
-  config: AssistPluginConfig
-}) {
-  const [status, setStatus] = useState<InstructStatus | undefined>()
-  const [error, setError] = useState<Error | undefined>()
-
-  const apiClient = useApiClient(props.config?.__customApiClient)
-  const {getInstructStatus, loading: statusLoading} = useGetInstructStatus(apiClient)
-  const {initInstruct, loading: initLoading} = useInitInstruct(apiClient)
-
-  const schema = useSchema()
-  const serializedTypes = useMemo(() => serializeSchema(schema, {leanFormat: true}), [schema])
-  const {getFieldRefs, getFieldRefsByTypePath} = useFieldRefGetters(schema)
-
-  useEffect(() => {
-    getInstructStatus()
-      .then((s) => setStatus(s))
-      .catch((e) => {
-        console.error(e)
-        setError(e as Error)
-      })
-  }, [getInstructStatus])
-
-  const init = useCallback(async () => {
-    setError(undefined)
-    try {
-      await initInstruct()
-      const status = await getInstructStatus()
-      setStatus(status)
-    } catch (e) {
-      console.error('Failed to init ai assistance', e)
-      setError(e as Error)
-    }
-  }, [initInstruct, getInstructStatus, setStatus])
-
-  const {config, children} = props
-  const context = useMemo<AiAssistanceConfigContextValue>(() => {
-    return {
-      config,
-      status,
-      statusLoading,
-      init,
-      initLoading,
-      error,
-      serializedTypes,
-      getFieldRefs,
-      getFieldRefsByTypePath,
-    }
-  }, [
-    config,
-    status,
-    init,
-    statusLoading,
-    initLoading,
-    error,
-    serializedTypes,
-    getFieldRefs,
-    getFieldRefsByTypePath,
-  ])
-
-  return (
-    <AiAssistanceConfigContext.Provider value={context}>
-      {children}
-    </AiAssistanceConfigContext.Provider>
-  )
-}
-
-function useFieldRefGetters(schema: Schema) {
-  return useMemo(() => {
-    const getForSchemaType = createFieldRefCache()
-
-    function getRefsForType(documentType: string) {
-      const schemaType = schema.get(documentType) as ObjectSchemaType | undefined
-      if (!schemaType) {
-        throw new Error(`Schema type "${documentType}" not found`)
-      }
-      return getForSchemaType(schemaType)
-    }
-
-    return {
-      getFieldRefs: (documentType: string) => getRefsForType(documentType).fieldRefs,
-      getFieldRefsByTypePath: (documentType: string) =>
-        getRefsForType(documentType).fieldRefsByTypePath,
-    }
-  }, [schema])
-}

package/src/assistLayout/AssistLayout.tsx

@@ -1,39 +0,0 @@
-import {ThemeProvider} from '@sanity/ui'
-import {useState} from 'react'
-import {LayoutProps} from 'sanity'
-
-import {Connector, ConnectorsProvider} from '../_lib/connector'
-import {AssistConnectorsOverlay} from '../assistConnectors'
-import {AssistPluginConfig} from '../plugin'
-import {FieldTranslationProvider} from '../translate/FieldTranslationProvider'
-import {StudioInstruction} from '../types'
-import {RunInstructionRequest} from '../useApiClient'
-import {RunInstructionProvider} from './RunInstructionProvider'
-import {AiAssistanceConfigProvider} from './AiAssistanceConfigProvider'
-
-export interface AIStudioLayoutProps extends LayoutProps {
-  config: AssistPluginConfig
-}
-
-export type RunInstructionArgs = Omit<RunInstructionRequest, 'instructionKey' | 'userText'> & {
-  instruction: StudioInstruction
-}
-
-export function AssistLayout(props: AIStudioLayoutProps) {
-  const [connectors, setConnectors] = useState<Connector[]>([])
-
-  return (
-    <AiAssistanceConfigProvider config={props.config}>
-      <RunInstructionProvider>
-        <FieldTranslationProvider>
-          <ConnectorsProvider onConnectorsChange={setConnectors}>
-            {props.renderDefault(props)}
-            <ThemeProvider tone="default">
-              <AssistConnectorsOverlay connectors={connectors} />
-            </ThemeProvider>
-          </ConnectorsProvider>
-        </FieldTranslationProvider>
-      </RunInstructionProvider>
-    </AiAssistanceConfigProvider>
-  )
-}