@sanity/assist 1.0.0

package/src/assistInspector/InstructionTaskHistoryButton.tsx

@@ -0,0 +1,261 @@
+import {AssistTasksStatus, InstructionTask, StudioInstruction, TaskEndedReason} from '../types'
+import {createElement, ForwardedRef, forwardRef, useCallback, useMemo, useState} from 'react'
+import {
+  Box,
+  Button,
+  Card,
+  Flex,
+  Popover,
+  Spinner,
+  Stack,
+  Text,
+  useClickOutside,
+  useGlobalKeyDown,
+  useLayer,
+} from '@sanity/ui'
+import {
+  CheckmarkCircleIcon,
+  ClockIcon,
+  CloseCircleIcon,
+  ErrorOutlineIcon,
+  SyncIcon,
+} from '@sanity/icons'
+import {TimeAgo} from '../components/TimeAgo'
+import {StatusButton, StatusButtonProps, typed, useClient} from 'sanity'
+import {getInstructionTitle} from '../helpers/misc'
+import styled, {keyframes} from 'styled-components'
+import {assistTasksStatusId} from '../helpers/ids'
+import {maxHistoryVisibilityMs, pluginTitle} from '../constants'
+
+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 ? 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['tooltip'] = {
+  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`}
+      icon={isRunning ? SyncSpinningIcon : hasErrors ? ErrorOutlineIcon : CheckmarkCircleIcon}
+      mode="bleed"
+      onClick={onClick}
+      tone={hasErrors ? 'critical' : undefined}
+      fontSize={1}
+      disabled={disabled}
+      ref={ref}
+      selected={selected}
+      tooltip={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

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

package/src/assistInspector/helpers.ts

@@ -0,0 +1,125 @@
+import {
+  BlockContentIcon,
+  BlockquoteIcon,
+  DocumentIcon,
+  ImageIcon,
+  LinkIcon,
+  OlistIcon,
+  StringIcon,
+} from '@sanity/icons'
+import {isObjectSchemaType, ObjectSchemaType, Path, pathToString, SchemaType} from 'sanity'
+import {ComponentType, useContext, useMemo} from 'react'
+import {AssistInspectorRouteParams, documentRootKey, fieldPathParam} from '../types'
+import {usePaneRouter} from 'sanity/desk'
+import {isAssistSupported} from '../helpers/assistSupported'
+import {isPortableTextArray, isType} from '../helpers/typeUtils'
+import {SelectedFieldContext} from '../assistDocument/components/SelectedFieldContext'
+
+export interface FieldRef {
+  key: string
+  path: Path
+  title: string
+  schemaType: SchemaType
+  icon: ComponentType
+}
+
+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 getFieldRefsWithDocument(schemaType: ObjectSchemaType): FieldRef[] {
+  const fields = getFieldRefs(schemaType)
+  return [
+    {
+      key: documentRootKey,
+      icon: schemaType.icon ?? DocumentIcon,
+      title: `The entire document`,
+      path: [],
+      schemaType: schemaType,
+    },
+
+    ...fields,
+  ]
+}
+
+export function getFieldRefs(schemaType: ObjectSchemaType, parent?: FieldRef): FieldRef[] {
+  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: 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) : []
+
+      if (!isAssistSupported(field.type)) {
+        return fields
+      }
+      return [fieldRef, ...fields]
+    })
+}
+
+export function useSelectedField(
+  documentSchemaType?: SchemaType,
+  path?: string
+): FieldRef | undefined {
+  const selectableFields = useMemo(
+    () =>
+      documentSchemaType && isObjectSchemaType(documentSchemaType)
+        ? getFieldRefsWithDocument(documentSchemaType)
+        : [],
+    [documentSchemaType]
+  )
+
+  return useMemo(() => {
+    return path ? selectableFields?.find((f) => f.key === path) : undefined
+  }, [selectableFields, path])
+}
+
+export function useSelectedFieldTitle() {
+  const {params} = useAiPaneRouter()
+  const {documentSchema} = useContext(SelectedFieldContext) ?? {}
+  const selectedField = useSelectedField(documentSchema, params[fieldPathParam])
+  return getFieldTitle(selectedField)
+}
+
+export function getFieldTitle(field?: FieldRef) {
+  const schemaType = field?.schemaType
+  return schemaType?.title ?? schemaType?.name ?? 'Untitled'
+}
+
+export function useAiPaneRouter() {
+  const paneRouter = usePaneRouter()
+
+  return useMemo(
+    () =>
+      ({...paneRouter, params: paneRouter.params ?? {}} as Omit<
+        typeof paneRouter,
+        'setParams' | 'params'
+      > & {
+        params: AssistInspectorRouteParams
+        setParams: (p: Record<keyof AssistInspectorRouteParams, string | undefined>) => void
+      }),
+    [paneRouter]
+  )
+}

package/src/assistInspector/index.ts

@@ -0,0 +1,26 @@
+import {SparklesIcon} from '@sanity/icons'
+import {DocumentInspector, typed} from 'sanity'
+import {aiInspectorId} from './constants'
+import {AssistInspectorWrapper} from './AssistInspector'
+import {AssistInspectorRouteParams, fieldPathParam, instructionParam} from '../types'
+import {pluginTitle} 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

@@ -0,0 +1,81 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import {AssistPluginConfig} from '../plugin'
+import {InstructStatus, useApiClient, useGetInstructStatus, useInitInstruct} from '../useApiClient'
+
+export interface AiAssistanceConfigContextValue {
+  config: AssistPluginConfig
+  status?: InstructStatus
+  statusLoading: boolean
+  initLoading: boolean
+  init: () => void
+  error?: Error
+}
+
+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 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)
+
+  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,
+    }
+  }, [config, status, init, statusLoading, initLoading, error])
+
+  return (
+    <AiAssistanceConfigContext.Provider value={context}>
+      {children}
+    </AiAssistanceConfigContext.Provider>
+  )
+}