@sanity/assist 1.0.0

package/src/components/TimeAgo.tsx

@@ -0,0 +1,18 @@
+import {useEffect, useReducer} from 'react'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+
+function useInterval(ms: number) {
+  const [tick, update] = useReducer((n) => n + 1, 0)
+
+  useEffect(() => {
+    const i = setInterval(update, ms)
+    return () => clearInterval(i)
+  }, [ms])
+  return tick
+}
+
+export function TimeAgo({date}: {date?: string}) {
+  useInterval(1000)
+  const timeSince = formatDistanceToNow(date ? new Date(date) : new Date())
+  return <span title={timeSince}>{timeSince} ago</span>
+}

package/src/constants.ts

@@ -0,0 +1,20 @@
+import {minutesToMilliseconds} from 'date-fns'
+
+export const releaseAnnouncementUrl =
+  'https://www.sanity.io/blog/sanity-ai-assist-announcement?utm_source=sanity-assist-plugin&utm_medium=organic_social&utm_campaign=ai-assist&utm_content='
+
+export const instructionGuideUrl =
+  'https://sanity.io/guides/getting-started-with-ai-assist-instructions?utm_source=sanity-assist-plugin&utm_medium=organic_social&utm_campaign=ai-assist&utm_content='
+
+export const giveFeedbackUrl = 'https://forms.gle/Kwz7CThxGeA2GiEU8'
+
+export const salesUrl =
+  'https://www.sanity.io/contact/sales?utm_source=sanity-assist-plugin&utm_medium=organic_social&utm_campaign=ai-assist&utm_content='
+
+export const packageName = '@sanity/assist'
+
+export const pluginTitle = 'Sanity AI Assist'
+
+export const pluginTitleShort = 'AI Assist'
+
+export const maxHistoryVisibilityMs = minutesToMilliseconds(30)

package/src/fieldActions/PrivateIcon.tsx

@@ -0,0 +1,20 @@
+import {LockIcon} from '@sanity/icons'
+import {Text, Tooltip} from '@sanity/ui'
+
+export function PrivateIcon() {
+  return (
+    <Tooltip
+      content={
+        <Text size={1} style={{whiteSpace: 'nowrap'}}>
+          Only visible to you
+        </Text>
+      }
+      fallbackPlacements={['bottom']}
+      padding={2}
+      placement="top"
+      portal
+    >
+      <LockIcon />
+    </Tooltip>
+  )
+}

package/src/fieldActions/assistFieldActions.tsx

