@basementstudio/sanity-ai-image-plugin 0.0.0 → 0.1.0

package/src/studio/settings/tool.tsx

@@ -1,587 +0,0 @@
-"use client"
-
-import {
-  Box,
-  Button,
-  Card,
-  Flex,
-  Grid,
-  Select,
-  Stack,
-  Text,
-  TextArea,
-} from "@sanity/ui"
-import { type ChangeEvent, useEffect, useMemo, useState } from "react"
-import { useClient } from "sanity"
-import {
-  getDefaultAllowedAiImageModel,
-  getSupportedAiImageModelOptions,
-  type SupportedAiImageModelId,
-} from "../../utils/models"
-import {
-  MAX_REFERENCE_IMAGES,
-  SETTINGS_DOCUMENT_ID,
-  SETTINGS_SCHEMA_TYPE,
-  type ResolvedOptions,
-} from "../../utils/shared"
-import {
-  appendReferenceImages,
-  createImageReferenceValue,
-  createToolReferenceImageFromStoredImage,
-  fetchSettingsDocument,
-  getErrorMessage,
-  resolveSettingsModel,
-  type ToolReferenceImage,
-} from "../settings-data"
-import { convertImageFileToPng, formatFileSize } from "../files"
-
-type TargetEditorState = {
-  prompt: string
-  referenceImages: ToolReferenceImage[]
-}
-
-function SettingsReferenceImageCard({
-  image,
-  onRemove,
-}: {
-  image: ToolReferenceImage
-  onRemove: (imageId: string) => void
-}) {
-  const [localPreviewUrl, setLocalPreviewUrl] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (image.previewUrl || !image.sourceFile) {
-      setLocalPreviewUrl(null)
-      return
-    }
-
-    const objectUrl = URL.createObjectURL(image.sourceFile)
-    setLocalPreviewUrl(objectUrl)
-
-    return () => {
-      URL.revokeObjectURL(objectUrl)
-    }
-  }, [image.previewUrl, image.sourceFile])
-
-  const previewUrl = image.previewUrl || localPreviewUrl
-
-  return (
-    <Card padding={3} radius={2} tone="transparent">
-      <Flex align="center" gap={3} justify="space-between">
-        <Flex align="center" flex={1} gap={3}>
-          <Card
-            overflow="hidden"
-            radius={2}
-            style={{ flexShrink: 0, height: 128, width: 128 }}
-            tone="default"
-          >
-            {previewUrl ? (
-              <img
-                alt={image.name}
-                src={previewUrl}
-                style={{
-                  display: "block",
-                  height: "100%",
-                  objectFit: "cover",
-                  width: "100%",
-                }}
-              />
-            ) : (
-              <Flex align="center" justify="center" style={{ height: "100%" }}>
-                <Text muted size={1}>
-                  No preview
-                </Text>
-              </Flex>
-            )}
-          </Card>
-
-          <Box flex={1}>
-            <Text size={1} weight="medium">
-              {image.name}
-            </Text>
-            <Text muted size={1}>
-              {image.sourceFile
-                ? formatFileSize(image.sourceFile.size)
-                : "Stored in Sanity"}
-            </Text>
-          </Box>
-        </Flex>
-
-        <Button mode="bleed" onClick={() => onRemove(image.id)} text="Remove" />
-      </Flex>
-    </Card>
-  )
-}
-
-function buildDefaultTargetState(
-  options: ResolvedOptions
-): Record<string, TargetEditorState> {
-  return Object.fromEntries(
-    [
-      ...(options.assetSourceTarget ? [options.assetSourceTarget] : []),
-      ...options.targets,
-    ].map((target) => [
-      target.id,
-      {
-        prompt: "",
-        referenceImages: [],
-      },
-    ])
-  )
-}
-
-function SettingsReferenceImagesEditor({
-  images,
-  label,
-  onAdd,
-  onRemove,
-}: {
-  images: ToolReferenceImage[]
-  label: string
-  onAdd: (files: File[]) => void
-  onRemove: (imageId: string) => void
-}) {
-  return (
-    <Stack space={3}>
-      <Stack space={1}>
-        <Text size={1} weight="medium">
-          {label}
-        </Text>
-        <Text muted size={1}>
-          Up to {MAX_REFERENCE_IMAGES} images.
-        </Text>
-      </Stack>
-      <input
-        accept="image/*"
-        multiple
-        onChange={(event) => {
-          const files = Array.from(event.currentTarget.files || [])
-
-          if (files.length > 0) {
-            onAdd(files)
-          }
-
-          event.currentTarget.value = ""
-        }}
-        type="file"
-      />
-
-      {images.length > 0 ? (
-        <Stack space={2}>
-          {images.map((image) => (
-            <SettingsReferenceImageCard
-              image={image}
-              key={image.id}
-              onRemove={onRemove}
-            />
-          ))}
-        </Stack>
-      ) : (
-        <Text muted size={1}>
-          No reference images yet.
-        </Text>
-      )}
-    </Stack>
-  )
-}
-
-export function createSettingsTool(options: ResolvedOptions) {
-  return function SettingsTool() {
-    const client = useClient({ apiVersion: options.apiVersion })
-    const [isLoading, setIsLoading] = useState(true)
-    const [isSaving, setIsSaving] = useState(false)
-    const [saveMessage, setSaveMessage] = useState<string | null>(null)
-    const [error, setError] = useState<string | null>(null)
-    const [globalModel, setGlobalModel] = useState<SupportedAiImageModelId>(
-      getDefaultAllowedAiImageModel(options.allowedModels)
-    )
-    const [globalPrompt, setGlobalPrompt] = useState("")
-    const [globalReferenceImages, setGlobalReferenceImages] = useState<
-      ToolReferenceImage[]
-    >([])
-    const [targetState, setTargetState] = useState<
-      Record<string, TargetEditorState>
-    >(() => buildDefaultTargetState(options))
-
-    useEffect(() => {
-      let isMounted = true
-
-      async function loadSettings() {
-        try {
-          const settings = await fetchSettingsDocument(
-            client,
-            SETTINGS_DOCUMENT_ID,
-            SETTINGS_SCHEMA_TYPE
-          )
-
-          if (!isMounted) {
-            return
-          }
-
-          setGlobalModel(
-            resolveSettingsModel({
-              allowedModels: options.allowedModels,
-              settings,
-            })
-          )
-          setGlobalPrompt(settings?.globalPrompt || "")
-          setGlobalReferenceImages(
-            (settings?.globalReferenceImages || [])
-              .map(createToolReferenceImageFromStoredImage)
-              .filter((image): image is ToolReferenceImage => image !== null)
-          )
-          setTargetState((currentState) => {
-            const nextState = buildDefaultTargetState(options)
-
-            for (const [targetId, state] of Object.entries(currentState)) {
-              nextState[targetId] = state
-            }
-
-            for (const targetConfig of settings?.targetConfigs || []) {
-              if (!targetConfig.targetId || !nextState[targetConfig.targetId]) {
-                continue
-              }
-
-              nextState[targetConfig.targetId] = {
-                prompt: targetConfig.prompt || "",
-                referenceImages: (targetConfig.referenceImages || [])
-                  .map(createToolReferenceImageFromStoredImage)
-                  .filter((image): image is ToolReferenceImage => image !== null),
-              }
-            }
-
-            return nextState
-          })
-        } catch (nextError) {
-          if (!isMounted) {
-            return
-          }
-
-          setError(
-            getErrorMessage(nextError, "Unable to load AI Image Plugin settings.")
-          )
-        } finally {
-          if (isMounted) {
-            setIsLoading(false)
-          }
-        }
-      }
-
-      void loadSettings()
-
-      return () => {
-        isMounted = false
-      }
-    }, [client, options])
-
-    const allTargets = useMemo(
-      () => [
-        ...(options.assetSourceTarget ? [options.assetSourceTarget] : []),
-        ...options.targets,
-      ],
-      [options]
-    )
-    const allowedModelOptions = useMemo(
-      () => getSupportedAiImageModelOptions(options.allowedModels),
-      [options.allowedModels]
-    )
-
-    async function uploadReferenceImages(
-      images: ToolReferenceImage[]
-    ): Promise<ToolReferenceImage[]> {
-      return Promise.all(
-        images.map(async (image) => {
-          if (image.assetId || !image.sourceFile) {
-            return image
-          }
-
-          const normalizedFile = await convertImageFileToPng(image.sourceFile)
-          const uploadedAsset = await client.assets.upload("image", normalizedFile, {
-            filename: normalizedFile.name,
-          })
-
-          return {
-            id: uploadedAsset._id,
-            assetId: uploadedAsset._id,
-            name: uploadedAsset.originalFilename || normalizedFile.name,
-            previewUrl: uploadedAsset.url,
-          }
-        })
-      )
-    }
-
-    async function handleSave() {
-      setError(null)
-      setSaveMessage(null)
-      setIsSaving(true)
-
-      try {
-        const uploadedGlobalReferenceImages = await uploadReferenceImages(
-          globalReferenceImages
-        )
-        const uploadedTargets = await Promise.all(
-          allTargets.map(async (target) => {
-            const currentTargetState = targetState[target.id] || {
-              prompt: "",
-              referenceImages: [],
-            }
-            const uploadedReferenceImages = await uploadReferenceImages(
-              currentTargetState.referenceImages
-            )
-
-            return {
-              targetId: target.id,
-              prompt: currentTargetState.prompt.trim() || undefined,
-              referenceImages: uploadedReferenceImages
-                .filter((image) => image.assetId)
-                .map((image) => createImageReferenceValue(image.assetId!)),
-              uploadedReferenceImages,
-            }
-          })
-        )
-
-        await client.createOrReplace({
-          _id: SETTINGS_DOCUMENT_ID,
-          _type: SETTINGS_SCHEMA_TYPE,
-          title: "AI Image Plugin Settings",
-          globalModel,
-          globalPrompt: globalPrompt.trim() || undefined,
-          globalReferenceImages: uploadedGlobalReferenceImages
-            .filter((image) => image.assetId)
-            .map((image) => createImageReferenceValue(image.assetId!)),
-          targetConfigs: uploadedTargets.map((target) => ({
-            _type: "object",
-            targetId: target.targetId,
-            prompt: target.prompt,
-            referenceImages: target.referenceImages,
-          })),
-        })
-
-        setGlobalReferenceImages(uploadedGlobalReferenceImages)
-        setTargetState((currentState) =>
-          Object.fromEntries(
-            Object.entries(currentState).map(([targetId, state]) => {
-              const uploadedTarget = uploadedTargets.find(
-                (target) => target.targetId === targetId
-              )
-
-              if (!uploadedTarget) {
-                return [targetId, state]
-              }
-
-              return [
-                targetId,
-                {
-                  ...state,
-                  referenceImages: uploadedTarget.uploadedReferenceImages,
-                },
-              ]
-            })
-          )
-        )
-        setSaveMessage("Saved AI Image Plugin settings.")
-      } catch (nextError) {
-        setError(
-          getErrorMessage(nextError, "Unable to save AI Image Plugin settings.")
-        )
-      } finally {
-        setIsSaving(false)
-      }
-    }
-
-    if (isLoading) {
-      return (
-        <Box padding={4}>
-          <Text>Loading AI Image Plugin settings...</Text>
-        </Box>
-      )
-    }
-
-    return (
-      <Box padding={4}>
-        <Stack space={4}>
-          <Card padding={4} radius={2} tone="primary">
-            <Stack space={3}>
-              <Text size={3} weight="semibold">
-                AI Image Plugin
-              </Text>
-              <Text size={1}>
-                Configure reusable prompts and reference images for every AI image
-                generation entry point without wiring extra schema or structure
-                files into each project.
-              </Text>
-            </Stack>
-          </Card>
-
-          <Card padding={4} radius={2}>
-            <Stack space={4}>
-              <Text size={2} weight="semibold">
-                Global Defaults
-              </Text>
-
-              <Box>
-                <Text size={1} weight="medium">
-                  Default model
-                </Text>
-                <Box marginTop={2}>
-                  <Select
-                    onChange={(event) =>
-                      setGlobalModel(
-                        event.currentTarget.value as SupportedAiImageModelId
-                      )
-                    }
-                    value={globalModel}
-                  >
-                    {allowedModelOptions.map((modelOption) => (
-                      <option key={modelOption.value} value={modelOption.value}>
-                        {modelOption.title}
-                      </option>
-                    ))}
-                  </Select>
-                </Box>
-              </Box>
-
-              <Box>
-                <Text size={1} weight="medium">
-                  Global prompt
-                </Text>
-                <Box marginTop={2}>
-                  <TextArea
-                    onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-                      setGlobalPrompt(event.currentTarget.value)
-                    }
-                    placeholder="High-level prompt instructions that should apply to every generation."
-                    rows={8}
-                    value={globalPrompt}
-                  />
-                </Box>
-              </Box>
-
-              <SettingsReferenceImagesEditor
-                images={globalReferenceImages}
-                label="Global reference images"
-                onAdd={(files) =>
-                  setGlobalReferenceImages((currentImages) =>
-                    appendReferenceImages(currentImages, files)
-                  )
-                }
-                onRemove={(imageId) =>
-                  setGlobalReferenceImages((currentImages) =>
-                    currentImages.filter((image) => image.id !== imageId)
-                  )
-                }
-              />
-            </Stack>
-          </Card>
-
-          <Grid columns={[1, 1, 2]} gap={4}>
-            {allTargets.map((target) => {
-              const state = targetState[target.id] || {
-                prompt: "",
-                referenceImages: [],
-              }
-
-              return (
-                <Card key={target.id} padding={4} radius={2}>
-                  <Stack space={4}>
-                    <Stack space={2}>
-                      <Text size={2} weight="semibold">
-                        {target.title || target.id}
-                      </Text>
-                      <Text muted size={1}>
-                        {"fieldPath" in target
-                          ? `${target.documentType}.${target.fieldPath}`
-                          : "Shared asset picker configuration"}
-                      </Text>
-                      {"fieldPath" in target &&
-                      target.suggestedContextFieldPaths?.length ? (
-                        <Text muted size={1}>
-                          Suggested tags:{" "}
-                          {target.suggestedContextFieldPaths.join(", ")}
-                        </Text>
-                      ) : null}
-                      {target.description ? (
-                        <Text size={1}>{target.description}</Text>
-                      ) : null}
-                    </Stack>
-
-                    <Box>
-                      <Text size={1} weight="medium">
-                        Target prompt
-                      </Text>
-                      <Box marginTop={2}>
-                        <TextArea
-                          onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-                            setTargetState((currentState) => ({
-                              ...currentState,
-                              [target.id]: {
-                                ...state,
-                                prompt: event.currentTarget.value,
-                              },
-                            }))
-                          }
-                          placeholder="Optional prompt layered on top of the global defaults for this specific target."
-                          rows={6}
-                          value={state.prompt}
-                        />
-                      </Box>
-                    </Box>
-
-                    <SettingsReferenceImagesEditor
-                      images={state.referenceImages}
-                      label="Target reference images"
-                      onAdd={(files) =>
-                        setTargetState((currentState) => ({
-                          ...currentState,
-                          [target.id]: {
-                            ...state,
-                            referenceImages: appendReferenceImages(
-                              state.referenceImages,
-                              files
-                            ),
-                          },
-                        }))
-                      }
-                      onRemove={(imageId) =>
-                        setTargetState((currentState) => ({
-                          ...currentState,
-                          [target.id]: {
-                            ...state,
-                            referenceImages: state.referenceImages.filter(
-                              (image) => image.id !== imageId
-                            ),
-                          },
-                        }))
-                      }
-                    />
-                  </Stack>
-                </Card>
-              )
-            })}
-          </Grid>
-
-          {error ? (
-            <Card padding={3} radius={2} tone="critical">
-              <Text size={1}>{error}</Text>
-            </Card>
-          ) : null}
-
-          {saveMessage ? (
-            <Card padding={3} radius={2} tone="positive">
-              <Text size={1}>{saveMessage}</Text>
-            </Card>
-          ) : null}
-
-          <Flex justify="flex-end">
-            <Button
-              disabled={isSaving}
-              onClick={() => void handleSave()}
-              text={isSaving ? "Saving..." : "Save settings"}
-              tone="primary"
-            />
-          </Flex>
-        </Stack>
-      </Box>
-    )
-  }
-}