@sanity/assist 1.0.0

package/src/assistLayout/AlphaMigration.tsx

@@ -0,0 +1,311 @@
+import {SanityClient, SanityDocument, useClient} from 'sanity'
+import {useCallback, useEffect, useState} from 'react'
+import {Box, Button, Card, Dialog, Spinner, Stack, Text, useToast} from '@sanity/ui'
+import {CheckmarkIcon} from '@sanity/icons'
+import {
+  LegacyAssistDocument,
+  legacyAssistDocumentIdPrefix,
+  legacyAssistDocumentTypeName,
+  legacyAssistStatusDocumentTypeName,
+  LegacyContextBlock,
+  legacyContextDocumentTypeName,
+  LegacyFieldRef,
+  LegacyPromptBlock,
+  LegacyPromptTextBlock,
+  LegacyUserInputBlock,
+} from '../legacy-types'
+import {assistDocumentId} from '../helpers/ids'
+import {
+  assistDocumentIdPrefix,
+  assistDocumentTypeName,
+  AssistField,
+  assistFieldTypeName,
+  contextDocumentTypeName,
+  fieldReferenceTypeName,
+  InlinePromptBlock,
+  instructionContextTypeName,
+  instructionTypeName,
+  PromptBlock,
+  userInputTypeName,
+} from '../types'
+import {PortableTextSpan} from '@portabletext/types'
+import {pluginTitle} from '../constants'
+
+const NO_ASSIST_DOCS: LegacyAssistDocument[] = []
+const NO_CONTEXT_DOCS: SanityDocument[] = []
+const NO_IDS: string[] = []
+
+interface MigratedContextDoc {
+  _id: string
+  _alphaId: string
+}
+
+type Task = (subtaskProgress: (percentage: number) => void) => Promise<void>
+
+export function AlphaMigration() {
+  const [alphaAssistDocs, setAlphaAssistDocs] = useState(NO_ASSIST_DOCS)
+  const [contextDocs, setContextDocs] = useState(NO_CONTEXT_DOCS)
+  const [staleStatusDocIds, setStaleStatusDocs] = useState(NO_IDS)
+  const [error, setError] = useState<Error | undefined>(undefined)
+  const [progress, setProgress] = useState<number | undefined>(undefined)
+  const toast = useToast()
+  const client = useClient({apiVersion: '2023-06-01'})
+
+  useEffect(() => {
+    let canUpdate = true
+    client
+      .fetch<{
+        assistDocs?: LegacyAssistDocument[]
+        staleStatusDocIds?: string[]
+        contextDocs?: SanityDocument[]
+      }>(
+        `
+    {
+      "assistDocs": *[_type=="${legacyAssistDocumentTypeName}"],
+      "staleStatusDocIds": *[_type=="${legacyAssistStatusDocumentTypeName}"]._id,
+      "contextDocs": *[_type=="${legacyContextDocumentTypeName}"],
+     }
+    `
+      )
+      .then((result) => {
+        if (!canUpdate || !result) {
+          return
+        }
+        setAlphaAssistDocs(result?.assistDocs ?? NO_ASSIST_DOCS)
+        setStaleStatusDocs(result?.staleStatusDocIds ?? NO_IDS)
+        setContextDocs(result?.contextDocs ?? NO_CONTEXT_DOCS)
+      })
+    return () => {
+      canUpdate = false
+    }
+  }, [client, setAlphaAssistDocs, setStaleStatusDocs, setContextDocs])
+
+  const convert = useCallback(async () => {
+    try {
+      setProgress(0.0001)
+
+      const tasks: Task[] = [
+        () => convertContextDocs(client, contextDocs),
+        (subtaskProgress) => deleteDocs(client, staleStatusDocIds, subtaskProgress),
+        (subtaskProgress) => convertDocs(client, alphaAssistDocs, subtaskProgress),
+        (subtaskProgress) =>
+          deleteDocs(
+            client,
+            contextDocs.map((d) => d._id),
+            subtaskProgress
+          ),
+      ]
+
+      const taskSize = 1 / tasks.length
+      for (let i = 0; i < tasks.length; i++) {
+        const startProgress = i / tasks.length
+        await tasks[i]((subProgress) => setProgress(startProgress + subProgress * taskSize))
+        setProgress((i + 1) / tasks.length)
+      }
+
+      setProgress(1)
+      setAlphaAssistDocs(NO_ASSIST_DOCS)
+      setContextDocs(NO_CONTEXT_DOCS)
+      setStaleStatusDocs(NO_IDS)
+      toast.push({
+        title: `Converted instructions to new format.`,
+        status: 'success',
+        description: 'Pending feature name',
+        closable: true,
+      })
+    } catch (e: any) {
+      console.error(e)
+      toast.push({
+        title: `An error occured`,
+        status: 'error',
+        closable: true,
+      })
+      setError(e)
+      setProgress(undefined)
+    }
+  }, [contextDocs, client, alphaAssistDocs, staleStatusDocIds, setProgress, toast])
+
+  if (
+    (alphaAssistDocs.length || staleStatusDocIds.length || contextDocs.length) &&
+    (!progress || progress < 1)
+  ) {
+    return (
+      <Dialog id="outdated-assist-docs" header={pluginTitle}>
+        <Card padding={3}>
+          <Stack space={4} style={{maxWidth: 500}}>
+            <Text size={1}>
+              It seems like this workspace contains documents from an{' '}
+              <strong>older version of {pluginTitle}</strong>.
+            </Text>
+            <Text size={1}>Cleanup is required.</Text>
+            {error ? (
+              <Card padding={2} tone="critical" border>
+                <Text size={1}>An error occurred. See console for details.</Text>{' '}
+              </Card>
+            ) : null}
+            <Button
+              icon={
+                progress ? (
+                  <Box style={{marginTop: 5}}>
+                    <Spinner />
+                  </Box>
+                ) : (
+                  CheckmarkIcon
+                )
+              }
+              disabled={!!progress}
+              text={progress ? `${Math.floor(progress * 100)}%` : 'Ok, convert to new format!'}
+              tone="primary"
+              onClick={convert}
+            />
+          </Stack>
+        </Card>
+      </Dialog>
+    )
+  }
+
+  return null
+}
+
+async function deleteDocs(
+  client: SanityClient,
+  ids: string[],
+  updateProgress: (percentage: number) => void
+) {
+  const chunkSize = 50
+  for (let i = 0; i < ids.length; i += chunkSize) {
+    const progressCount = Math.min(ids.length, i + chunkSize)
+    const chunk = ids.slice(i, progressCount)
+    const trans = client.transaction()
+    chunk.forEach((id) => trans.delete(id))
+    await trans.commit()
+    updateProgress(progressCount / ids.length)
+  }
+}
+
+async function convertContextDocs(client: SanityClient, docs: SanityDocument[]) {
+  const trans = client.transaction()
+
+  for (const doc of docs) {
+    const {_id, _type, ...rest} = doc
+    trans.createOrReplace({
+      ...rest,
+      _id: `port.${_id}`,
+      _alphaId: _id,
+      _type: contextDocumentTypeName,
+    })
+  }
+
+  await trans.commit()
+}
+
+async function convertDocs(
+  client: SanityClient,
+  docs: LegacyAssistDocument[],
+  updateProgress: (percentage: number) => void
+) {
+  const chunkSize = 10
+  for (let i = 0; i < docs.length; i += chunkSize) {
+    const progressCount = Math.min(docs.length, i + chunkSize)
+    const chunk = docs.slice(i, progressCount)
+
+    const trans = client.transaction()
+    const contextDocs: MigratedContextDoc[] = await client.fetch(
+      `*[_type=="${contextDocumentTypeName}" && _alphaId != null]{_id, _alphaId}`
+    )
+
+    chunk.forEach((oldDoc) => {
+      const documentType = oldDoc._id.replace(
+        new RegExp(`^(${legacyAssistDocumentIdPrefix}|${assistDocumentIdPrefix})`),
+        ''
+      )
+
+      const id = assistDocumentId(documentType)
+
+      const fields: AssistField[] = (oldDoc.fields ?? [])
+        .filter((field) => field.instructions?.length)
+        .map((oldField) => {
+          const instructions = (oldField.instructions ?? []).map((inst) => {
+            // eslint-disable-next-line max-nested-callbacks
+            const prompt = (inst.prompt ?? []).map((block) => {
+              return mapBlock(block, contextDocs) as PromptBlock
+            })
+            return {
+              ...inst,
+              _type: instructionTypeName,
+              prompt,
+            }
+          })
+          return {
+            ...oldField,
+            _type: assistFieldTypeName,
+            instructions,
+          }
+        })
+
+      if (fields.length) {
+        trans.createOrReplace({
+          _id: id,
+          _type: assistDocumentTypeName,
+          fields,
+        })
+      }
+      trans.delete(oldDoc._id)
+    })
+    await trans.commit()
+    updateProgress(progressCount / docs.length)
+  }
+}
+
+type Blocks = LegacyPromptBlock | LegacyPromptTextBlock | PortableTextSpan
+
+function isFieldRef(block: Blocks): block is LegacyFieldRef {
+  return block._type === 'sanity.ai.prompt.fieldRef'
+}
+
+function isContext(block: Blocks): block is LegacyContextBlock {
+  return block._type === 'sanity.ai.prompt.context'
+}
+
+function isUserInput(block: Blocks): block is LegacyUserInputBlock {
+  return block._type === 'sanity.ai.prompt.userInput'
+}
+
+function isSpan(block: Blocks): block is PortableTextSpan {
+  return block._type === 'span'
+}
+
+function mapBlock(
+  block: Blocks,
+  migratedContexts: MigratedContextDoc[]
+): PromptBlock | InlinePromptBlock {
+  if (isFieldRef(block)) {
+    return {...block, _type: fieldReferenceTypeName}
+  }
+  if (isUserInput(block)) {
+    return {...block, _type: userInputTypeName}
+  }
+  if (isContext(block)) {
+    const newBlock = {
+      ...block,
+      _type: instructionContextTypeName,
+      reference: {
+        _type: 'reference',
+        _ref:
+          migratedContexts.find((c) => c._alphaId === block.reference?._ref)?._id ??
+          block.reference?._ref,
+      },
+    } as const
+    return newBlock
+  }
+  if (isSpan(block)) {
+    return block
+  }
+  const textBlock = block
+  return {
+    ...textBlock,
+    children: (textBlock.children ?? []).map(
+      (child) => mapBlock(child, migratedContexts) as InlinePromptBlock
+    ),
+  }
+}