@@ -0,0 +1,230 @@
+import {
+  DocumentFieldAction,
+  DocumentFieldActionGroup,
+  DocumentFieldActionItem,
+  ObjectSchemaType,
+  useCurrentUser,
+} from 'sanity'
+import {ControlsIcon, SparklesIcon} from '@sanity/icons'
+import {useCallback, useMemo} from 'react'
+import {pluginTitle, pluginTitleShort} from '../constants'
+import {useAssistSupported} from '../helpers/useAssistSupported'
+import {useAssistDocumentContext} from '../assistDocument/AssistDocumentContext'
+import {getInstructionTitle, usePathKey} from '../helpers/misc'
+import {fieldPathParam, instructionParam, StudioInstruction} from '../types'
+import {aiInspectorId} from '../assistInspector/constants'
+import {getIcon} from '../assistDocument/components/instruction/appearance/IconInput'
+import {useAssistDocumentContextValue} from '../assistDocument/hooks/useAssistDocumentContextValue'
+import {
+  getAssistableDocId,
+  useRequestRunInstruction,
+} from '../assistDocument/RequestRunInstructionProvider'
+import {PrivateIcon} from './PrivateIcon'
+
+function node(node: DocumentFieldActionItem | DocumentFieldActionGroup) {
+  return node
+}
+
+export const assistFieldActions: DocumentFieldAction = {
+  name: 'sanity-assist-actions',
+  useAction(props) {
+    const assistSupported = useAssistSupported(props.path, props.schemaType)
+    const isDocumentLevel = props.path.length === 0
+
+    const {
+      assistDocument,
+      documentIsNew,
+      documentIsAssistable,
+      openInspector,
+      closeInspector,
+      inspector,
+      documentOnChange,
+      documentSchemaType,
+      documentId,
+      selectedPath,
+    } =
+      // document field actions do not have access to the document context
+      // conditional hook _should_ be safe here since the logical path will be stable
+      isDocumentLevel
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks
+          useAssistDocumentContextValue(props.documentId, props.schemaType as ObjectSchemaType)
+        : // eslint-disable-next-line react-hooks/rules-of-hooks
+          useAssistDocumentContext()
+
+    const currentUser = useCurrentUser()
+    const isHidden = !assistDocument
+    const pathKey = usePathKey(props.path)
+    const assistDocumentId = assistDocument?._id
+
+    const assistableDocId = getAssistableDocId(documentSchemaType, documentId)
+    const {requestRunInstruction} = useRequestRunInstruction({
+      documentOnChange,
+      isDocAssistable: documentIsAssistable ?? false,
+    })
+
+    const fieldAssist = useMemo(
+      () => (assistDocument?.fields ?? []).find((f) => f.path == pathKey),
+      [assistDocument?.fields, pathKey]
+    )
+    const fieldAssistKey = fieldAssist?._key
+    const isInspectorOpen = inspector?.name === aiInspectorId
+    const isPathSelected = pathKey === selectedPath
+    const isSelected = isInspectorOpen && isPathSelected
+
+    const manageInstructions = useCallback(
+      () =>
+        isSelected
+          ? closeInspector(aiInspectorId)
+          : openInspector(aiInspectorId, {
+              [fieldPathParam]: pathKey,
+              [instructionParam]: undefined as any,
+            }),
+      [openInspector, closeInspector, isSelected, pathKey]
+    )
+
+    const onInstructionAction = useCallback(
+      (instruction: StudioInstruction) => {
+        if (!pathKey || !fieldAssistKey || !assistDocumentId || !assistableDocId) {
+          return
+        }
+        requestRunInstruction({
+          documentId: assistableDocId,
+          assistDocumentId,
+          path: pathKey,
+          instruction,
+        })
+      },
+      [requestRunInstruction, assistableDocId, pathKey, assistDocumentId, fieldAssistKey]
+    )
+
+    const privateInstructions = useMemo(
+      () =>
+        fieldAssist?.instructions?.filter((i) => i.userId && i.userId === currentUser?.id) || [],
+      [fieldAssist?.instructions, currentUser]
+    )
+
+    const sharedInstructions = useMemo(
+      () => fieldAssist?.instructions?.filter((i) => !i.userId) || [],
+      [fieldAssist?.instructions]
+    )
+
+    const instructions = useMemo(
+      () => [...privateInstructions, ...sharedInstructions],
+      [privateInstructions, sharedInstructions]
+    )
+
+    const runInstructionsGroup = useMemo(() => {
+      return instructions?.length
+        ? node({
+            type: 'group',
+            icon: () => null,
+            title: 'Run instructions',
+            children: instructions.map((instruction) =>
+              instructionItem({
+                instruction,
+                isPrivate: Boolean(instruction.userId && instruction.userId === currentUser?.id),
+                onInstructionAction,
+                hidden: isHidden,
+                documentIsNew: !!documentIsNew,
+                assistSupported,
+              })
+            ),
+            expanded: true,
+          })
+        : undefined
+    }, [
+      instructions,
+      currentUser?.id,
+      onInstructionAction,
+      isHidden,
+      documentIsNew,
+      assistSupported,
+    ])
+
+    const instructionsLength = instructions?.length || 0
+
+    const manageInstructionsItem = useMemo(
+      () =>
+        node({
+          type: 'action',
+          icon: ControlsIcon,
+          title: 'Manage instructions',
+          onAction: manageInstructions,
+          selected: isSelected,
+        }),
+      [manageInstructions, isSelected]
+    )
+
+    const group = useMemo(
+      () =>
+        node({
+          type: 'group',
+          icon: SparklesIcon,
+          title: pluginTitleShort,
+          children: [
+            runInstructionsGroup,
+            /*         documentIsNew && {
+              type: 'action',
+              disabled: true,
+              title: `Document is new. Make an edit to enable `,
+              icon: WarningOutlineIcon,
+              tone: 'caution',
+              status: 'warning',
+              onAction: () => {},
+            },*/
+            manageInstructionsItem,
+          ].filter((c): c is DocumentFieldActionItem | DocumentFieldActionGroup => !!c),
+          expanded: false,
+          renderAsButton: true,
+          hidden: !assistSupported,
+        }),
+      [
+        //documentIsNew,
+        runInstructionsGroup,
+        manageInstructionsItem,
+        assistSupported,
+      ]
+    )
+
+    const emptyAction = useMemo(
+      () =>
+        node({
+          type: 'action',
+          hidden: !assistSupported,
+          icon: SparklesIcon,
+          onAction: manageInstructions,
+          renderAsButton: true,
+          title: pluginTitleShort,
+          selected: isSelected,
+        }),
+      [assistSupported, manageInstructions, isSelected]
+    )
+
+    // If there are no instructions, we don't want to render the group
+    if (instructionsLength === 0) {
+      return emptyAction
+    }
+
+    return group
+  },
+}
+
+function instructionItem(props: {
+  instruction: StudioInstruction
+  isPrivate: boolean
+  onInstructionAction: (ins: StudioInstruction) => void
+  assistSupported: boolean
+  documentIsNew: boolean
+  hidden: boolean
+}) {
+  const {hidden, isPrivate, onInstructionAction, assistSupported, instruction} = props
+  return node({
+    type: 'action',
+    icon: getIcon(instruction.icon),
+    iconRight: isPrivate ? PrivateIcon : undefined,
+    title: getInstructionTitle(instruction),
+    onAction: () => onInstructionAction(instruction),
+    disabled: assistSupported ? false : {reason: `${pluginTitle} is not supported for this field`},
+    hidden,
+  })
+}

