@sanity/assist 1.0.0

package/src/assistFormComponents/validation/validationList.tsx

@@ -0,0 +1,89 @@
+import {useCallback} from 'react'
+import {
+  isValidationErrorMarker,
+  isValidationInfoMarker,
+  isValidationWarningMarker,
+  ObjectSchemaType,
+  Path,
+  ValidationMarker,
+} from 'sanity'
+import {Container} from '@sanity/ui'
+import {ListItem} from './listItem'
+
+/** @internal */
+export interface ValidationListProps {
+  documentType?: ObjectSchemaType
+  kind?: 'simple'
+  validation: ValidationMarker[]
+  onFocus?: (path: Path) => void
+  onClose?: () => void
+  truncate?: boolean
+}
+
+export function ValidationList(props: ValidationListProps) {
+  const {documentType, kind, validation, onFocus, onClose, truncate} = props
+  const errors = validation.filter(isValidationErrorMarker)
+  const warnings = validation.filter(isValidationWarningMarker)
+  const info = validation.filter(isValidationInfoMarker)
+
+  const handleClick = useCallback(
+    (path: Path = []) => {
+      if (onFocus) onFocus(path)
+      if (onClose) onClose()
+    },
+    [onFocus, onClose]
+  )
+
+  const resolvePathTitle = (path: Path) => {
+    const fields = documentType && documentType.fields
+    const field = fields && fields.find((curr) => curr.name === path[0])
+
+    return (field && field.type.title) || ''
+  }
+
+  const hasErrors = errors.length > 0
+  const hasWarnings = warnings.length > 0
+  const hasInfo = info.length > 0
+
+  if (!hasErrors && !hasWarnings && !hasInfo) {
+    return null
+  }
+
+  return (
+    <Container width={0} data-kind={kind} data-testid="validation-list">
+      {hasErrors &&
+        errors.map((_error, i) => (
+          <ListItem
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            truncate={truncate}
+            path={resolvePathTitle(_error.path)}
+            marker={_error}
+            onClick={handleClick}
+          />
+        ))}
+      {hasWarnings &&
+        warnings.map((_warning, i) => (
+          <ListItem
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            truncate={truncate}
+            path={resolvePathTitle(_warning.path)}
+            marker={_warning}
+            onClick={handleClick}
+          />
+        ))}
+      {hasInfo &&
+        info.map((_info, i) => (
+          <ListItem
+            // eslint-disable-next-line react/no-array-index-key
+            key={i}
+            truncate={truncate}
+            path={resolvePathTitle(_info.path)}
+            marker={_info}
+            onClick={handleClick}
+          />
+        ))}
+    </Container>
+  )
+}

package/src/assistInspector/AssistInspector.tsx

