@sanity/assist 5.0.4 → 6.0.0

package/src/assistInspector/AssistInspector.tsx

@@ -1,419 +0,0 @@
-import {ArrowRightIcon, CloseIcon, PlayIcon, RetryIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Spinner, Stack, Text} from '@sanity/ui'
-import {useCallback, useMemo, useRef} from 'react'
-import {
-  type DocumentInspectorProps,
-  PerspectiveProvider,
-  PresenceOverlay,
-  VirtualizerScrollInstanceProvider,
-} from 'sanity'
-import {
-  DocumentInspectorHeader,
-  type DocumentPaneNode,
-  DocumentPaneProvider,
-  useDocumentPane,
-} from 'sanity/structure'
-import {styled} from 'styled-components'
-
-import {DocumentForm} from '../_lib/form'
-import {useAssistDocumentContext} from '../assistDocument/AssistDocumentContext'
-import {AssistTypeContext} from '../assistDocument/components/AssistTypeContext'
-import {useStudioAssistDocument} from '../assistDocument/hooks/useStudioAssistDocument'
-import {useRequestRunInstruction} from '../assistDocument/RequestRunInstructionProvider'
-import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
-import {giveFeedbackUrl, pluginTitle, releaseAnnouncementUrl, salesUrl} from '../constants'
-import {getConditionalMembers} from '../helpers/conditionalMembers'
-import {assistDocumentId} from '../helpers/ids'
-import {InspectorOnboarding} from '../onboarding/InspectorOnboarding'
-import {assistDocumentTypeName, fieldPathParam, instructionParam} from '../types'
-import {FieldTitle} from './FieldAutocomplete'
-import {
-  type FieldRef,
-  getFieldTitle,
-  useAiPaneRouter,
-  useSelectedField,
-  useTypePath,
-} from './helpers'
-import {InstructionTaskHistoryButton} from './InstructionTaskHistoryButton'
-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 = useRef<HTMLDivElement | null>(null)
-  const pathKey = params?.[fieldPathParam]
-  const instructionKey = params?.[instructionParam]
-  const documentPane = useDocumentPane()
-  const {
-    documentId,
-    documentType,
-    value: docValue,
-    schemaType,
-    onChange: documentOnChange,
-    formState,
-  } = documentPane
-
-  const {assistableDocumentId, documentIsAssistable} = useAssistDocumentContext()
-
-  const formStateRef = useRef(formState)
-  formStateRef.current = formState
-
-  const {instructionLoading, requestRunInstruction} = useRequestRunInstruction({
-    documentOnChange,
-    isDocAssistable: documentIsAssistable,
-  })
-
-  const typePath = useTypePath(docValue, pathKey ?? '')
-  const selectedField = useSelectedField(schemaType, typePath)
-
-  const aiDocId = assistDocumentId(documentType)
-
-  const assistDocument = useStudioAssistDocument({documentId, schemaType, initDoc: true})
-  const assistField = assistDocument?.fields?.find((f) => f.path === typePath)
-  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 &&
-      typePath &&
-      requestRunInstruction({
-        documentId: assistableDocumentId,
-        path: pathKey,
-        typePath,
-        assistDocumentId: assistDocumentId(documentType),
-        instruction,
-        conditionalMembers: formStateRef.current ? getConditionalMembers(formStateRef.current) : [],
-      }),
-    [pathKey, instruction, typePath, documentType, assistableDocumentId, 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'}} />
-  }, [])
-
-  const assistTypeContext = useMemo(() => ({typePath, documentType}), [typePath, documentType])
-
-  if (!documentId || !schemaType || schemaType.jsonType !== 'object') {
-    return (
-      <Card flex={1} padding={4}>
-        <Text>Document not ready yet.</Text>
-      </Card>
-    )
-  }
-
-  return (
-    <Flex
-      ref={boundary}
-      direction="column"
-      height="fill"
-      overflow="hidden"
-      sizing="border"
-      style={{lineHeight: 0}}
-    >
-      <AiInspectorHeader
-        onClose={props.onClose}
-        field={selectedField}
-        fieldTitle={getFieldTitle(selectedField)}
-      />
-
-      <Card as={Region} flex={1} overflow="auto">
-        <Flex direction="column" style={{minHeight: '100%'}}>
-          <Box flex={1}>
-            <PresenceOverlay>
-              <Box padding={4}>
-                {selectedField && (
-                  <AssistTypeContext.Provider value={assistTypeContext}>
-                    <VirtualizerScrollInstanceProvider
-                      scrollElement={boundary.current}
-                      containerElement={boundary}
-                    >
-                      <PerspectiveProvider selectedPerspectiveName={undefined}>
-                        <DocumentPaneProvider
-                          paneKey={documentPane.paneKey}
-                          index={documentPane.index}
-                          itemId="ai"
-                          pane={paneNode}
-                        >
-                          <DocumentForm />
-                        </DocumentPaneProvider>
-                      </PerspectiveProvider>
-                    </VirtualizerScrollInstanceProvider>
-                  </AssistTypeContext.Provider>
-                )}
-              </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 style={{marginTop: 3}} /> : PlayIcon}
-                onClick={runCurrentInstruction}
-                padding={3}
-                text={'Run instruction'}
-              />
-            </Stack>
-          )}
-
-          <InstructionTaskHistoryButton
-            documentId={assistableDocumentId}
-            tasks={tasks}
-            instructions={instructions}
-            showTitles={!instructionKey}
-          />
-        </Flex>
-      </CardWithShadowAbove>
-    </Flex>
-  )
-}
-
-function AiInspectorHeader(props: {fieldTitle: string; field?: FieldRef; onClose: () => void}) {
-  const {onClose, field, 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" wrap="wrap" style={{marginTop: '-4px'}}>
-            <Box marginTop={1}>
-              <Text size={1} weight="semibold">
-                AI instructions for
-              </Text>
-            </Box>
-            <Card radius={2} border padding={1} marginTop={1}>
-              {field ? (
-                <FieldTitle field={field} />
-              ) : (
-                <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

@@ -1,146 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Autocomplete, Box, Breadcrumbs, Card, Flex, Text} from '@sanity/ui'
-import {createElement, useCallback, useMemo} from 'react'
-import {ObjectSchemaType} from 'sanity'
-
-import {isType} from '../helpers/typeUtils'
-import {FieldRef, getDocumentFieldRef} from './helpers'
-import {useAiAssistanceConfig} from '../assistLayout/AiAssistanceConfigContext'
-
-interface FieldSelectorProps {
-  id: string
-  schemaType: ObjectSchemaType
-  fieldPath?: string
-  onSelect: (path: string) => void
-  includeDocument?: boolean
-  filter?: (field: FieldRef) => boolean
-}
-
-export function FieldAutocomplete(props: FieldSelectorProps) {
-  const {id, schemaType, fieldPath, onSelect, includeDocument, filter} = props
-
-  const {getFieldRefs} = useAiAssistanceConfig()
-
-  const fieldRefs = useMemo(() => {
-    const refs = getFieldRefs(schemaType.name)
-    if (includeDocument) {
-      return [getDocumentFieldRef(schemaType), ...refs]
-    }
-    return refs
-  }, [schemaType, includeDocument, getFieldRefs])
-
-  const currentField = useMemo(
-    () => fieldRefs.find((f) => f.key === fieldPath),
-    [fieldPath, fieldRefs],
-  )
-
-  const autocompleteOptions = useMemo(
-    () =>
-      fieldRefs
-        .filter((field) => (filter ? filter(field) : true))
-        .filter((f) => !isType(f.schemaType, 'reference'))
-        .map((field) => ({value: field.key, field})),
-    [fieldRefs, filter],
-  )
-
-  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>
-      )
-    }
-
-    return (
-      <Card as="button" padding={3} radius={1}>
-        <Flex gap={3}>
-          <Text size={1}>{createElement(field.icon)}</Text>
-
-          <FieldTitle field={field} />
-        </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)
-    )
-  }, [])
-
-  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}
-    />
-  )
-}
-
-export function FieldTitle(props: {field: FieldRef}) {
-  const splitTitle = props.field.title.split('/')
-  return (
-    <Box flex="none">
-      <Breadcrumbs
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          alignItems: 'center',
-          marginTop: '-4px',
-        }}
-        separator={
-          <Box marginTop={1}>
-            <Text muted size={1}>
-              /
-            </Text>
-          </Box>
-        }
-        space={1}
-      >
-        {splitTitle.slice(0, splitTitle.length - 1).map((pt, i) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Box key={i} marginTop={1}>
-            <Text muted size={1}>
-              {pt.trim()}
-            </Text>
-          </Box>
-        ))}
-        <Box marginTop={1}>
-          <Text size={1} weight="medium">
-            {splitTitle[splitTitle.length - 1]}
-          </Text>
-        </Box>
-      </Breadcrumbs>
-    </Box>
-  )
-}