@sanity/assist 1.0.0

package/src/plugin.tsx

@@ -0,0 +1,80 @@
+import {definePlugin, ObjectSchemaType} from 'sanity'
+import {assistInspector} from './assistInspector'
+import {AssistFieldWrapper} from './assistFormComponents/AssistField'
+import {AssistLayout} from './assistLayout/AssistLayout'
+import {AssistFormBlock} from './assistFormComponents/AssistFormBlock'
+import {AssistItem} from './assistFormComponents/AssistItem'
+import {SanityClient} from '@sanity/client'
+import {SafeValueInput} from './components/SafeValueInput'
+import {schemaTypes} from './schemas'
+import {AssistInlineFormBlock} from './assistFormComponents/AssistInlineFormBlock'
+import {assistFieldActions} from './fieldActions/assistFieldActions'
+import {packageName} from './constants'
+import {AssistDocumentInputWrapper} from './assistDocument/AssistDocumentInput'
+import {createAssistDocumentPresence} from './presence/AssistDocumentPresence'
+import {isSchemaAssistEnabled} from './helpers/assistSupported'
+
+export interface AssistPluginConfig {
+  /**
+   * Set this to false to disable model migration from the alpha version of this plugin
+   */
+  alphaMigration?: boolean
+
+  /**
+   * @internal
+   */
+  __customApiClient?: (defaultClient: SanityClient) => SanityClient
+}
+
+export const assist = definePlugin<AssistPluginConfig | void>((config) => {
+  const configWithDefaults = config ?? {}
+  return {
+    name: packageName,
+
+    schema: {
+      types: schemaTypes,
+    },
+
+    document: {
+      inspectors: (prev, context) => {
+        const docSchema = context.schema.get(context.documentType)
+        if (docSchema && isSchemaAssistEnabled(docSchema)) {
+          return [...prev, assistInspector]
+        }
+        return prev
+      },
+      unstable_fieldActions: (prev) => {
+        return [...prev, assistFieldActions]
+      },
+      unstable_languageFilter: (prev, {documentId, schema, schemaType}) => {
+        const docSchema = schema.get(schemaType) as ObjectSchemaType
+        return [...prev, createAssistDocumentPresence(documentId, docSchema)]
+      },
+    },
+
+    studio: {
+      components: {
+        layout: function Layout(props) {
+          return <AssistLayout {...props} config={configWithDefaults} />
+        },
+      },
+    },
+
+    form: {
+      components: {
+        input: AssistDocumentInputWrapper,
+        field: AssistFieldWrapper,
+        item: AssistItem,
+        block: AssistFormBlock,
+        inlineBlock: AssistInlineFormBlock,
+      },
+    },
+
+    plugins: [
+      definePlugin({
+        name: `${packageName}/safe-value-input`,
+        form: {components: {input: SafeValueInput}},
+      })(),
+    ],
+  }
+})

package/src/presence/AiFieldPresence.tsx

@@ -0,0 +1,28 @@
+// eslint-disable-next-line react/no-unused-prop-types
+import {FormNodePresence} from 'sanity'
+import {Card, Flex, Text, Tooltip} from '@sanity/ui'
+import {Delay} from '../components/Delay'
+import {AssistAvatar} from './AssistAvatar'
+
+export function AiFieldPresence(props: {presence: FormNodePresence}) {
+  return (
+    <Card style={{position: 'relative', background: 'transparent'}} contentEditable={false}>
+      <Tooltip
+        placement="left"
+        content={
+          <Card padding={3} border>
+            <Flex align="center">
+              <Text size={1}>Running instruction...</Text>
+            </Flex>
+          </Card>
+        }
+      >
+        <div>
+          <Delay durationMs={200} ms={250}>
+            <AssistAvatar state="active" />
+          </Delay>
+        </div>
+      </Tooltip>
+    </Card>
+  )
+}

package/src/presence/AssistAvatar.tsx

@@ -0,0 +1,96 @@
+import {purple} from '@sanity/color'
+import {SparklesIcon} from '@sanity/icons'
+import {Text} from '@sanity/ui'
+import {CSSProperties, useMemo} from 'react'
+import {useColorSchemeValue} from 'sanity'
+import styled, {keyframes} from 'styled-components'
+
+const Root = styled.span`
+  display: block;
+  width: 25px;
+  height: 25px;
+  position: relative;
+`
+
+const dash = keyframes`
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(43deg);
+  }
+`
+
+const Outline = styled.svg`
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  & > circle {
+    stroke: var(--ai-avatar-stroke-color);
+    stroke-width: 1.5px;
+    stroke-linecap: round;
+    transform-origin: center;
+    animation: ${dash} 500ms ease-in-out infinite;
+    transition: stroke-dasharray 200ms ease-in-out;
+
+    stroke-dasharray: 2.34px 0;
+
+    [data-state='active'] > & {
+      stroke-dasharray: 2px 2.34px;
+    }
+  }
+`
+
+const IconDisc = styled.span`
+  background: var(--ai-avatar-disc-color);
+  color: white;
+  width: 21px;
+  height: 21px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10.5px;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+`
+
+export function AssistAvatar(props: {state?: 'present' | 'active'}) {
+  const {state = 'present'} = props
+  const scheme = useColorSchemeValue()
+
+  const style = useMemo(() => {
+    if (scheme === 'dark') {
+      return {
+        [`--ai-avatar-stroke-color`]: purple[400].hex,
+        [`--ai-avatar-disc-color`]: purple[600].hex,
+      } as CSSProperties
+    }
+
+    return {
+      [`--ai-avatar-stroke-color`]: purple[500].hex,
+      [`--ai-avatar-disc-color`]: purple[600].hex,
+    } as CSSProperties
+  }, [scheme])
+
+  return (
+    <Root data-state={state} style={style}>
+      <Outline
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="12.5" cy="12.5" r="11.75" />
+      </Outline>
+      <IconDisc>
+        <Text as="span" size={0} style={{color: 'inherit'}}>
+          <SparklesIcon />
+        </Text>
+      </IconDisc>
+    </Root>
+  )
+}