package/src/globals.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png'
+declare module '*.svg'
+declare module '*.jpeg'
+declare module '*.jpg'

package/src/helpers/assistSupported.ts

@@ -0,0 +1,44 @@
+import {SchemaType} from 'sanity'
+import {AssistOptions} from '../schemas/typeDefExtensions'
+import {isType} from './typeUtils'
+
+export function isSchemaAssistEnabled(type: SchemaType) {
+  return !(type.options as AssistOptions | undefined)?.aiWritingAssistance?.exclude
+}
+
+export function isAssistSupported(type: SchemaType) {
+  if (!isSchemaAssistEnabled(type)) {
+    return false
+  }
+
+  if (isUnsupportedType(type)) {
+    return false
+  }
+
+  if (type.jsonType === 'array') {
+    const unsupportedArray = type.of.every((t) => isUnsupportedType(t))
+    return !unsupportedArray
+  }
+
+  if (type.jsonType === 'object') {
+    const unsupportedObject = type.fields.every((field) => isUnsupportedType(field.type))
+    return !unsupportedObject
+  }
+  return true
+}
+
+function isUnsupportedType(type: SchemaType) {
+  return (
+    !isSchemaAssistEnabled(type) ||
+    type.jsonType === 'number' ||
+    type.name === 'sanity.imageCrop' ||
+    type.name === 'sanity.imageHotspot' ||
+    isType(type, 'reference') ||
+    isType(type, 'crossDatasetReference') ||
+    isType(type, 'slug') ||
+    isType(type, 'url') ||
+    isType(type, 'date') ||
+    isType(type, 'datetime') ||
+    isType(type, 'file')
+  )
+}

package/src/helpers/ids.ts