package/src/assistLayout/AssistLayout.tsx

@@ -0,0 +1,38 @@
+import {useState} from 'react'
+import {LayoutProps} from 'sanity'
+import {Connector, ConnectorsProvider} from '../_lib/connector'
+import {AssistConnectorsOverlay} from '../assistConnectors'
+import {AssistPluginConfig} from '../plugin'
+import {AiAssistanceConfigProvider} from './AiAssistanceConfigContext'
+import {RunInstructionRequest} from '../useApiClient'
+import {StudioInstruction} from '../types'
+import {RunInstructionProvider} from './RunInstructionProvider'
+import {ThemeProvider} from '@sanity/ui'
+import {AlphaMigration} from './AlphaMigration'
+
+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[]>([])
+  const migrate = props.config.alphaMigration ?? true
+
+  return (
+    <AiAssistanceConfigProvider config={props.config}>
+      {migrate ? <AlphaMigration /> : null}
+      <RunInstructionProvider>
+        <ConnectorsProvider onConnectorsChange={setConnectors}>
+          {props.renderDefault(props)}
+          <ThemeProvider tone="default">
+            <AssistConnectorsOverlay connectors={connectors} />
+          </ThemeProvider>
+        </ConnectorsProvider>
+      </RunInstructionProvider>
+    </AiAssistanceConfigProvider>
+  )
+}