@@ -0,0 +1,379 @@
+import {ArrowRightIcon, CloseIcon, PlayIcon, RetryIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Spinner, Stack, Text} from '@sanity/ui'
+import {useCallback, useMemo, useState} from 'react'
+import {
+  DocumentInspectorProps,
+  PresenceOverlay,
+  useEditState,
+  VirtualizerScrollInstanceProvider,
+} from 'sanity'
+import {
+  DocumentInspectorHeader,
+  DocumentPaneNode,
+  DocumentPaneProvider,
+  useDocumentPane,
+} from 'sanity/desk'
+import {DocumentForm} from '../_lib/form'
+import {assistDocumentTypeName, fieldPathParam, instructionParam} from '../types'
+import {getFieldTitle, useAiPaneRouter, useSelectedField} from './helpers'
+import styled from 'styled-components'
+import {useStudioAssistDocument} from '../assistDocument/hooks/useStudioAssistDocument'
+import {InstructionTaskHistoryButton} from './InstructionTaskHistoryButton'
+import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
+import {giveFeedbackUrl, pluginTitle, releaseAnnouncementUrl, salesUrl} from '../constants'
+import {assistDocumentId} from '../helpers/ids'
+import {
+  getAssistableDocId,
+  isDocAssistable,
+  useRequestRunInstruction,
+} from '../assistDocument/RequestRunInstructionProvider'
+import {InspectorOnboarding} from '../onboarding/InspectorOnboarding'
+import {inspectorOnboardingKey, useOnboardingFeature} from '../onboarding/onboardingStore'
+
+const CardWithShadowBelow = styled(Card)`
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    border-bottom: 1px solid var(--card-border-color);
+    opacity: 0.5;
+    z-index: 100;
+  }
+`
+
+const CardWithShadowAbove = styled(Card)`
+  position: relative;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -1px;
+    border-top: 1px solid var(--card-border-color);
+    opacity: 0.5;
+    z-index: 100;
+  }
+`
+
+export function AssistInspectorWrapper(props: DocumentInspectorProps) {
+  const context = useAiAssistanceConfig()
+
+  if (context.statusLoading) {
+    return (
+      <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+        <Stack space={3} style={{textAlign: 'center'}}>
+          <Spinner muted />
+          <Text muted size={1}>
+            Loading {pluginTitle}...
+          </Text>
+        </Stack>
+      </Flex>
+    )
+  }
+
+  const status = context.status
+
+  if (!status?.enabled) {
+    return (
+      <Flex direction="column" height="fill">
+        <DocumentInspectorHeader
+          closeButtonLabel="Close"
+          onClose={props.onClose}
+          title={pluginTitle}
+        />
+
+        <Stack flex={1} overflow="auto" padding={4} space={3}>
+          <Text as="p" size={1} weight="semibold">
+            {pluginTitle} is not available
+          </Text>
+
+          <Text as="p" muted size={1}>
+            Please get in touch with a Sanity account manager or{' '}
+            <a href={salesUrl} target="_blank" rel="noreferrer">
+              contact our sales team
+            </a>{' '}
+            to get started with {pluginTitle}.{' '}
+            <a href={releaseAnnouncementUrl} target="_blank" rel="noreferrer">
+              Learn more &rarr;
+            </a>
+          </Text>
+        </Stack>
+      </Flex>
+    )
+  }
+
+  if (!status?.initialized || !status.validToken) {
+    return (
+      <Flex direction="column" height="fill">
+        <DocumentInspectorHeader
+          closeButtonLabel="Close"
+          onClose={props.onClose}
+          title={pluginTitle}
+        />
+
+        <Stack padding={4} space={3}>
+          {context.error ? (
+            <Text size={1} weight="semibold">
+              Failed to start {pluginTitle}
+            </Text>
+          ) : null}
+
+          {!context.error && !status?.initialized ? (
+            <Text size={1} weight="semibold">
+              {pluginTitle} is not enabled
+            </Text>
+          ) : null}
+
+          {!context.error && status?.initialized && !status.validToken ? (
+            <>
+              <Text size={1} weight="semibold">
+                Invalid token
+              </Text>
+              <Text muted size={1}>
+                The token used by the AI Assistant is not valid and has to be regenerated.
+              </Text>
+            </>
+          ) : null}
+
+          {context.error && (
+            <Text muted size={1}>
+              Something went wrong. See console for details.
+            </Text>
+          )}
+
+          {!context.error && !status?.initialized && (
+            <Text size={1} muted>
+              Please enable {pluginTitle}.
+            </Text>
+          )}
+
+          <Button
+            fontSize={1}
+            icon={
+              context.initLoading ? (
+                <Box marginTop={1}>
+                  <Spinner />
+                </Box>
+              ) : context.error ? (
+                RetryIcon
+              ) : undefined
+            }
+            text={
+              context.error
+                ? 'Retry'
+                : status?.initialized && !status.validToken
+                ? `Restore ${pluginTitle}`
+                : `Enable ${pluginTitle} now`
+            }
+            tone="primary"
+            onClick={context.init}
+            disabled={context.initLoading}
+          />
+        </Stack>
+      </Flex>
+    )
+  }
+
+  return <AssistInspector {...props} />
+}
+
+export function AssistInspector(props: DocumentInspectorProps) {
+  const {params} = useAiPaneRouter()
+
+  const [boundary, setBoundary] = useState<HTMLDivElement | null>(null)
+  const pathKey = params?.[fieldPathParam]
+  const instructionKey = params?.[instructionParam]
+  const documentPane = useDocumentPane()
+  const {documentId, documentType, schemaType, onChange: documentOnChange} = documentPane
+  const {published, draft} = useEditState(documentId, documentType, 'low')
+
+  const assistableDocId = getAssistableDocId(schemaType, documentId)
+  const {instructionLoading, requestRunInstruction} = useRequestRunInstruction({
+    documentOnChange,
+    isDocAssistable: isDocAssistable(schemaType, published, draft),
+  })
+  const selectedField = useSelectedField(schemaType, params[fieldPathParam])
+
+  const aiDocId = assistDocumentId(documentType)
+
+  const assistDocument = useStudioAssistDocument({documentId, schemaType})
+  const assistField = assistDocument?.fields?.find((f) => f.path === pathKey)
+  const instruction = assistField?.instructions?.find((i) => i._key === instructionKey)
+  const tasks = useMemo(
+    () =>
+      assistDocument?.tasks?.filter((i) => !instructionKey || i.instructionKey === instructionKey),
+    [assistDocument?.tasks, instructionKey]
+  )
+  const instructions = useMemo(
+    () => assistDocument?.fields?.flatMap((f) => f.instructions ?? []),
+    [assistDocument?.fields]
+  )
+
+  const promptValue = instruction?.prompt
+  const isEmptyPrompt = useMemo(() => {
+    if (!promptValue?.length) {
+      return true
+    }
+    const firstBlock = promptValue[0] as any
+    const children = firstBlock?.children
+
+    return promptValue.length == 1 && children?.length === 1 && !children?.[0]?.text?.length
+  }, [promptValue])
+
+  const paneNode: DocumentPaneNode = useMemo(
+    () => ({
+      type: 'document',
+      id: aiDocId,
+      title: pluginTitle,
+      options: {
+        id: aiDocId,
+        type: assistDocumentTypeName,
+      },
+    }),
+    [aiDocId]
+  )
+
+  const runCurrentInstruction = useCallback(
+    () =>
+      instruction &&
+      pathKey &&
+      requestRunInstruction({
+        documentId: assistableDocId,
+        path: pathKey,
+        assistDocumentId: assistDocumentId(documentType),
+        instruction,
+      }),
+    [instruction, pathKey, documentType, assistableDocId, requestRunInstruction]
+  )
+
+  const Region = useCallback((_props: any) => {
+    // disabled for now
+    /* return (
+        <ConnectToRegion
+          {..._props}
+          _key={`${paneKey}_${selectedField?.key || '_field'}`}
+          style={{height: '100%', flex: 1, overflow: 'auto'}}
+        />
+      )*/
+    return <div {..._props} style={{height: '100%', flex: 1, overflow: 'auto'}} />
+  }, [])
+
+  if (!documentId || !schemaType || schemaType.jsonType !== 'object') {
+    return (
+      <Card flex={1} padding={4}>
+        <Text>Document not ready yet.</Text>
+      </Card>
+    )
+  }
+
+  return (
+    <Flex
+      ref={setBoundary}
+      direction="column"
+      height="fill"
+      overflow="hidden"
+      sizing="border"
+      style={{lineHeight: 0}}
+    >
+      <AiInspectorHeader onClose={props.onClose} fieldTitle={getFieldTitle(selectedField)} />
+
+      <Card as={Region} flex={1} overflow="auto">
+        <Flex direction="column" style={{minHeight: '100%'}}>
+          <Box flex={1}>
+            <PresenceOverlay>
+              <Box padding={4}>
+                {selectedField && (
+                  <VirtualizerScrollInstanceProvider scrollElement={boundary}>
+                    <DocumentPaneProvider
+                      paneKey={documentPane.paneKey}
+                      index={documentPane.index}
+                      itemId="ai"
+                      pane={paneNode}
+                    >
+                      <DocumentForm />
+                    </DocumentPaneProvider>
+                  </VirtualizerScrollInstanceProvider>
+                )}
+              </Box>
+            </PresenceOverlay>
+          </Box>
+
+          <Box flex="none" padding={4}>
+            <Text muted size={1}>
+              How is Sanity AI Assist working for you?{' '}
+              <a
+                href={giveFeedbackUrl}
+                target="_blank"
+                rel="noreferrer"
+                style={{whiteSpace: 'nowrap'}}
+              >
+                Let us know <ArrowRightIcon />
+              </a>
+            </Text>
+          </Box>
+        </Flex>
+      </Card>
+
+      <CardWithShadowAbove flex="none" paddingX={4} paddingY={3} style={{justifySelf: 'flex-end'}}>
+        <Flex gap={2} flex={1} justify="flex-end">
+          {schemaType?.name && pathKey && instructionKey && (
+            <Stack flex={1}>
+              <Button
+                mode="ghost"
+                disabled={isEmptyPrompt || instructionLoading}
+                fontSize={1}
+                icon={instructionLoading ? <Spinner /> : PlayIcon}
+                onClick={runCurrentInstruction}
+                padding={3}
+                text={'Run instruction'}
+              />
+            </Stack>
+          )}
+
+          <InstructionTaskHistoryButton
+            documentId={assistableDocId}
+            tasks={tasks}
+            instructions={instructions}
+            showTitles={!instructionKey}
+          />
+        </Flex>
+      </CardWithShadowAbove>
+    </Flex>
+  )
+}
+
+function AiInspectorHeader(props: {fieldTitle: string; onClose: () => void}) {
+  const {onClose, fieldTitle} = props
+  const {showOnboarding, dismissOnboarding} = useOnboardingFeature(inspectorOnboardingKey)
+
+  return (
+    <CardWithShadowBelow flex="none" padding={2}>
+      <Flex flex={1} align="center">
+        <Flex flex={1} padding={3} gap={2} align="center">
+          <Flex gap={1} align="center">
+            <Text size={1} weight="semibold">
+              AI instructions for
+            </Text>
+            <Card radius={2} border padding={1} style={{margin: '-4px 0'}}>
+              <Text size={1} weight="semibold">
+                {fieldTitle}
+              </Text>
+            </Card>
+          </Flex>
+        </Flex>
+        <Box flex="none">
+          <Button fontSize={1} icon={CloseIcon} mode="bleed" onClick={onClose} />
+        </Box>
+      </Flex>
+
+      {showOnboarding && <InspectorOnboarding onDismiss={dismissOnboarding} />}
+    </CardWithShadowBelow>
+  )
+}