@@ -0,0 +1,19 @@
+import {assistDocumentIdPrefix, assistDocumentStatusIdPrefix} from '../types'
+
+const aiDocPrefixPattern = new RegExp(`^${assistDocumentIdPrefix}`)
+
+export function publicId(id: string) {
+  return id.replace('drafts.', '')
+}
+
+export function assistDocumentId(documentType: string) {
+  return `${assistDocumentIdPrefix}${documentType}`
+}
+
+export function documentTypeFromAiDocumentId(id: string) {
+  return id.replace(aiDocPrefixPattern, '')
+}
+
+export function assistTasksStatusId(documentId: string) {
+  return `${assistDocumentStatusIdPrefix}${publicId(documentId)}`
+}

package/src/helpers/misc.ts

@@ -0,0 +1,16 @@
+import {documentRootKey, StudioInstruction} from '../types'
+import {Path, pathToString} from 'sanity'
+import {useMemo} from 'react'
+
+export function usePathKey(path: Path | string) {
+  return useMemo(() => {
+    if (path.length) {
+      return Array.isArray(path) ? pathToString(path) : path
+    }
+    return documentRootKey
+  }, [path])
+}
+
+export function getInstructionTitle(instruction?: StudioInstruction) {
+  return instruction?.title ?? 'Untitled'
+}

package/src/helpers/typeUtils.ts

@@ -0,0 +1,15 @@
+import {ArraySchemaType, SchemaType} from 'sanity'
+
+export function isPortableTextArray(type: ArraySchemaType) {
+  return type.of.find((t) => isType(t, 'block'))
+}
+
+export function isType(schemaType: SchemaType, typeName: string): boolean {
+  if (schemaType.name === typeName) {
+    return true
+  }
+  if (!schemaType.type) {
+    return false
+  }
+  return isType(schemaType.type, typeName)
+}

package/src/helpers/useAssistSupported.ts