package/src/presence/AssistDocumentPresence.tsx

@@ -0,0 +1,58 @@
+import {ObjectSchemaType} from 'sanity'
+import {useMemo} from 'react'
+import {useAssistDocumentContextValue} from '../assistDocument/hooks/useAssistDocumentContextValue'
+import {aiPresence} from './useAssistPresence'
+import {documentRootKey, fieldPresenceTypeName} from '../types'
+import {Card, Flex} from '@sanity/ui'
+import {AiFieldPresence} from './AiFieldPresence'
+
+export function createAssistDocumentPresence(
+  documentId: string | undefined,
+  schemaType: ObjectSchemaType
+) {
+  return function AssistDocumentPresenceWrapper() {
+    return documentId ? (
+      <AssistDocumentPresence documentId={documentId} schemaType={schemaType} />
+    ) : null
+  }
+}
+
+function AssistDocumentPresence(props: {documentId: string; schemaType: ObjectSchemaType}) {
+  const {assistDocument} = useAssistDocumentContextValue(
+    props.documentId,
+    props.schemaType as ObjectSchemaType
+  )
+  const anyPresence = useMemo(() => {
+    const anyPresence = assistDocument?.tasks
+      ?.filter((run) => !run.ended && !run.reason)
+      ?.flatMap((run) => run.presence ?? [])
+      .find((f) => f.started && new Date().getTime() - new Date(f.started).getTime() < 30000)
+    if (anyPresence) {
+      return aiPresence(anyPresence, [])
+    }
+    const anyRun = assistDocument?.tasks
+      ?.filter((run) => !run.ended && !run.reason)
+      ?.find((f) => f.started && new Date().getTime() - new Date(f.started).getTime() < 30000)
+    return anyRun
+      ? aiPresence(
+          {
+            started: anyRun.started,
+            path: documentRootKey,
+            _key: anyRun._key,
+            _type: fieldPresenceTypeName,
+          },
+          []
+        )
+      : undefined
+  }, [assistDocument?.tasks])
+
+  return (
+    <Card>
+      <Flex flex={1} justify="flex-end">
+        <Flex gap={2} align={'center'}>
+          {anyPresence && <AiFieldPresence presence={anyPresence} />}
+        </Flex>
+      </Flex>
+    </Card>
+  )
+}

package/src/presence/useAssistPresence.ts

@@ -0,0 +1,61 @@
+import {useMemo} from 'react'
+import {FormNodePresence, isKeySegment, Path, stringToPath} from 'sanity'
+import {useAssistDocumentContext} from '../assistDocument/AssistDocumentContext'
+import {AiPresence} from '../types'
+import {maxHistoryVisibilityMs, pluginTitle} from '../constants'
+
+const NO_PRESENCE: FormNodePresence[] = []
+
+export function useAssistPresence(path: Path, showFocusWithin?: boolean): FormNodePresence[] {
+  const context = useAssistDocumentContext()
+  const assistDocument = context && 'assistDocument' in context ? context.assistDocument : undefined
+  const tasks = assistDocument?.tasks
+
+  return useMemo(() => {
+    const activePresence = tasks
+      ?.filter((task) => !task.ended)
+      ?.flatMap((task) => task.presence ?? [])
+      ?.filter(
+        (p) =>
+          p.started && new Date().getTime() - new Date(p.started).getTime() < maxHistoryVisibilityMs
+      )
+      .filter((presence) => {
+        if (!presence.path || !path.length) {
+          return false
+        }
+        const statusPath = stringToPath(presence.path)
+
+        if (!showFocusWithin && statusPath.length !== path.length) {
+          return false
+        }
+
+        return path.every((pathSegment, i) => {
+          const statusSegment = statusPath[i]
+          if (typeof pathSegment === 'string') {
+            return pathSegment === statusSegment
+          }
+          if (isKeySegment(pathSegment) && isKeySegment(statusSegment)) {
+            return pathSegment._key === statusSegment._key
+          }
+          return false
+        })
+      })
+    if (!activePresence?.length) {
+      return NO_PRESENCE
+    }
+
+    return activePresence.map((status) => aiPresence(status, path))
+  }, [showFocusWithin, tasks, path])
+}
+
+export function aiPresence(presence: AiPresence, path: Path, title?: string): FormNodePresence {
+  return {
+    user: {
+      id: `sanity-assistant_${presence._key}`,
+      displayName: pluginTitle,
+    },
+    path: path,
+    sessionId: 'not-available',
+    lastActiveAt: presence?.started ?? new Date().toISOString(),
+  }
+}