@ai-stack/payloadcms 3.2.9-beta → 3.2.11-beta

package/dist/endpoints/index.js

@@ -1,8 +1,11 @@
+import * as process from 'node:process';
 import { defaultPrompts } from '../ai/prompts.js';
+import { filterEditorSchemaByNodes } from '../ai/utils/filterEditorSchemaByNodes.js';
 import { PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../defaults.js';
 import { registerEditorHelper } from '../libraries/handlebars/helpers.js';
 import { handlebarsHelpersMap } from '../libraries/handlebars/helpersMap.js';
 import { replacePlaceholders } from '../libraries/handlebars/replacePlaceholders.js';
+import { extractImageData } from '../utilities/extractImageData.js';
 import { getGenerationModels } from '../utilities/getGenerationModels.js';
 const assignPrompt = async (action, { type, actionParams, context, field, layout, systemPrompt = '', template })=>{
     const prompt = await replacePlaceholders(template, context);
@@ -38,7 +41,7 @@ export const endpoints = (pluginConfig)=>({
             //TODO:  This is the main endpoint for generating content - its just needs to be renamed to 'generate' or something.
             handler: async (req)=>{
                 const data = await req.json?.();
-                const { locale = 'en', options } = data;
+                const { allowedEditorNodes = [], locale = 'en', options } = data;
                 const { action, actionParams, instructionId } = options;
                 const contextData = data.doc;
                 if (!instructionId) {
@@ -53,6 +56,10 @@ export const endpoints = (pluginConfig)=>({
                 const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection.admin;
                 const { schema: editorSchema = {} } = editorConfig;
                 const { prompt: promptTemplate = '' } = instructions;
+                let allowedEditorSchema = editorSchema;
+                if (allowedEditorNodes.length) {
+                    allowedEditorSchema = filterEditorSchemaByNodes(editorSchema, allowedEditorNodes);
+                }
                 const schemaPath = instructions['schema-path'];
                 const fieldName = schemaPath?.split('.').pop();
                 registerEditorHelper(req.payload, schemaPath);
@@ -73,19 +80,20 @@ export const endpoints = (pluginConfig)=>({
                     systemPrompt: instructions.system,
                     template: promptTemplate
                 });
-                // console.log('Running handler with prompts:', prompts)
-                return model.handler?.(prompts.prompt, {
-                    ...modelOptions,
-                    editorSchema,
-                    layout: prompts.layout,
-                    locale: localeInfo,
-                    system: prompts.system
-                }).catch((error)=>{
-                    console.error('Error: endpoint - generating text:', error);
+                try {
+                    return model.handler?.(prompts.prompt, {
+                        ...modelOptions,
+                        editorSchema: allowedEditorSchema,
+                        layout: prompts.layout,
+                        locale: localeInfo,
+                        system: prompts.system
+                    });
+                } catch (error) {
+                    req.payload.logger.error('Error generating content: ', error);
                     return new Response(JSON.stringify(error.message), {
                         status: 500
                     });
-                });
+                }
             },
             method: 'post',
             path: PLUGIN_API_ENDPOINT_GENERATE
@@ -93,10 +101,19 @@ export const endpoints = (pluginConfig)=>({
         upload: {
             handler: async (req)=>{
                 const data = await req.json?.();
-                const { options } = data;
+                const { collectionSlug, documentId, options } = data;
                 const { instructionId } = options;
-                const contextData = data.doc;
+                const docData = await req.payload.findByID({
+                    id: documentId,
+                    collection: collectionSlug,
+                    draft: true
+                });
+                const contextData = {
+                    ...data.doc,
+                    ...docData
+                };
                 let instructions = {
+                    images: [],
                     'model-id': '',
                     prompt: ''
                 };
@@ -107,15 +124,48 @@ export const endpoints = (pluginConfig)=>({
                         collection: PLUGIN_INSTRUCTIONS_TABLE
                     });
                 }
-                const { prompt: promptTemplate = '' } = instructions;
+                const { images: sampleImages = [], prompt: promptTemplate = '' } = instructions;
                 const schemaPath = instructions['schema-path'];
                 registerEditorHelper(req.payload, schemaPath);
                 const text = await replacePlaceholders(promptTemplate, contextData);
                 const modelId = instructions['model-id'];
                 const uploadCollectionSlug = instructions['relation-to'];
+                const images = [
+                    ...extractImageData(text),
+                    ...sampleImages
+                ];
+                const editImages = [];
+                for (const img of images){
+                    try {
+                        const serverURL = req.payload.config?.serverURL || process.env.SERVER_URL || process.env.NEXT_PUBLIC_SERVER_URL;
+                        const response = await fetch(`${serverURL}${img.image.url}`, {
+                            headers: {
+                                //TODO: Further testing needed or so find a proper way.
+                                Authorization: `Bearer ${req.headers.get('Authorization')?.split('Bearer ')[1] || ''}`
+                            },
+                            method: 'GET'
+                        });
+                        const blob = await response.blob();
+                        editImages.push({
+                            name: img.image.name,
+                            type: img.image.type,
+                            data: blob,
+                            size: blob.size,
+                            url: `${serverURL}${img.image.url}`
+                        });
+                    } catch (e) {
+                        req.payload.logger.error('Error fetching reference images!');
+                        console.error(e);
+                        throw Error("We couldn't fetch the images. Please ensure the images are accessible and hosted publicly.");
+                    }
+                }
                 const model = getGenerationModels(pluginConfig).find((model)=>model.id === modelId);
                 const settingsName = model.settings?.name;
-                const modelOptions = instructions[settingsName] || {};
+                let modelOptions = instructions[settingsName] || {};
+                modelOptions = {
+                    ...modelOptions,
+                    images: editImages
+                };
                 const result = await model.handler?.(text, modelOptions);
                 const assetData = await req.payload.create({
                     collection: uploadCollectionSlug,

package/dist/endpoints/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/endpoints/index.ts"],"sourcesContent":["import type { PayloadRequest } from 'payload'\n\nimport type { ActionMenuItems, Endpoints, PluginConfig } from '../types.js'\n\nimport { defaultPrompts } from '../ai/prompts.js'\nimport {\n  PLUGIN_API_ENDPOINT_GENERATE,\n  PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n  PLUGIN_INSTRUCTIONS_TABLE,\n  PLUGIN_NAME,\n} from '../defaults.js'\nimport { registerEditorHelper } from '../libraries/handlebars/helpers.js'\nimport { handlebarsHelpersMap } from '../libraries/handlebars/helpersMap.js'\nimport { replacePlaceholders } from '../libraries/handlebars/replacePlaceholders.js'\nimport { getGenerationModels } from '../utilities/getGenerationModels.js'\n\nconst assignPrompt = async (\n  action: ActionMenuItems,\n  {\n    type,\n    actionParams,\n    context,\n    field,\n    layout,\n    systemPrompt = '',\n    template,\n  }: {\n    actionParams: Record<any, any>\n    context: object\n    field: string\n    layout: string\n    systemPrompt: string\n    template: string\n    type: string\n  },\n) => {\n  const prompt = await replacePlaceholders(template, context)\n  const toLexicalHTML = type === 'richText' ? handlebarsHelpersMap.toHTML.name : ''\n\n  const assignedPrompts = {\n    layout: type === 'richText' ? layout : undefined,\n    prompt,\n    //TODO: Define only once on a collection level\n    system: type === 'richText' ? systemPrompt : undefined,\n  }\n\n  if (action === 'Compose') {\n    return assignedPrompts\n  }\n\n  const { layout: getLayout, system: getSystemPrompt } = defaultPrompts.find(\n    (p) => p.name === action,\n  )\n\n  let updatedLayout = layout\n  if (getLayout) {\n    updatedLayout = getLayout()\n  }\n\n  const system = getSystemPrompt({\n    ...(actionParams || {}),\n    prompt,\n    systemPrompt,\n  })\n\n  return {\n    layout: updatedLayout,\n    // TODO: revisit this toLexicalHTML\n    prompt: await replacePlaceholders(`{{${toLexicalHTML} ${field}}}`, context),\n    system,\n  }\n}\n\nexport const endpoints: (pluginConfig: PluginConfig) => Endpoints = (pluginConfig) =>\n  ({\n    textarea: {\n      //TODO:  This is the main endpoint for generating content - its just needs to be renamed to 'generate' or something.\n      handler: async (req: PayloadRequest) => {\n        const data = await req.json?.()\n\n        const { locale = 'en', options } = data\n        const { action, actionParams, instructionId } = options\n        const contextData = data.doc\n\n        if (!instructionId) {\n          throw new Error(\n            `Instruction ID is required for \"${PLUGIN_NAME}\" to work, please check your configuration`,\n          )\n        }\n\n        const instructions = await req.payload.findByID({\n          id: instructionId,\n          collection: PLUGIN_INSTRUCTIONS_TABLE,\n        })\n\n        const { collections } = req.payload.config\n        const collection = collections.find(\n          (collection) => collection.slug === PLUGIN_INSTRUCTIONS_TABLE,\n        )\n\n        const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection.admin\n        const { schema: editorSchema = {} } = editorConfig\n        const { prompt: promptTemplate = '' } = instructions\n\n        const schemaPath = instructions['schema-path'] as string\n        const fieldName = schemaPath?.split('.').pop()\n\n        registerEditorHelper(req.payload, schemaPath)\n\n        const { defaultLocale, locales = [] } = req.payload.config.localization || {}\n        const localeData = locales.find((l) => {\n          return l.code === locale\n        })\n\n        const localeInfo = localeData?.label[defaultLocale] || locale\n\n        const model = getGenerationModels(pluginConfig)\n          .find((model) => model.id === instructions['model-id'])\n        const settingsName = model.settings?.name\n        const modelOptions = instructions[settingsName] || {}\n\n        const prompts = await assignPrompt(action, {\n          type: instructions['field-type'] as string,\n          actionParams,\n          context: contextData,\n          field: fieldName,\n          layout: instructions.layout,\n          systemPrompt: instructions.system,\n          template: promptTemplate as string,\n        })\n\n        // console.log('Running handler with prompts:', prompts)\n        return model\n          .handler?.(prompts.prompt, {\n            ...modelOptions,\n            editorSchema,\n            layout: prompts.layout,\n            locale: localeInfo,\n            system: prompts.system,\n          })\n          .catch((error) => {\n            console.error('Error: endpoint - generating text:', error)\n            return new Response(JSON.stringify(error.message), { status: 500 })\n          })\n      },\n      method: 'post',\n      path: PLUGIN_API_ENDPOINT_GENERATE,\n    },\n    upload: {\n      handler: async (req: PayloadRequest) => {\n        const data = await req.json?.()\n\n        const { options } = data\n        const { instructionId } = options\n        const contextData = data.doc\n\n        let instructions = { 'model-id': '', prompt: '' }\n\n        if (instructionId) {\n          // @ts-expect-error\n          instructions = await req.payload.findByID({\n            id: instructionId,\n            collection: PLUGIN_INSTRUCTIONS_TABLE,\n          })\n        }\n\n        const { prompt: promptTemplate = '' } = instructions\n        const schemaPath = instructions['schema-path']\n\n        registerEditorHelper(req.payload, schemaPath)\n\n        const text = await replacePlaceholders(promptTemplate, contextData)\n        const modelId = instructions['model-id']\n        const uploadCollectionSlug = instructions['relation-to']\n\n        const model = getGenerationModels(pluginConfig)\n          .find((model) => model.id === modelId)\n        const settingsName = model.settings?.name\n        const modelOptions = instructions[settingsName] || {}\n\n        const result = await model.handler?.(text, modelOptions)\n\n        const assetData = await req.payload.create({\n          collection: uploadCollectionSlug,\n          data: result.data,\n          file: result.file,\n        })\n\n        return new Response(\n          JSON.stringify({\n            result: {\n              id: assetData.id,\n              alt: assetData.alt,\n            },\n          }),\n        )\n      },\n      method: 'post',\n      path: PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n    },\n  }) satisfies Endpoints\n"],"names":["defaultPrompts","PLUGIN_API_ENDPOINT_GENERATE","PLUGIN_API_ENDPOINT_GENERATE_UPLOAD","PLUGIN_INSTRUCTIONS_TABLE","PLUGIN_NAME","registerEditorHelper","handlebarsHelpersMap","replacePlaceholders","getGenerationModels","assignPrompt","action","type","actionParams","context","field","layout","systemPrompt","template","prompt","toLexicalHTML","toHTML","name","assignedPrompts","undefined","system","getLayout","getSystemPrompt","find","p","updatedLayout","endpoints","pluginConfig","textarea","handler","req","data","json","locale","options","instructionId","contextData","doc","Error","instructions","payload","findByID","id","collection","collections","config","slug","custom","editorConfig","admin","schema","editorSchema","promptTemplate","schemaPath","fieldName","split","pop","defaultLocale","locales","localization","localeData","l","code","localeInfo","label","model","settingsName","settings","modelOptions","prompts","catch","error","console","Response","JSON","stringify","message","status","method","path","upload","text","modelId","uploadCollectionSlug","result","assetData","create","file","alt"],"mappings":"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"}
+{"version":3,"sources":["../../src/endpoints/index.ts"],"sourcesContent":["import type { PayloadRequest } from 'payload'\n\nimport * as process from 'node:process'\n\nimport type { ActionMenuItems, Endpoints, PluginConfig } from '../types.js'\n\nimport { defaultPrompts } from '../ai/prompts.js'\nimport { filterEditorSchemaByNodes } from '../ai/utils/filterEditorSchemaByNodes.js'\nimport {\n  PLUGIN_API_ENDPOINT_GENERATE,\n  PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n  PLUGIN_INSTRUCTIONS_TABLE,\n  PLUGIN_NAME,\n} from '../defaults.js'\nimport { registerEditorHelper } from '../libraries/handlebars/helpers.js'\nimport { handlebarsHelpersMap } from '../libraries/handlebars/helpersMap.js'\nimport { replacePlaceholders } from '../libraries/handlebars/replacePlaceholders.js'\nimport { extractImageData } from '../utilities/extractImageData.js'\nimport { getGenerationModels } from '../utilities/getGenerationModels.js'\n\nconst assignPrompt = async (\n  action: ActionMenuItems,\n  {\n    type,\n    actionParams,\n    context,\n    field,\n    layout,\n    systemPrompt = '',\n    template,\n  }: {\n    actionParams: Record<any, any>\n    context: object\n    field: string\n    layout: string\n    systemPrompt: string\n    template: string\n    type: string\n  },\n) => {\n  const prompt = await replacePlaceholders(template, context)\n  const toLexicalHTML = type === 'richText' ? handlebarsHelpersMap.toHTML.name : ''\n\n  const assignedPrompts = {\n    layout: type === 'richText' ? layout : undefined,\n    prompt,\n    //TODO: Define only once on a collection level\n    system: type === 'richText' ? systemPrompt : undefined,\n  }\n\n  if (action === 'Compose') {\n    return assignedPrompts\n  }\n\n  const { layout: getLayout, system: getSystemPrompt } = defaultPrompts.find(\n    (p) => p.name === action,\n  )\n\n  let updatedLayout = layout\n  if (getLayout) {\n    updatedLayout = getLayout()\n  }\n\n  const system = getSystemPrompt({\n    ...(actionParams || {}),\n    prompt,\n    systemPrompt,\n  })\n\n  return {\n    layout: updatedLayout,\n    // TODO: revisit this toLexicalHTML\n    prompt: await replacePlaceholders(`{{${toLexicalHTML} ${field}}}`, context),\n    system,\n  }\n}\n\nexport const endpoints: (pluginConfig: PluginConfig) => Endpoints = (pluginConfig) =>\n  ({\n    textarea: {\n      //TODO:  This is the main endpoint for generating content - its just needs to be renamed to 'generate' or something.\n      handler: async (req: PayloadRequest) => {\n        const data = await req.json?.()\n\n        const { allowedEditorNodes = [], locale = 'en', options } = data\n        const { action, actionParams, instructionId } = options\n        const contextData = data.doc\n\n        if (!instructionId) {\n          throw new Error(\n            `Instruction ID is required for \"${PLUGIN_NAME}\" to work, please check your configuration`,\n          )\n        }\n\n        const instructions = await req.payload.findByID({\n          id: instructionId,\n          collection: PLUGIN_INSTRUCTIONS_TABLE,\n        })\n\n        const { collections } = req.payload.config\n        const collection = collections.find(\n          (collection) => collection.slug === PLUGIN_INSTRUCTIONS_TABLE,\n        )\n\n        const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection.admin\n        const { schema: editorSchema = {} } = editorConfig\n        const { prompt: promptTemplate = '' } = instructions\n\n        let allowedEditorSchema = editorSchema\n        if (allowedEditorNodes.length) {\n          allowedEditorSchema = filterEditorSchemaByNodes(editorSchema, allowedEditorNodes)\n        }\n\n        const schemaPath = instructions['schema-path'] as string\n        const fieldName = schemaPath?.split('.').pop()\n\n        registerEditorHelper(req.payload, schemaPath)\n\n        const { defaultLocale, locales = [] } = req.payload.config.localization || {}\n        const localeData = locales.find((l) => {\n          return l.code === locale\n        })\n\n        const localeInfo = localeData?.label[defaultLocale] || locale\n\n        const model = getGenerationModels(pluginConfig).find(\n          (model) => model.id === instructions['model-id'],\n        )\n        const settingsName = model.settings?.name\n        const modelOptions = instructions[settingsName] || {}\n\n        const prompts = await assignPrompt(action, {\n          type: instructions['field-type'] as string,\n          actionParams,\n          context: contextData,\n          field: fieldName,\n          layout: instructions.layout,\n          systemPrompt: instructions.system,\n          template: promptTemplate as string,\n        })\n\n        try {\n          return model.handler?.(prompts.prompt, {\n            ...modelOptions,\n            editorSchema: allowedEditorSchema,\n            layout: prompts.layout,\n            locale: localeInfo,\n            system: prompts.system,\n          })\n        } catch (error) {\n          req.payload.logger.error('Error generating content: ', error)\n          return new Response(JSON.stringify(error.message), { status: 500 })\n        }\n      },\n      method: 'post',\n      path: PLUGIN_API_ENDPOINT_GENERATE,\n    },\n    upload: {\n      handler: async (req: PayloadRequest) => {\n        const data = await req.json?.()\n\n        const { collectionSlug, documentId, options } = data\n        const { instructionId } = options\n\n        const docData = await req.payload.findByID({\n          id: documentId,\n          collection: collectionSlug,\n          draft: true,\n        })\n        const contextData = {\n          ...data.doc,\n          ...docData,\n        }\n\n        let instructions = { images: [], 'model-id': '', prompt: '' }\n\n        if (instructionId) {\n          // @ts-expect-error\n          instructions = await req.payload.findByID({\n            id: instructionId,\n            collection: PLUGIN_INSTRUCTIONS_TABLE,\n          })\n        }\n\n        const { images: sampleImages = [], prompt: promptTemplate = '' } = instructions\n        const schemaPath = instructions['schema-path']\n\n        registerEditorHelper(req.payload, schemaPath)\n\n        const text = await replacePlaceholders(promptTemplate, contextData)\n        const modelId = instructions['model-id']\n        const uploadCollectionSlug = instructions['relation-to']\n\n        const images = [...extractImageData(text), ...sampleImages]\n\n        const editImages = []\n        for (const img of images) {\n          try {\n            const serverURL =\n              req.payload.config?.serverURL ||\n              process.env.SERVER_URL ||\n              process.env.NEXT_PUBLIC_SERVER_URL\n\n            const response = await fetch(`${serverURL}${img.image.url}`, {\n              headers: {\n                //TODO: Further testing needed or so find a proper way.\n                Authorization: `Bearer ${req.headers.get('Authorization')?.split('Bearer ')[1] || ''}`,\n              },\n              method: 'GET',\n            })\n\n            const blob = await response.blob()\n            editImages.push({\n              name: img.image.name,\n              type: img.image.type,\n              data: blob,\n              size: blob.size,\n              url: `${serverURL}${img.image.url}`,\n            })\n          } catch (e) {\n            req.payload.logger.error('Error fetching reference images!')\n            console.error(e)\n            throw Error(\n              \"We couldn't fetch the images. Please ensure the images are accessible and hosted publicly.\",\n            )\n          }\n        }\n\n        const model = getGenerationModels(pluginConfig).find((model) => model.id === modelId)\n        const settingsName = model.settings?.name\n        let modelOptions = instructions[settingsName] || {}\n        modelOptions = {\n          ...modelOptions,\n          images: editImages,\n        }\n\n        const result = await model.handler?.(text, modelOptions)\n\n        const assetData = await req.payload.create({\n          collection: uploadCollectionSlug,\n          data: result.data,\n          file: result.file,\n        })\n\n        return new Response(\n          JSON.stringify({\n            result: {\n              id: assetData.id,\n              alt: assetData.alt,\n            },\n          }),\n        )\n      },\n      method: 'post',\n      path: PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n    },\n  }) satisfies Endpoints\n"],"names":["process","defaultPrompts","filterEditorSchemaByNodes","PLUGIN_API_ENDPOINT_GENERATE","PLUGIN_API_ENDPOINT_GENERATE_UPLOAD","PLUGIN_INSTRUCTIONS_TABLE","PLUGIN_NAME","registerEditorHelper","handlebarsHelpersMap","replacePlaceholders","extractImageData","getGenerationModels","assignPrompt","action","type","actionParams","context","field","layout","systemPrompt","template","prompt","toLexicalHTML","toHTML","name","assignedPrompts","undefined","system","getLayout","getSystemPrompt","find","p","updatedLayout","endpoints","pluginConfig","textarea","handler","req","data","json","allowedEditorNodes","locale","options","instructionId","contextData","doc","Error","instructions","payload","findByID","id","collection","collections","config","slug","custom","editorConfig","admin","schema","editorSchema","promptTemplate","allowedEditorSchema","length","schemaPath","fieldName","split","pop","defaultLocale","locales","localization","localeData","l","code","localeInfo","label","model","settingsName","settings","modelOptions","prompts","error","logger","Response","JSON","stringify","message","status","method","path","upload","collectionSlug","documentId","docData","draft","images","sampleImages","text","modelId","uploadCollectionSlug","editImages","img","serverURL","env","SERVER_URL","NEXT_PUBLIC_SERVER_URL","response","fetch","image","url","headers","Authorization","get","blob","push","size","e","console","result","assetData","create","file","alt"],"mappings":"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"}

package/dist/fields/PromptEditorField/PromptEditorField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptEditorField.d.ts","sourceRoot":"","sources":["../../../src/fields/PromptEditorField/PromptEditorField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAGvD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0BhE,CAAA"}
+{"version":3,"file":"PromptEditorField.d.ts","sourceRoot":"","sources":["../../../src/fields/PromptEditorField/PromptEditorField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAGvD,OAAO,KAA4D,MAAM,OAAO,CAAA;AAMhF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6DhE,CAAA"}

package/dist/fields/PromptEditorField/PromptEditorField.js

@@ -1,34 +1,64 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldDescription, FieldLabel, useField } from '@payloadcms/ui';
-import React from 'react';
-import { AutocompleteTextField } from '../../libraries/autocomplete/AutocompleteTextArea.js';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Mention, MentionsInput } from 'react-mentions/dist/react-mentions.cjs.js';
 import { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js';
-//NOTE: HMR does not work for plugin components anymore, I think it has to do with importMap/ string path
+import { defaultStyle } from './defaultStyle.js';
 export const PromptEditorField = (props)=>{
     const { field, path: pathFromContext } = props;
-    const { setValue, value } = useField({
+    const { setValue, value: payloadValue } = useField({
         path: pathFromContext
     });
+    const [localValue, setLocalValue] = useState(payloadValue || '');
+    const hasInitialized = useRef(false);
     const { promptEditorSuggestions } = useInstructions();
+    const suggestions = useMemo(()=>promptEditorSuggestions.map((suggestion)=>({
+                id: suggestion,
+                display: suggestion
+            })), [
+        promptEditorSuggestions
+    ]);
+    useEffect(()=>{
+        if (!hasInitialized.current || payloadValue === '') {
+            setLocalValue(payloadValue || '');
+            hasInitialized.current = true;
+        }
+    }, [
+        payloadValue
+    ]);
+    const handleChange = useCallback((e)=>{
+        setLocalValue(e.target.value);
+    }, []);
+    const handleBlur = useCallback(()=>{
+        setValue(localValue);
+    }, [
+        localValue,
+        setValue
+    ]);
+    const displayTransform = useCallback((id)=>`{{ ${id} }}`, []);
     return /*#__PURE__*/ _jsxs("div", {
         className: "field-type textarea",
         children: [
             /*#__PURE__*/ _jsx(FieldLabel, {
                 label: field.label
             }),
-            /*#__PURE__*/ _jsx(AutocompleteTextField, {
-                changeOnSelect: (trigger, selected)=>{
-                    return trigger + selected + ' }}';
-                },
-                onChange: (val)=>{
-                    setValue(val);
-                },
-                options: promptEditorSuggestions,
-                trigger: [
-                    '{{ '
-                ],
-                value: value
+            /*#__PURE__*/ _jsx(MentionsInput, {
+                onBlur: handleBlur,
+                onChange: handleChange,
+                placeholder: "Type your prompt using {{ fieldName }} variables...",
+                style: defaultStyle,
+                value: localValue,
+                children: /*#__PURE__*/ _jsx(Mention, {
+                    data: suggestions,
+                    displayTransform: displayTransform,
+                    markup: "{{__id__}}",
+                    style: {
+                        backgroundColor: 'var(--theme-elevation-100)',
+                        padding: "2px 0"
+                    },
+                    trigger: "{"
+                })
             }),
             /*#__PURE__*/ _jsx(FieldDescription, {
                 description: field?.admin?.description,

package/dist/fields/PromptEditorField/PromptEditorField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/fields/PromptEditorField/PromptEditorField.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport { FieldDescription, FieldLabel, useField } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { AutocompleteTextField } from '../../libraries/autocomplete/AutocompleteTextArea.js'\nimport { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js'\n\n//NOTE: HMR does not work for plugin components anymore, I think it has to do with importMap/ string path\nexport const PromptEditorField: React.FC<TextareaFieldClientProps> = (props) => {\n  const { field, path: pathFromContext } = props\n\n  const { setValue, value } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const { promptEditorSuggestions } = useInstructions()\n\n  return (\n    <div className=\"field-type textarea\">\n      <FieldLabel label={field.label} />\n      <AutocompleteTextField\n        changeOnSelect={(trigger, selected) => {\n          return trigger + selected + ' }}'\n        }}\n        onChange={(val: string) => {\n          setValue(val)\n        }}\n        options={promptEditorSuggestions}\n        trigger={['{{ ']}\n        value={value}\n      />\n      <FieldDescription description={field?.admin?.description} path=\"\" />\n    </div>\n  )\n}\n"],"names":["FieldDescription","FieldLabel","useField","React","AutocompleteTextField","useInstructions","PromptEditorField","props","field","path","pathFromContext","setValue","value","promptEditorSuggestions","div","className","label","changeOnSelect","trigger","selected","onChange","val","options","description","admin"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,iBAAgB;AACvE,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,uDAAsD;AAC5F,SAASC,eAAe,QAAQ,0DAAyD;AAEzF,yGAAyG;AACzG,OAAO,MAAMC,oBAAwD,CAACC;IACpE,MAAM,EAAEC,KAAK,EAAEC,MAAMC,eAAe,EAAE,GAAGH;IAEzC,MAAM,EAAEI,QAAQ,EAAEC,KAAK,EAAE,GAAGV,SAAiB;QAC3CO,MAAMC;IACR;IAEA,MAAM,EAAEG,uBAAuB,EAAE,GAAGR;IAEpC,qBACE,MAACS;QAAIC,WAAU;;0BACb,KAACd;gBAAWe,OAAOR,MAAMQ,KAAK;;0BAC9B,KAACZ;gBACCa,gBAAgB,CAACC,SAASC;oBACxB,OAAOD,UAAUC,WAAW;gBAC9B;gBACAC,UAAU,CAACC;oBACTV,SAASU;gBACX;gBACAC,SAAST;gBACTK,SAAS;oBAAC;iBAAM;gBAChBN,OAAOA;;0BAET,KAACZ;gBAAiBuB,aAAaf,OAAOgB,OAAOD;gBAAad,MAAK;;;;AAGrE,EAAC"}
+{"version":3,"sources":["../../../src/fields/PromptEditorField/PromptEditorField.tsx"],"sourcesContent":["'use client'\n\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport { FieldDescription, FieldLabel, useField } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Mention, MentionsInput } from 'react-mentions/dist/react-mentions.cjs.js'\n\nimport { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js'\nimport { defaultStyle } from './defaultStyle.js'\n\nexport const PromptEditorField: React.FC<TextareaFieldClientProps> = (props) => {\n  const { field, path: pathFromContext } = props\n  const { setValue, value: payloadValue } = useField<string>({\n    path: pathFromContext,\n  })\n\n  const [localValue, setLocalValue] = useState(payloadValue || '')\n  const hasInitialized = useRef(false)\n\n  const { promptEditorSuggestions } = useInstructions()\n\n  const suggestions = useMemo(\n    () =>\n      promptEditorSuggestions.map((suggestion) => ({\n        id: suggestion,\n        display: suggestion,\n      })),\n    [promptEditorSuggestions],\n  )\n\n  useEffect(() => {\n    if (!hasInitialized.current || payloadValue === '') {\n      setLocalValue(payloadValue || '')\n      hasInitialized.current = true\n    }\n  }, [payloadValue])\n\n  const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setLocalValue(e.target.value)\n  }, [])\n\n  const handleBlur = useCallback(() => {\n    setValue(localValue)\n  }, [localValue, setValue])\n\n  const displayTransform = useCallback((id: string) => `{{ ${id} }}`, [])\n\n  return (\n    <div className=\"field-type textarea\">\n      <FieldLabel label={field.label} />\n      <MentionsInput\n        onBlur={handleBlur}\n        onChange={handleChange}\n        placeholder=\"Type your prompt using {{ fieldName }} variables...\"\n        style={defaultStyle}\n        value={localValue}\n      >\n        <Mention\n          data={suggestions}\n          displayTransform={displayTransform}\n          markup=\"{{__id__}}\"\n          style={{\n            backgroundColor: 'var(--theme-elevation-100)',\n            padding: \"2px 0\"\n          }}\n          trigger=\"{\"\n        />\n      </MentionsInput>\n      <FieldDescription description={field?.admin?.description} path=\"\" />\n    </div>\n  )\n}"],"names":["FieldDescription","FieldLabel","useField","React","useCallback","useEffect","useMemo","useRef","useState","Mention","MentionsInput","useInstructions","defaultStyle","PromptEditorField","props","field","path","pathFromContext","setValue","value","payloadValue","localValue","setLocalValue","hasInitialized","promptEditorSuggestions","suggestions","map","suggestion","id","display","current","handleChange","e","target","handleBlur","displayTransform","div","className","label","onBlur","onChange","placeholder","style","data","markup","backgroundColor","padding","trigger","description","admin"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,iBAAgB;AACvE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAChF,SAASC,OAAO,EAAEC,aAAa,QAAQ,4CAA2C;AAElF,SAASC,eAAe,QAAQ,0DAAyD;AACzF,SAASC,YAAY,QAAQ,oBAAmB;AAEhD,OAAO,MAAMC,oBAAwD,CAACC;IACpE,MAAM,EAAEC,KAAK,EAAEC,MAAMC,eAAe,EAAE,GAAGH;IACzC,MAAM,EAAEI,QAAQ,EAAEC,OAAOC,YAAY,EAAE,GAAGlB,SAAiB;QACzDc,MAAMC;IACR;IAEA,MAAM,CAACI,YAAYC,cAAc,GAAGd,SAASY,gBAAgB;IAC7D,MAAMG,iBAAiBhB,OAAO;IAE9B,MAAM,EAAEiB,uBAAuB,EAAE,GAAGb;IAEpC,MAAMc,cAAcnB,QAClB,IACEkB,wBAAwBE,GAAG,CAAC,CAACC,aAAgB,CAAA;gBAC3CC,IAAID;gBACJE,SAASF;YACX,CAAA,IACF;QAACH;KAAwB;IAG3BnB,UAAU;QACR,IAAI,CAACkB,eAAeO,OAAO,IAAIV,iBAAiB,IAAI;YAClDE,cAAcF,gBAAgB;YAC9BG,eAAeO,OAAO,GAAG;QAC3B;IACF,GAAG;QAACV;KAAa;IAEjB,MAAMW,eAAe3B,YAAY,CAAC4B;QAChCV,cAAcU,EAAEC,MAAM,CAACd,KAAK;IAC9B,GAAG,EAAE;IAEL,MAAMe,aAAa9B,YAAY;QAC7Bc,SAASG;IACX,GAAG;QAACA;QAAYH;KAAS;IAEzB,MAAMiB,mBAAmB/B,YAAY,CAACwB,KAAe,CAAC,GAAG,EAAEA,GAAG,GAAG,CAAC,EAAE,EAAE;IAEtE,qBACE,MAACQ;QAAIC,WAAU;;0BACb,KAACpC;gBAAWqC,OAAOvB,MAAMuB,KAAK;;0BAC9B,KAAC5B;gBACC6B,QAAQL;gBACRM,UAAUT;gBACVU,aAAY;gBACZC,OAAO9B;gBACPO,OAAOE;0BAEP,cAAA,KAACZ;oBACCkC,MAAMlB;oBACNU,kBAAkBA;oBAClBS,QAAO;oBACPF,OAAO;wBACLG,iBAAiB;wBACjBC,SAAS;oBACX;oBACAC,SAAQ;;;0BAGZ,KAAC/C;gBAAiBgD,aAAajC,OAAOkC,OAAOD;gBAAahC,MAAK;;;;AAGrE,EAAC"}

package/dist/fields/PromptEditorField/defaultStyle.d.ts

@@ -0,0 +1,50 @@
+export declare const defaultStyle: {
+    control: {
+        fontSize: number;
+        fontWeight: string;
+    };
+    '&multiLine': {
+        control: {
+            fontFamily: string;
+            minHeight: number;
+        };
+        highlighter: {
+            border: string;
+            padding: number;
+        };
+        input: {
+            padding: number;
+        };
+    };
+    '&singleLine': {
+        display: string;
+        width: number;
+        highlighter: {
+            border: string;
+            padding: number;
+        };
+        input: {
+            border: string;
+            padding: number;
+        };
+    };
+    suggestions: {
+        item: {
+            '&focused': {
+                backgroundColor: string;
+            };
+            borderBottom: string;
+            padding: string;
+        };
+        list: {
+            backgroundColor: string;
+            borderRadius: string;
+            bottom: number;
+            fontSize: number;
+            maxHeight: number;
+            overflow: string;
+            position: string;
+        };
+    };
+};
+//# sourceMappingURL=defaultStyle.d.ts.map

package/dist/fields/PromptEditorField/defaultStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultStyle.d.ts","sourceRoot":"","sources":["../../../src/fields/PromptEditorField/defaultStyle.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAA"}

package/dist/fields/PromptEditorField/defaultStyle.js

@@ -0,0 +1,51 @@
+export const defaultStyle = {
+    control: {
+        fontSize: 12,
+        fontWeight: 'normal'
+    },
+    '&multiLine': {
+        control: {
+            fontFamily: 'monospace',
+            minHeight: 63
+        },
+        highlighter: {
+            border: '1px solid transparent',
+            padding: 9
+        },
+        input: {
+            padding: 9
+        }
+    },
+    '&singleLine': {
+        display: 'inline-block',
+        width: 180,
+        highlighter: {
+            border: '2px inset transparent',
+            padding: 1
+        },
+        input: {
+            border: '2px inset',
+            padding: 1
+        }
+    },
+    suggestions: {
+        item: {
+            '&focused': {
+                backgroundColor: 'var(--theme-elevation-100)'
+            },
+            borderBottom: '1px solid rgba(0,0,0,0.15)',
+            padding: '5px 15px'
+        },
+        list: {
+            backgroundColor: 'var(--theme-input-bg)',
+            borderRadius: '4px',
+            bottom: 14,
+            fontSize: 14,
+            maxHeight: 160,
+            overflow: 'auto',
+            position: 'absolute'
+        }
+    }
+};
+
+//# sourceMappingURL=defaultStyle.js.map

package/dist/fields/PromptEditorField/defaultStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/fields/PromptEditorField/defaultStyle.ts"],"sourcesContent":["export const defaultStyle = {\n  control: {\n    fontSize: 12,\n    fontWeight: 'normal',\n  },\n\n  '&multiLine': {\n    control: {\n      fontFamily: 'monospace',\n      minHeight: 63,\n    },\n    highlighter: {\n      border: '1px solid transparent',\n      padding: 9,\n    },\n    input: {\n      padding: 9,\n    },\n  },\n\n  '&singleLine': {\n    display: 'inline-block',\n    width: 180,\n\n    highlighter: {\n      border: '2px inset transparent',\n      padding: 1,\n    },\n    input: {\n      border: '2px inset',\n      padding: 1,\n    },\n  },\n\n  suggestions: {\n    item: {\n      '&focused': {\n        backgroundColor: 'var(--theme-elevation-100)',\n      },\n      borderBottom: '1px solid rgba(0,0,0,0.15)',\n      padding: '5px 15px',\n    },\n    list: {\n      backgroundColor: 'var(--theme-input-bg)',\n      borderRadius: '4px',\n      bottom: 14,\n      fontSize: 14,\n      maxHeight: 160,\n      overflow: 'auto',\n      position: 'absolute',\n    },\n  },\n}\n"],"names":["defaultStyle","control","fontSize","fontWeight","fontFamily","minHeight","highlighter","border","padding","input","display","width","suggestions","item","backgroundColor","borderBottom","list","borderRadius","bottom","maxHeight","overflow","position"],"mappings":"AAAA,OAAO,MAAMA,eAAe;IAC1BC,SAAS;QACPC,UAAU;QACVC,YAAY;IACd;IAEA,cAAc;QACZF,SAAS;YACPG,YAAY;YACZC,WAAW;QACb;QACAC,aAAa;YACXC,QAAQ;YACRC,SAAS;QACX;QACAC,OAAO;YACLD,SAAS;QACX;IACF;IAEA,eAAe;QACbE,SAAS;QACTC,OAAO;QAEPL,aAAa;YACXC,QAAQ;YACRC,SAAS;QACX;QACAC,OAAO;YACLF,QAAQ;YACRC,SAAS;QACX;IACF;IAEAI,aAAa;QACXC,MAAM;YACJ,YAAY;gBACVC,iBAAiB;YACnB;YACAC,cAAc;YACdP,SAAS;QACX;QACAQ,MAAM;YACJF,iBAAiB;YACjBG,cAAc;YACdC,QAAQ;YACRhB,UAAU;YACViB,WAAW;YACXC,UAAU;YACVC,UAAU;QACZ;IACF;AACF,EAAC"}

package/dist/providers/InstructionsProvider/InstructionsProvider.d.ts

@@ -1,11 +1,13 @@
 import type { Field } from 'payload';
 import React from 'react';
 export declare const InstructionsContext: React.Context<{
+    activeCollection?: string;
     field?: Field;
     instructions: Record<string, any>;
     isConfigAllowed: boolean;
     path?: string;
     schemaPath?: unknown;
+    setActiveCollection?: (val: unknown) => void;
 }>;
 export declare const InstructionsProvider: React.FC;
 //# sourceMappingURL=InstructionsProvider.d.ts.map

package/dist/providers/InstructionsProvider/InstructionsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsProvider.d.ts","sourceRoot":"","sources":["../../../src/providers/InstructionsProvider/InstructionsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,KAA6C,MAAM,OAAO,CAAA;AAkBjE,eAAO,MAAM,mBAAmB;YAbtB,KAAK;kBACC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;qBAChB,OAAO;WACjB,MAAM;iBACA,OAAO;EAS0C,CAAA;AAEhE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EA+BxC,CAAA"}
+{"version":3,"file":"InstructionsProvider.d.ts","sourceRoot":"","sources":["../../../src/providers/InstructionsProvider/InstructionsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC,OAAO,KAA6C,MAAM,OAAO,CAAA;AAoBjE,eAAO,MAAM,mBAAmB;uBAfX,MAAM;YACjB,KAAK;kBACC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;qBAChB,OAAO;WACjB,MAAM;iBACA,OAAO;0BACE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI;EASkB,CAAA;AAEhE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAkCxC,CAAA"}

package/dist/providers/InstructionsProvider/InstructionsProvider.js

@@ -13,6 +13,7 @@ const initialContext = {
 export const InstructionsContext = /*#__PURE__*/ createContext(initialContext);
 export const InstructionsProvider = ({ children })=>{
     const [instructions, setInstructionsState] = useState({});
+    const [activeCollection, setActiveCollection] = useState('');
     const [isConfigAllowed, setIsConfigAllowed] = useState(false);
     const { user } = useAuth();
     const { config } = useConfig();
@@ -33,8 +34,10 @@ export const InstructionsProvider = ({ children })=>{
     ]);
     return /*#__PURE__*/ _jsx(InstructionsContext.Provider, {
         value: {
+            activeCollection,
             instructions,
-            isConfigAllowed
+            isConfigAllowed,
+            setActiveCollection
         },
         children: children
     });

package/dist/providers/InstructionsProvider/InstructionsProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/providers/InstructionsProvider/InstructionsProvider.tsx"],"sourcesContent":["'use client'\n\nimport type { Field } from 'payload'\n\nimport { useAuth, useConfig } from '@payloadcms/ui'\nimport React, { createContext, useEffect, useState } from 'react'\n\nimport { PLUGIN_FETCH_FIELDS_ENDPOINT } from '../../defaults.js'\n\nconst initialContext: {\n  field?: Field\n  instructions: Record<string, any>\n  isConfigAllowed: boolean\n  path?: string\n  schemaPath?: unknown\n} = {\n  field: undefined,\n  instructions: undefined,\n  isConfigAllowed: true,\n  path: '',\n  schemaPath: '',\n}\n\nexport const InstructionsContext = createContext(initialContext)\n\nexport const InstructionsProvider: React.FC = ({ children }: { children: React.ReactNode }) => {\n  const [instructions, setInstructionsState] = useState({})\n  const [isConfigAllowed, setIsConfigAllowed] = useState(false)\n  const {\n    user\n  } = useAuth();\n\n  const { config } = useConfig()\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  // This is here because each field have separate instructions and\n  // their ID is needed to edit them for Drawer\n  useEffect(() => {\n    fetch(`${serverURL}${api}${PLUGIN_FETCH_FIELDS_ENDPOINT}`)\n      .then(async (res) => {\n        await res.json().then((data) => {\n          setIsConfigAllowed(data?.isConfigAllowed)\n          setInstructionsState(data?.fields)\n        })\n      })\n      .catch((err) => {\n        console.error('InstructionsProvider:', err)\n      })\n  }, [user])\n\n  return (\n    <InstructionsContext.Provider value={{ instructions, isConfigAllowed }}>{children}</InstructionsContext.Provider>\n  )\n}\n"],"names":["useAuth","useConfig","React","createContext","useEffect","useState","PLUGIN_FETCH_FIELDS_ENDPOINT","initialContext","field","undefined","instructions","isConfigAllowed","path","schemaPath","InstructionsContext","InstructionsProvider","children","setInstructionsState","setIsConfigAllowed","user","config","routes","api","serverURL","fetch","then","res","json","data","fields","catch","err","console","error","Provider","value"],"mappings":"AAAA;;AAIA,SAASA,OAAO,EAAEC,SAAS,QAAQ,iBAAgB;AACnD,OAAOC,SAASC,aAAa,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAEjE,SAASC,4BAA4B,QAAQ,oBAAmB;AAEhE,MAAMC,iBAMF;IACFC,OAAOC;IACPC,cAAcD;IACdE,iBAAiB;IACjBC,MAAM;IACNC,YAAY;AACd;AAEA,OAAO,MAAMC,oCAAsBX,cAAcI,gBAAe;AAEhE,OAAO,MAAMQ,uBAAiC,CAAC,EAAEC,QAAQ,EAAiC;IACxF,MAAM,CAACN,cAAcO,qBAAqB,GAAGZ,SAAS,CAAC;IACvD,MAAM,CAACM,iBAAiBO,mBAAmB,GAAGb,SAAS;IACvD,MAAM,EACJc,IAAI,EACL,GAAGnB;IAEJ,MAAM,EAAEoB,MAAM,EAAE,GAAGnB;IACnB,MAAM,EACJoB,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGH;IAEJ,iEAAiE;IACjE,6CAA6C;IAC7ChB,UAAU;QACRoB,MAAM,GAAGD,YAAYD,MAAMhB,8BAA8B,EACtDmB,IAAI,CAAC,OAAOC;YACX,MAAMA,IAAIC,IAAI,GAAGF,IAAI,CAAC,CAACG;gBACrBV,mBAAmBU,MAAMjB;gBACzBM,qBAAqBW,MAAMC;YAC7B;QACF,GACCC,KAAK,CAAC,CAACC;YACNC,QAAQC,KAAK,CAAC,yBAAyBF;QACzC;IACJ,GAAG;QAACZ;KAAK;IAET,qBACE,KAACL,oBAAoBoB,QAAQ;QAACC,OAAO;YAAEzB;YAAcC;QAAgB;kBAAIK;;AAE7E,EAAC"}
+{"version":3,"sources":["../../../src/providers/InstructionsProvider/InstructionsProvider.tsx"],"sourcesContent":["'use client'\n\nimport type { Field } from 'payload'\n\nimport { useAuth, useConfig } from '@payloadcms/ui'\nimport React, { createContext, useEffect, useState } from 'react'\n\nimport { PLUGIN_FETCH_FIELDS_ENDPOINT } from '../../defaults.js'\n\nconst initialContext: {\n  activeCollection?: string\n  field?: Field\n  instructions: Record<string, any>\n  isConfigAllowed: boolean\n  path?: string\n  schemaPath?: unknown\n  setActiveCollection?: (val: unknown) => void\n} = {\n  field: undefined,\n  instructions: undefined,\n  isConfigAllowed: true,\n  path: '',\n  schemaPath: '',\n}\n\nexport const InstructionsContext = createContext(initialContext)\n\nexport const InstructionsProvider: React.FC = ({ children }: { children: React.ReactNode }) => {\n  const [instructions, setInstructionsState] = useState({})\n  const [activeCollection, setActiveCollection] = useState('')\n  const [isConfigAllowed, setIsConfigAllowed] = useState(false)\n  const { user } = useAuth()\n\n  const { config } = useConfig()\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  // This is here because each field have separate instructions and\n  // their ID is needed to edit them for Drawer\n  useEffect(() => {\n    fetch(`${serverURL}${api}${PLUGIN_FETCH_FIELDS_ENDPOINT}`)\n      .then(async (res) => {\n        await res.json().then((data) => {\n          setIsConfigAllowed(data?.isConfigAllowed)\n          setInstructionsState(data?.fields)\n        })\n      })\n      .catch((err) => {\n        console.error('InstructionsProvider:', err)\n      })\n  }, [user])\n\n  return (\n    <InstructionsContext.Provider\n      value={{ activeCollection, instructions, isConfigAllowed, setActiveCollection }}\n    >\n      {children}\n    </InstructionsContext.Provider>\n  )\n}\n"],"names":["useAuth","useConfig","React","createContext","useEffect","useState","PLUGIN_FETCH_FIELDS_ENDPOINT","initialContext","field","undefined","instructions","isConfigAllowed","path","schemaPath","InstructionsContext","InstructionsProvider","children","setInstructionsState","activeCollection","setActiveCollection","setIsConfigAllowed","user","config","routes","api","serverURL","fetch","then","res","json","data","fields","catch","err","console","error","Provider","value"],"mappings":"AAAA;;AAIA,SAASA,OAAO,EAAEC,SAAS,QAAQ,iBAAgB;AACnD,OAAOC,SAASC,aAAa,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAEjE,SAASC,4BAA4B,QAAQ,oBAAmB;AAEhE,MAAMC,iBAQF;IACFC,OAAOC;IACPC,cAAcD;IACdE,iBAAiB;IACjBC,MAAM;IACNC,YAAY;AACd;AAEA,OAAO,MAAMC,oCAAsBX,cAAcI,gBAAe;AAEhE,OAAO,MAAMQ,uBAAiC,CAAC,EAAEC,QAAQ,EAAiC;IACxF,MAAM,CAACN,cAAcO,qBAAqB,GAAGZ,SAAS,CAAC;IACvD,MAAM,CAACa,kBAAkBC,oBAAoB,GAAGd,SAAS;IACzD,MAAM,CAACM,iBAAiBS,mBAAmB,GAAGf,SAAS;IACvD,MAAM,EAAEgB,IAAI,EAAE,GAAGrB;IAEjB,MAAM,EAAEsB,MAAM,EAAE,GAAGrB;IACnB,MAAM,EACJsB,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGH;IAEJ,iEAAiE;IACjE,6CAA6C;IAC7ClB,UAAU;QACRsB,MAAM,GAAGD,YAAYD,MAAMlB,8BAA8B,EACtDqB,IAAI,CAAC,OAAOC;YACX,MAAMA,IAAIC,IAAI,GAAGF,IAAI,CAAC,CAACG;gBACrBV,mBAAmBU,MAAMnB;gBACzBM,qBAAqBa,MAAMC;YAC7B;QACF,GACCC,KAAK,CAAC,CAACC;YACNC,QAAQC,KAAK,CAAC,yBAAyBF;QACzC;IACJ,GAAG;QAACZ;KAAK;IAET,qBACE,KAACP,oBAAoBsB,QAAQ;QAC3BC,OAAO;YAAEnB;YAAkBR;YAAcC;YAAiBQ;QAAoB;kBAE7EH;;AAGP,EAAC"}

package/dist/providers/InstructionsProvider/useInstructions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInstructions.d.ts","sourceRoot":"","sources":["../../../src/providers/InstructionsProvider/useInstructions.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,GAC1B,SAAQ;IACN,UAAU,CAAC,EAAE,OAAO,CAAA;CAChB,QAgDP,CAAA"}
+{"version":3,"file":"useInstructions.d.ts","sourceRoot":"","sources":["../../../src/providers/InstructionsProvider/useInstructions.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,GAC1B,SAAQ;IACN,UAAU,CAAC,EAAE,OAAO,CAAA;CAChB,QAqEP,CAAA"}

package/dist/providers/InstructionsProvider/useInstructions.js

@@ -1,45 +1,70 @@
-import { useContext, useEffect, useState } from 'react';
+import { useDocumentInfo } from '@payloadcms/ui';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
 import { handlebarsHelpers, handlebarsHelpersMap } from '../../libraries/handlebars/helpersMap.js';
 import { InstructionsContext } from './InstructionsProvider.js';
 export const useInstructions = (update = {})=>{
     const context = useContext(InstructionsContext);
-    //Fields are used for autocompletion in PromptTextareaField
-    const fields = Object.keys(context.instructions || {}).map((key)=>{
-        return key.split('.').slice(1).join('.');
-    });
-    const promptEditorSuggestions = [
-        ...fields
-    ].reduce((acc, f)=>{
-        const fieldKey = Object.keys(context.instructions).find((k)=>k.endsWith(f));
-        const fieldInfo = context.instructions[fieldKey];
-        // Currently, Upload fields are excluded from suggestions
-        if (fieldInfo.fieldType === 'upload') {
-            return acc;
-        }
-        const helpers = handlebarsHelpers.filter((h)=>handlebarsHelpersMap[h]?.field === fieldInfo.fieldType);
-        if (helpers.length) {
-            for (const helper of helpers){
-                acc.push(helper + ` ${f}`);
-            }
-            return acc;
-        }
-        acc.push(f);
-        return acc;
-    }, []);
+    const { collectionSlug } = useDocumentInfo();
+    const { activeCollection, instructions, setActiveCollection } = context;
     const [schemaPath, setSchemaPath] = useState(update.schemaPath);
     useEffect(()=>{
         if (update.schemaPath !== schemaPath) {
             setSchemaPath(update.schemaPath);
         }
     }, [
-        schemaPath,
-        update
+        update.schemaPath
+    ]);
+    useEffect(()=>{
+        if (activeCollection !== collectionSlug && collectionSlug !== PLUGIN_INSTRUCTIONS_TABLE) {
+            setActiveCollection(collectionSlug);
+        }
+    }, [
+        activeCollection,
+        collectionSlug,
+        setActiveCollection
+    ]);
+    const groupedFields = useMemo(()=>{
+        const result = {};
+        for (const fullKey of Object.keys(instructions)){
+            const [collection, ...pathParts] = fullKey.split('.');
+            const path = pathParts.join('.');
+            if (!result[collection]) result[collection] = [];
+            result[collection].push(path);
+        }
+        return result;
+    }, [
+        instructions
+    ]);
+    // Suggestions for prompt editor
+    const promptEditorSuggestions = useMemo(()=>{
+        const activeFields = groupedFields[activeCollection] || [];
+        return activeFields.reduce((acc, f)=>{
+            const fieldKey = Object.keys(instructions).find((k)=>k.endsWith(f));
+            const fieldInfo = instructions[fieldKey];
+            if (!fieldInfo) return acc;
+            if (fieldInfo.fieldType === 'upload') {
+                acc.push(`${f}.url`);
+                return acc;
+            }
+            const helpers = handlebarsHelpers.filter((h)=>handlebarsHelpersMap[h]?.field === fieldInfo.fieldType);
+            if (helpers.length) {
+                for (const helper of helpers){
+                    acc.push(`${helper} ${f}`);
+                }
+            } else {
+                acc.push(f);
+            }
+            return acc;
+        }, []);
+    }, [
+        groupedFields,
+        activeCollection,
+        instructions
     ]);
     return {
         ...context,
-        ...context.instructions[schemaPath] || {},
-        fields,
-        map: context.instructions,
+        ...instructions[schemaPath] || {},
         promptEditorSuggestions
     };
 };

package/dist/providers/InstructionsProvider/useInstructions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/providers/InstructionsProvider/useInstructions.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react'\n\nimport { handlebarsHelpers, handlebarsHelpersMap } from '../../libraries/handlebars/helpersMap.js'\nimport { InstructionsContext } from './InstructionsProvider.js'\n\nexport const useInstructions = (\n  update: {\n    schemaPath?: unknown\n  } = {},\n) => {\n  const context = useContext(InstructionsContext)\n\n  //Fields are used for autocompletion in PromptTextareaField\n  const fields = Object.keys(context.instructions || {}).map((key) => {\n    return key.split('.').slice(1).join('.')\n  })\n\n  const promptEditorSuggestions = [...fields].reduce((acc, f) => {\n    const fieldKey = Object.keys(context.instructions).find((k) => k.endsWith(f))\n    const fieldInfo = context.instructions[fieldKey]\n\n    // Currently, Upload fields are excluded from suggestions\n    if (fieldInfo.fieldType === 'upload') {\n      return acc\n    }\n\n    const helpers = handlebarsHelpers.filter(\n      (h) => handlebarsHelpersMap[h]?.field === fieldInfo.fieldType,\n    )\n\n    if (helpers.length) {\n      for (const helper of helpers) {\n        acc.push(helper + ` ${f}`)\n      }\n      return acc\n    }\n\n    acc.push(f)\n    return acc\n  }, [])\n\n  const [schemaPath, setSchemaPath] = useState(update.schemaPath as string)\n\n  useEffect(() => {\n    if(update.schemaPath !== schemaPath) {\n      setSchemaPath(update.schemaPath as string)\n    }\n  }, [schemaPath, update])\n\n  return {\n    ...context,\n    ...(context.instructions[schemaPath] || {}),\n    fields,\n    map: context.instructions,\n    promptEditorSuggestions,\n  }\n}\n"],"names":["useContext","useEffect","useState","handlebarsHelpers","handlebarsHelpersMap","InstructionsContext","useInstructions","update","context","fields","Object","keys","instructions","map","key","split","slice","join","promptEditorSuggestions","reduce","acc","f","fieldKey","find","k","endsWith","fieldInfo","fieldType","helpers","filter","h","field","length","helper","push","schemaPath","setSchemaPath"],"mappings":"AAAA,SAASA,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAEvD,SAASC,iBAAiB,EAAEC,oBAAoB,QAAQ,2CAA0C;AAClG,SAASC,mBAAmB,QAAQ,4BAA2B;AAE/D,OAAO,MAAMC,kBAAkB,CAC7BC,SAEI,CAAC,CAAC;IAEN,MAAMC,UAAUR,WAAWK;IAE3B,2DAA2D;IAC3D,MAAMI,SAASC,OAAOC,IAAI,CAACH,QAAQI,YAAY,IAAI,CAAC,GAAGC,GAAG,CAAC,CAACC;QAC1D,OAAOA,IAAIC,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC;IACtC;IAEA,MAAMC,0BAA0B;WAAIT;KAAO,CAACU,MAAM,CAAC,CAACC,KAAKC;QACvD,MAAMC,WAAWZ,OAAOC,IAAI,CAACH,QAAQI,YAAY,EAAEW,IAAI,CAAC,CAACC,IAAMA,EAAEC,QAAQ,CAACJ;QAC1E,MAAMK,YAAYlB,QAAQI,YAAY,CAACU,SAAS;QAEhD,yDAAyD;QACzD,IAAII,UAAUC,SAAS,KAAK,UAAU;YACpC,OAAOP;QACT;QAEA,MAAMQ,UAAUzB,kBAAkB0B,MAAM,CACtC,CAACC,IAAM1B,oBAAoB,CAAC0B,EAAE,EAAEC,UAAUL,UAAUC,SAAS;QAG/D,IAAIC,QAAQI,MAAM,EAAE;YAClB,KAAK,MAAMC,UAAUL,QAAS;gBAC5BR,IAAIc,IAAI,CAACD,SAAS,CAAC,CAAC,EAAEZ,GAAG;YAC3B;YACA,OAAOD;QACT;QAEAA,IAAIc,IAAI,CAACb;QACT,OAAOD;IACT,GAAG,EAAE;IAEL,MAAM,CAACe,YAAYC,cAAc,GAAGlC,SAASK,OAAO4B,UAAU;IAE9DlC,UAAU;QACR,IAAGM,OAAO4B,UAAU,KAAKA,YAAY;YACnCC,cAAc7B,OAAO4B,UAAU;QACjC;IACF,GAAG;QAACA;QAAY5B;KAAO;IAEvB,OAAO;QACL,GAAGC,OAAO;QACV,GAAIA,QAAQI,YAAY,CAACuB,WAAW,IAAI,CAAC,CAAC;QAC1C1B;QACAI,KAAKL,QAAQI,YAAY;QACzBM;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../../src/providers/InstructionsProvider/useInstructions.ts"],"sourcesContent":["import { useDocumentInfo } from '@payloadcms/ui'\nimport { useContext, useEffect, useMemo, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { handlebarsHelpers, handlebarsHelpersMap } from '../../libraries/handlebars/helpersMap.js'\nimport { InstructionsContext } from './InstructionsProvider.js'\n\nexport const useInstructions = (\n  update: {\n    schemaPath?: unknown\n  } = {},\n) => {\n  const context = useContext(InstructionsContext)\n  const { collectionSlug } = useDocumentInfo()\n  const { activeCollection, instructions, setActiveCollection } = context\n\n  const [schemaPath, setSchemaPath] = useState(update.schemaPath as string)\n\n  useEffect(() => {\n    if (update.schemaPath !== schemaPath) {\n      setSchemaPath(update.schemaPath as string)\n    }\n  }, [update.schemaPath])\n\n  useEffect(() => {\n    if (activeCollection !== collectionSlug && collectionSlug !== PLUGIN_INSTRUCTIONS_TABLE) {\n      setActiveCollection(collectionSlug)\n    }\n  }, [activeCollection, collectionSlug, setActiveCollection])\n\n  const groupedFields = useMemo(() => {\n    const result: Record<string, string[]> = {}\n\n    for (const fullKey of Object.keys(instructions)) {\n      const [collection, ...pathParts] = fullKey.split('.')\n      const path = pathParts.join('.')\n      if (!result[collection]) result[collection] = []\n      result[collection].push(path)\n    }\n\n    return result\n  }, [instructions])\n\n  // Suggestions for prompt editor\n  const promptEditorSuggestions = useMemo(() => {\n    const activeFields = groupedFields[activeCollection] || []\n\n    return activeFields.reduce<string[]>((acc, f) => {\n      const fieldKey = Object.keys(instructions).find((k) => k.endsWith(f))\n      const fieldInfo = instructions[fieldKey]\n\n      if (!fieldInfo) return acc\n\n      if (fieldInfo.fieldType === 'upload') {\n        acc.push(`${f}.url`)\n        return acc\n      }\n\n      const helpers = handlebarsHelpers.filter(\n        (h) => handlebarsHelpersMap[h]?.field === fieldInfo.fieldType,\n      )\n\n      if (helpers.length) {\n        for (const helper of helpers) {\n          acc.push(`${helper} ${f}`)\n        }\n      } else {\n        acc.push(f)\n      }\n\n      return acc\n    }, [])\n  }, [groupedFields, activeCollection, instructions])\n\n  return {\n    ...context,\n    ...(instructions[schemaPath] || {}),\n    promptEditorSuggestions,\n  }\n}\n"],"names":["useDocumentInfo","useContext","useEffect","useMemo","useState","PLUGIN_INSTRUCTIONS_TABLE","handlebarsHelpers","handlebarsHelpersMap","InstructionsContext","useInstructions","update","context","collectionSlug","activeCollection","instructions","setActiveCollection","schemaPath","setSchemaPath","groupedFields","result","fullKey","Object","keys","collection","pathParts","split","path","join","push","promptEditorSuggestions","activeFields","reduce","acc","f","fieldKey","find","k","endsWith","fieldInfo","fieldType","helpers","filter","h","field","length","helper"],"mappings":"AAAA,SAASA,eAAe,QAAQ,iBAAgB;AAChD,SAASC,UAAU,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAEhE,SAASC,yBAAyB,QAAQ,oBAAmB;AAC7D,SAASC,iBAAiB,EAAEC,oBAAoB,QAAQ,2CAA0C;AAClG,SAASC,mBAAmB,QAAQ,4BAA2B;AAE/D,OAAO,MAAMC,kBAAkB,CAC7BC,SAEI,CAAC,CAAC;IAEN,MAAMC,UAAUV,WAAWO;IAC3B,MAAM,EAAEI,cAAc,EAAE,GAAGZ;IAC3B,MAAM,EAAEa,gBAAgB,EAAEC,YAAY,EAAEC,mBAAmB,EAAE,GAAGJ;IAEhE,MAAM,CAACK,YAAYC,cAAc,GAAGb,SAASM,OAAOM,UAAU;IAE9Dd,UAAU;QACR,IAAIQ,OAAOM,UAAU,KAAKA,YAAY;YACpCC,cAAcP,OAAOM,UAAU;QACjC;IACF,GAAG;QAACN,OAAOM,UAAU;KAAC;IAEtBd,UAAU;QACR,IAAIW,qBAAqBD,kBAAkBA,mBAAmBP,2BAA2B;YACvFU,oBAAoBH;QACtB;IACF,GAAG;QAACC;QAAkBD;QAAgBG;KAAoB;IAE1D,MAAMG,gBAAgBf,QAAQ;QAC5B,MAAMgB,SAAmC,CAAC;QAE1C,KAAK,MAAMC,WAAWC,OAAOC,IAAI,CAACR,cAAe;YAC/C,MAAM,CAACS,YAAY,GAAGC,UAAU,GAAGJ,QAAQK,KAAK,CAAC;YACjD,MAAMC,OAAOF,UAAUG,IAAI,CAAC;YAC5B,IAAI,CAACR,MAAM,CAACI,WAAW,EAAEJ,MAAM,CAACI,WAAW,GAAG,EAAE;YAChDJ,MAAM,CAACI,WAAW,CAACK,IAAI,CAACF;QAC1B;QAEA,OAAOP;IACT,GAAG;QAACL;KAAa;IAEjB,gCAAgC;IAChC,MAAMe,0BAA0B1B,QAAQ;QACtC,MAAM2B,eAAeZ,aAAa,CAACL,iBAAiB,IAAI,EAAE;QAE1D,OAAOiB,aAAaC,MAAM,CAAW,CAACC,KAAKC;YACzC,MAAMC,WAAWb,OAAOC,IAAI,CAACR,cAAcqB,IAAI,CAAC,CAACC,IAAMA,EAAEC,QAAQ,CAACJ;YAClE,MAAMK,YAAYxB,YAAY,CAACoB,SAAS;YAExC,IAAI,CAACI,WAAW,OAAON;YAEvB,IAAIM,UAAUC,SAAS,KAAK,UAAU;gBACpCP,IAAIJ,IAAI,CAAC,GAAGK,EAAE,IAAI,CAAC;gBACnB,OAAOD;YACT;YAEA,MAAMQ,UAAUlC,kBAAkBmC,MAAM,CACtC,CAACC,IAAMnC,oBAAoB,CAACmC,EAAE,EAAEC,UAAUL,UAAUC,SAAS;YAG/D,IAAIC,QAAQI,MAAM,EAAE;gBAClB,KAAK,MAAMC,UAAUL,QAAS;oBAC5BR,IAAIJ,IAAI,CAAC,GAAGiB,OAAO,CAAC,EAAEZ,GAAG;gBAC3B;YACF,OAAO;gBACLD,IAAIJ,IAAI,CAACK;YACX;YAEA,OAAOD;QACT,GAAG,EAAE;IACP,GAAG;QAACd;QAAeL;QAAkBC;KAAa;IAElD,OAAO;QACL,GAAGH,OAAO;QACV,GAAIG,YAAY,CAACE,WAAW,IAAI,CAAC,CAAC;QAClCa;IACF;AACF,EAAC"}