@@ -0,0 +1,10 @@
+import {Path, SchemaType} from 'sanity'
+import {useMemo} from 'react'
+import {isAssistSupported} from './assistSupported'
+
+export function useAssistSupported(path: Path, schemaType: SchemaType) {
+  return useMemo(
+    () => path.every((p) => typeof p === 'string') && isAssistSupported(schemaType),
+    [path, schemaType]
+  )
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './schemas/typeDefExtensions'
+export * from './schemas/serialize/SchemTypeTool'
+
+export {contextDocumentTypeName} from './types'
+
+export {assist} from './plugin'

package/src/legacy-types.ts

@@ -0,0 +1,72 @@
+import {SanityDocument} from 'sanity'
+import {PortableTextBlock, PortableTextMarkDefinition, PortableTextSpan} from '@portabletext/types'
+
+//id prefixes
+export const legacyAssistDocumentIdPrefix = 'sanity.ai.'
+
+export const legacyAssistDocumentTypeName = 'sanity.ai.docType' as const
+const aiFieldTypeName = 'sanity.ai.docType.field' as const
+const instructionTypeName = 'sanity.ai.field.instruction' as const
+
+const userInputTypeName = 'sanity.ai.prompt.userInput' as const
+const promptContextTypeName = 'sanity.ai.prompt.context' as const
+const fieldReferenceTypeName = 'sanity.ai.prompt.fieldRef' as const
+
+export const legacyContextDocumentTypeName = 'ai.instruction.context' as const
+
+export const legacyAssistStatusDocumentTypeName = 'sanity.ai.instructionStatus' as const
+
+export interface FieldPrompts {
+  _key: string
+  _type: typeof aiFieldTypeName
+  path?: string
+  instructions?: LegacyInstruction[]
+}
+
+export interface LegacyAssistDocument extends SanityDocument {
+  fields: FieldPrompts[]
+}
+
+export interface LegacyFieldRef extends PortableTextMarkDefinition {
+  _type: typeof fieldReferenceTypeName
+  path?: string
+}
+
+export interface LegacyContextBlock {
+  _type: typeof promptContextTypeName
+  reference?: {
+    _type: 'reference'
+    _ref?: string
+  }
+}
+
+export interface LegacyUserInputBlock {
+  _type: typeof userInputTypeName
+  _key: string
+  message?: string
+  description?: string
+}
+
+export type LegacyPromptTextBlock = PortableTextBlock<
+  never,
+  PortableTextSpan | LegacyFieldRef | LegacyUserInputBlock | LegacyContextBlock,
+  'normal',
+  never
+>
+
+export type LegacyPromptBlock =
+  | LegacyPromptTextBlock
+  | LegacyFieldRef
+  | LegacyContextBlock
+  | LegacyUserInputBlock
+
+export interface LegacyInstruction {
+  _key: string
+  _type: typeof instructionTypeName
+  prompt?: LegacyPromptBlock[]
+
+  icon?: string
+  userId?: string
+  title?: string
+  placeholder?: string
+}

package/src/onboarding/FieldActionsOnboarding.tsx

@@ -0,0 +1,90 @@
+import {Path, pathToString} from 'sanity'
+import {Button, Flex, Popover, Stack, Text} from '@sanity/ui'
+import {PropsWithChildren, useContext, useMemo, useRef} from 'react'
+import {FirstAssistedPathContext} from './FirstAssistedPathProvider'
+import {AssistFeatureBadge} from '../components/AssistFeatureBadge'
+import {ArrowRightIcon, CheckmarkIcon, SparklesIcon} from '@sanity/icons'
+import {pluginTitle, releaseAnnouncementUrl} from '../constants'
+import {fieldOnboardingKey, useOnboardingFeature} from './onboardingStore'
+
+export interface FieldActionsOnboardingProps {
+  path: Path
+}
+
+export function FieldActionsOnboarding(props: PropsWithChildren<FieldActionsOnboardingProps>) {
+  const {path, children} = props
+
+  const firstAssistedPath = useContext(FirstAssistedPathContext)
+  const isFirstAssisted = useMemo(
+    () => pathToString(path) === firstAssistedPath,
+    [path, firstAssistedPath]
+  )
+
+  if (!isFirstAssisted) {
+    return <>{children}</>
+  }
+
+  return <AssistOnboardingPopover {...props} />
+}
+
+function AssistOnboardingPopover(props: PropsWithChildren<FieldActionsOnboardingProps>) {
+  const {showOnboarding, dismissOnboarding} = useOnboardingFeature(fieldOnboardingKey)
+
+  if (!showOnboarding) {
+    return <>{props.children}</>
+  }
+
+  return (
+    <Popover
+      content={<AssistIntroCard path={props.path} dismiss={dismissOnboarding} />}
+      open
+      portal
+      placeholder="bottom"
+      tone="default"
+      width={0}
+    >
+      <div>
+        <Button disabled fontSize={1} icon={SparklesIcon} mode="ghost" padding={2} />
+      </div>
+    </Popover>
+  )
+}
+
+function AssistIntroCard(props: FieldActionsOnboardingProps & {dismiss: () => void}) {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <Stack as="section" padding={3} space={3}>
+      <Stack padding={2} space={4}>
+        <Flex gap={2} align="center">
+          <Text as="h1" size={1} weight="semibold">
+            {pluginTitle}
+          </Text>
+          <div aria-hidden style={{margin: '-3px 0', lineHeight: 0}}>
+            <AssistFeatureBadge />
+          </div>
+        </Flex>
+
+        <Stack space={3}>
+          <Text as="p" muted size={1}>
+            Manage reusable AI instructions to boost your content creation and reduce amount of
+            repetitive chores.{' '}
+            <a href={releaseAnnouncementUrl} target="_blank" rel="noreferrer">
+              Learn more <ArrowRightIcon />
+            </a>
+          </Text>
+        </Stack>
+      </Stack>
+
+      <Button
+        fontSize={1}
+        icon={CheckmarkIcon}
+        onClick={props.dismiss}
+        padding={3}
+        ref={buttonRef}
+        text="Ok, good to know!"
+        tone="primary"
+      />
+    </Stack>
+  )
+}