package/src/assistInspector/FieldAutocomplete.tsx

@@ -0,0 +1,119 @@
+import {SearchIcon} from '@sanity/icons'
+import {Autocomplete, Box, Breadcrumbs, Card, Flex, Text} from '@sanity/ui'
+import {createElement, useCallback, useMemo} from 'react'
+import {FieldRef, getFieldRefs, getFieldRefsWithDocument} from './helpers'
+import {ObjectSchemaType} from 'sanity'
+import {isType} from '../helpers/typeUtils'
+
+interface FieldSelectorProps {
+  id: string
+  schemaType: ObjectSchemaType
+  fieldPath?: string
+  onSelect: (path: string) => void
+  includeDocument?: boolean
+}
+
+export function FieldAutocomplete(props: FieldSelectorProps) {
+  const {id, schemaType, fieldPath, onSelect, includeDocument} = props
+
+  const fieldNames = useMemo(() => {
+    if (includeDocument) {
+      return getFieldRefsWithDocument(schemaType)
+    }
+    return getFieldRefs(schemaType)
+  }, [schemaType, includeDocument])
+  const currentField = useMemo(
+    () => fieldNames.find((f) => f.key === fieldPath),
+    [fieldPath, fieldNames]
+  )
+
+  const autocompleteOptions = useMemo(
+    () => fieldNames.map((field) => ({value: field.key, field})),
+    [fieldNames]
+  )
+
+  const renderOption = useCallback((option: {value: string; field: FieldRef}) => {
+    const {value, field} = option
+
+    if (!value) {
+      return (
+        <Card as="button" padding={3} radius={1}>
+          <Text accent size={1}>
+            {option.value}
+          </Text>
+        </Card>
+      )
+    }
+
+    if (isType(field.schemaType, 'document')) {
+      return (
+        <Card as="button" padding={3} radius={1}>
+          <Text size={1} weight="semibold">
+            The entire document
+          </Text>
+        </Card>
+      )
+    }
+
+    const splitTitle = field.title.split('/')
+    return (
+      <Card as="button" padding={3} radius={1}>
+        <Flex gap={3}>
+          <Text size={1}>{createElement(field.icon)}</Text>
+
+          <Box flex="none">
+            <Breadcrumbs
+              separator={
+                <Text muted size={1}>
+                  /
+                </Text>
+              }
+              space={1}
+            >
+              {splitTitle.slice(0, splitTitle.length - 1).map((pt, i) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <Text key={i} muted size={1}>
+                  {pt.trim()}
+                </Text>
+              ))}
+
+              <Text size={1} weight="medium">
+                {splitTitle[splitTitle.length - 1]}
+              </Text>
+            </Breadcrumbs>
+          </Box>
+        </Flex>
+      </Card>
+    )
+  }, [])
+
+  const renderValue = useCallback((value: string, option?: {value: string; field: FieldRef}) => {
+    return option?.field.title ?? value
+  }, [])
+
+  const filterOption = useCallback((query: string, option: {value: string; field: FieldRef}) => {
+    const lQuery = query.toLowerCase()
+    return (
+      option?.value?.toLowerCase().includes(lQuery) ||
+      option?.field?.title?.toLowerCase().includes(lQuery)
+    )
+  }, [])
+
+  // const id = useId()
+  return (
+    <Autocomplete
+      fontSize={1}
+      icon={currentField ? currentField.icon : SearchIcon}
+      onChange={onSelect}
+      openButton
+      id={id}
+      options={autocompleteOptions}
+      placeholder="Search for a field"
+      radius={2}
+      renderOption={renderOption}
+      renderValue={renderValue}
+      value={currentField?.key}
+      filterOption={filterOption}
+    />
+  )
+}