package/src/assistLayout/RunInstructionProvider.tsx

@@ -0,0 +1,222 @@
+import {Button, Dialog, Flex, Stack, Text, TextArea, Tooltip} from '@sanity/ui'
+import {getInstructionTitle} from '../helpers/misc'
+import {PlayIcon} from '@sanity/icons'
+import {
+  createContext,
+  Dispatch,
+  FormEvent,
+  PropsWithChildren,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {UserInputBlock, userInputTypeName} from '../types'
+import {RunInstructionArgs} from './AssistLayout'
+import {useApiClient, useRunInstructionApi} from '../useApiClient'
+import {useAiAssistanceConfig} from './AiAssistanceConfigContext'
+import {FormFieldHeaderText} from 'sanity'
+
+type BlockInputs = Record<string, string>
+const NO_INPUT: BlockInputs = {}
+
+export interface RunInstructionContextValue {
+  runInstruction: (req: RunInstructionArgs) => void
+  instructionLoading: boolean
+}
+
+export const RunInstructionContext = createContext<RunInstructionContextValue>({
+  runInstruction: () => {},
+  instructionLoading: false,
+})
+
+export function useRunInstruction() {
+  return useContext(RunInstructionContext)
+}
+
+function isUserInputBlock(block: {_type: string}): block is UserInputBlock {
+  return block._type === userInputTypeName
+}
+
+export function RunInstructionProvider(props: PropsWithChildren<{}>) {
+  const {config} = useAiAssistanceConfig()
+  const apiClient = useApiClient(config?.__customApiClient)
+  const {runInstruction: runInstructionRequest, loading} = useRunInstructionApi(apiClient)
+
+  const id = useId()
+
+  const [inputs, setInputs] = useState(NO_INPUT)
+  const [runRequest, setRunRequest] = useState<
+    (RunInstructionArgs & {userInputBlocks: UserInputBlock[]}) | undefined
+  >()
+
+  const runInstruction = useCallback(
+    (req: RunInstructionArgs) => {
+      if (loading) {
+        return
+      }
+      const {instruction, ...request} = req
+      const instructionKey = instruction._key
+      const userInputBlocks = instruction?.prompt
+        ?.flatMap((block) =>
+          block._type === 'block' ? block.children.filter(isUserInputBlock) : [block]
+        )
+        .filter(isUserInputBlock)
+
+      if (!userInputBlocks?.length) {
+        runInstructionRequest({
+          ...request,
+          instructionKey,
+          userTexts: undefined,
+        })
+        return
+      }
+
+      setRunRequest({
+        ...req,
+        userInputBlocks,
+      })
+    },
+    [setRunRequest, runInstructionRequest, loading]
+  )
+
+  const close = useCallback(() => {
+    setRunRequest(undefined)
+    setInputs(NO_INPUT)
+  }, [setRunRequest, setInputs])
+
+  const runWithInput = useCallback(() => {
+    if (runRequest) {
+      const {instruction, userTexts, ...request} = runRequest
+      runInstructionRequest({
+        ...request,
+        instructionKey: instruction._key,
+        userTexts: Object.entries(inputs).map(([key, value]) => ({
+          blockKey: key,
+          userInput: value,
+        })),
+      })
+    }
+    close()
+  }, [close, runInstructionRequest, runRequest, inputs])
+
+  const open = !!runRequest
+
+  const runDisabled = useMemo(
+    () =>
+      (runRequest?.userInputBlocks?.length ?? 0) >
+      Object.entries(inputs).filter(([, value]) => !!value).length,
+    [runRequest?.userInputBlocks, inputs]
+  )
+
+  const runButton = (
+    <Button
+      text="Run instruction"
+      onClick={runWithInput}
+      tone="primary"
+      icon={PlayIcon}
+      style={{width: '100%'}}
+      disabled={runDisabled}
+    />
+  )
+
+  const contextValue: RunInstructionContextValue = useMemo(
+    () => ({runInstruction, instructionLoading: loading}),
+    [runInstruction, loading]
+  )
+
+  return (
+    <RunInstructionContext.Provider value={contextValue}>
+      {open ? (
+        <Dialog
+          id={id}
+          open={open}
+          onClose={close}
+          width={1}
+          header={getInstructionTitle(runRequest?.instruction)}
+          footer={
+            <Flex justify="space-between" padding={2} flex={1}>
+              {runDisabled ? (
+                <Tooltip
+                  content={
+                    <Flex padding={2}>
+                      <Text>Unable to run instruction. All fields must have a value.</Text>
+                    </Flex>
+                  }
+                  placement="top"
+                >
+                  <Flex flex={1}>{runButton}</Flex>
+                </Tooltip>
+              ) : (
+                runButton
+              )}
+            </Flex>
+          }
+        >
+          <Stack padding={4} space={2}>
+            {runRequest?.userInputBlocks?.map((block, i) => (
+              <UserInput
+                key={block._key}
+                block={block}
+                autoFocus={i === 0}
+                inputs={inputs}
+                setInputs={setInputs}
+              />
+            ))}
+          </Stack>
+        </Dialog>
+      ) : null}
+      {props.children}
+    </RunInstructionContext.Provider>
+  )
+}
+
+function UserInput(props: {
+  block: UserInputBlock
+  inputs: BlockInputs
+  setInputs: Dispatch<SetStateAction<BlockInputs>>
+  autoFocus?: boolean
+}) {
+  const {block, autoFocus, setInputs, inputs} = props
+  const key = block._key
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+  const onChange = useCallback(
+    (e: FormEvent<HTMLTextAreaElement>) => {
+      setInputs((current) => ({
+        ...current,
+        [key]: (e.currentTarget ?? e.target).value,
+      }))
+    },
+    [key, setInputs]
+  )
+
+  const value = useMemo(() => inputs[key], [inputs, key])
+
+  useEffect(() => {
+    if (!autoFocus) {
+      return
+    }
+    setTimeout(() => textAreaRef.current?.focus(), 0)
+  }, [autoFocus])
+
+  return (
+    <Stack padding={2} space={3}>
+      <FormFieldHeaderText
+        title={block?.message ?? 'Provide more context'}
+        description={block.description}
+      />
+      <TextArea
+        ref={textAreaRef}
+        rows={4}
+        value={value}
+        onChange={onChange}
+        style={{resize: 'vertical'}}
+      />
+    </Stack>
+  )
+}

package/src/components/AssistFeatureBadge.tsx

@@ -0,0 +1,9 @@
+import {Badge} from '@sanity/ui'
+
+export function AssistFeatureBadge() {
+  return (
+    <Badge fontSize={0} style={{margin: '-2px 0'}} tone="primary">
+      Beta
+    </Badge>
+  )
+}

package/src/components/Delay.tsx

@@ -0,0 +1,25 @@
+import {motion} from 'framer-motion'
+import {ReactElement, ReactNode} from 'react'
+
+export function Delay({
+  children,
+  ms = 1000,
+  durationMs = 250,
+}: {
+  children?: ReactNode
+  ms?: number
+  durationMs?: number
+}): ReactElement {
+  return (
+    <motion.div
+      initial={{opacity: 0, scale: 0.75}}
+      animate={{opacity: 1, scale: 1}}
+      transition={{
+        delay: ms / 1000,
+        duration: durationMs / 1000,
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}

package/src/components/HideReferenceChangedBannerInput.tsx

@@ -0,0 +1,25 @@
+import {ObjectInputProps} from 'sanity'
+import {Box} from '@sanity/ui'
+import {useEffect, useRef} from 'react'
+
+export function HideReferenceChangedBannerInput(props: ObjectInputProps) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  // hides "reference was changed" banner (it is incorrectly flashing because the pane handler does not support the way wie use the assist pane)
+  useEffect(() => {
+    const parent = ref.current?.closest('[data-testid="pane-content"]')
+    if (!parent) {
+      return
+    }
+    const style = document.createElement('style')
+    const parentId = `id-${Math.random()}`.replace('.', '-')
+    parent.id = parentId
+
+    style.innerText = `
+      #${parentId} [data-testid="reference-changed-banner"] { display: none; }
+    `
+    parent.prepend(style)
+  }, [ref])
+
+  return <Box ref={ref}>{props.renderDefault(props)}</Box>
+}

package/src/components/SafeValueInput.tsx

@@ -0,0 +1,73 @@
+import {InputProps, isArraySchemaType, PatchEvent, unset} from 'sanity'
+import {ErrorInfo, PropsWithChildren, useCallback, useMemo, useState} from 'react'
+import {Box, Button, Card, ErrorBoundary, Flex, Stack, Text} from '@sanity/ui'
+import {isPortableTextArray} from '../helpers/typeUtils'
+import styled from 'styled-components'
+
+const WrapPreCard = styled(Card)`
+  & pre {
+    white-space: pre-wrap !important;
+  }
+`
+
+export function SafeValueInput(props: InputProps) {
+  return (
+    <ErrorWrapper onChange={props.onChange}>
+      <PteValueFixer {...props} />
+    </ErrorWrapper>
+  )
+}
+
+export function ErrorWrapper(
+  props: PropsWithChildren<{onChange: (patchEvent: PatchEvent) => void}>
+) {
+  const {onChange} = props
+  const [error, setError] = useState<Error | undefined>()
+
+  const catchError = useCallback(
+    (params: {error: Error; info: ErrorInfo}) => {
+      setError(params.error)
+    },
+    [setError]
+  )
+
+  const unsetValue = useCallback(() => onChange(PatchEvent.from(unset())), [onChange])
+  const dismiss = useCallback(() => setError(undefined), [])
+  const catcher = <ErrorBoundary onCatch={catchError}>{props.children}</ErrorBoundary>
+
+  return error ? (
+    <Card border tone="critical" padding={2} contentEditable={false}>
+      <Stack space={3}>
+        <Text muted weight="semibold">
+          An error occurred.
+        </Text>
+
+        <WrapPreCard flex={1} padding={2} tone="critical" border>
+          {catcher}
+        </WrapPreCard>
+
+        <Flex width="fill" flex={1} gap={3}>
+          <Box flex={1}>
+            <Button text="Dismiss" onClick={dismiss} tone="primary" />
+          </Box>
+          <Button text="Unset value" onClick={unsetValue} tone="critical" />
+        </Flex>
+      </Stack>
+    </Card>
+  ) : (
+    catcher
+  )
+}
+
+function PteValueFixer(props: InputProps) {
+  const isPortableText = useMemo(
+    () => isArraySchemaType(props.schemaType) && isPortableTextArray(props.schemaType),
+    [props.schemaType]
+  )
+  const value = props.value
+  if (isPortableText && value && !(value as any[]).length) {
+    return props.renderDefault({...props, value: undefined})
+  }
+
+  return props.renderDefault(props)
+}