package/src/onboarding/FirstAssistedPathProvider.tsx

@@ -0,0 +1,29 @@
+import {ObjectInputProps, FieldMember, pathToString} from 'sanity'
+import {createContext, PropsWithChildren, useMemo} from 'react'
+import {isAssistSupported} from '../helpers/assistSupported'
+
+export const FirstAssistedPathContext = createContext<string | undefined>(undefined)
+
+export interface FirstAssistedPathProviderProps {
+  members: ObjectInputProps['members']
+}
+
+export function FirstAssistedPathProvider(
+  props: PropsWithChildren<FirstAssistedPathProviderProps>
+) {
+  const {members} = props
+
+  const firstAssistedPath = useMemo(() => {
+    const firstAssisted = members.find(
+      (member): member is FieldMember =>
+        member.kind === 'field' && isAssistSupported(member.field.schemaType)
+    )
+    return firstAssisted?.field.path ? pathToString(firstAssisted?.field.path) : undefined
+  }, [members])
+
+  return (
+    <FirstAssistedPathContext.Provider value={firstAssistedPath}>
+      {props.children}
+    </FirstAssistedPathContext.Provider>
+  )
+}

package/src/onboarding/InspectorOnboarding.tsx

@@ -0,0 +1,46 @@
+import {Box, Button, Container, Flex, Stack, Text} from '@sanity/ui'
+import {SparklesIcon} from '@sanity/icons'
+import {releaseAnnouncementUrl} from '../constants'
+import styled from 'styled-components'
+
+const SparklesIllustration = styled(SparklesIcon)({
+  fontSize: '3.125em',
+  '& path': {
+    strokeWidth: `0.6px !important`,
+  },
+})
+
+export function InspectorOnboarding(props: {onDismiss: () => void}) {
+  const {onDismiss} = props
+  return (
+    <Box padding={4}>
+      <Container width={0}>
+        <Stack space={4}>
+          <div style={{textAlign: 'center'}}>
+            <SparklesIllustration />
+          </div>
+          <Text align="center" size={1}>
+            Create reusable AI instructions that can be applied across all documents of a certain
+            type.
+          </Text>
+
+          <Flex align="center" gap={2} justify="center">
+            <Button
+              as="a"
+              href={releaseAnnouncementUrl}
+              rel="noreferrer"
+              target="_blank"
+              fontSize={1}
+              mode="default"
+              onClick={onDismiss}
+              padding={2}
+              text="Learn more"
+              tone="primary"
+            />
+            <Button fontSize={1} mode="bleed" onClick={onDismiss} padding={2} text="Dismiss" />
+          </Flex>
+        </Stack>
+      </Container>
+    </Box>
+  )
+}

package/src/onboarding/onboardingStore.ts

@@ -0,0 +1,33 @@
+import {useCallback, useState} from 'react'
+
+export const inspectorOnboardingKey = 'sanityStudio:assist:inspector:onboarding:dismissed'
+export const fieldOnboardingKey = 'sanityStudio:assist:field:onboarding:dismissed'
+
+export function isFeatureOnboardingDismissed(featureKey: string): boolean {
+  if (typeof localStorage === 'undefined') {
+    return false
+  }
+
+  const value = localStorage.getItem(featureKey)
+  return value === 'true'
+}
+
+export function dismissFeatureOnboarding(featureKey: string) {
+  if (typeof localStorage === 'undefined') {
+    return
+  }
+
+  localStorage.setItem(featureKey, 'true')
+}
+
+export function useOnboardingFeature(featureKey: string) {
+  const [showOnboarding, setShowOnboarding] = useState(
+    () => !isFeatureOnboardingDismissed(featureKey)
+  )
+  const dismissOnboarding = useCallback(() => {
+    setShowOnboarding(false)
+    dismissFeatureOnboarding(featureKey)
+  }, [setShowOnboarding, featureKey])
+
+  return {showOnboarding, dismissOnboarding}
+}