@ai-stack/payloadcms 3.2.16-beta → 3.2.17-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -0
- package/dist/ai/analyse.d.ts +0 -1
- package/dist/ai/models/anthropic/generateRichText.d.ts +0 -1
- package/dist/ai/models/anthropic/generateRichText.js +7 -8
- package/dist/ai/models/anthropic/generateRichText.js.map +1 -1
- package/dist/ai/models/anthropic/index.d.ts +0 -1
- package/dist/ai/models/anthropic/index.js +54 -3
- package/dist/ai/models/anthropic/index.js.map +1 -1
- package/dist/ai/models/elevenLabs/generateVoice.d.ts +1 -2
- package/dist/ai/models/elevenLabs/index.d.ts +0 -1
- package/dist/ai/models/elevenLabs/index.js +5 -2
- package/dist/ai/models/elevenLabs/index.js.map +1 -1
- package/dist/ai/models/elevenLabs/voices.d.ts +6 -2
- package/dist/ai/models/elevenLabs/voices.js.map +1 -1
- package/dist/ai/models/index.d.ts +0 -1
- package/dist/ai/models/openai/generateImage.d.ts +1 -2
- package/dist/ai/models/openai/generateImage.js +6 -4
- package/dist/ai/models/openai/generateImage.js.map +1 -1
- package/dist/ai/models/openai/generateRichText.d.ts +0 -1
- package/dist/ai/models/openai/generateRichText.js +9 -12
- package/dist/ai/models/openai/generateRichText.js.map +1 -1
- package/dist/ai/models/openai/generateVoice.d.ts +1 -2
- package/dist/ai/models/openai/index.d.ts +0 -1
- package/dist/ai/models/openai/index.js +63 -4
- package/dist/ai/models/openai/index.js.map +1 -1
- package/dist/ai/models/openai/openai.d.ts +0 -1
- package/dist/ai/models/openai/openai.js +1 -2
- package/dist/ai/models/openai/openai.js.map +1 -1
- package/dist/ai/prompts.d.ts +2 -23
- package/dist/ai/prompts.js +2 -2
- package/dist/ai/prompts.js.map +1 -1
- package/dist/ai/schemas/lexicalJsonSchema.d.ts +5 -4
- package/dist/ai/schemas/lexicalJsonSchema.js +3 -1
- package/dist/ai/schemas/lexicalJsonSchema.js.map +1 -1
- package/dist/ai/utils/editImagesWithOpenAI.d.ts +0 -1
- package/dist/ai/utils/filterEditorSchemaByNodes.d.ts +19 -29
- package/dist/ai/utils/filterEditorSchemaByNodes.js +4 -2
- package/dist/ai/utils/filterEditorSchemaByNodes.js.map +1 -1
- package/dist/ai/utils/generateFileNameByPrompt.d.ts +1 -2
- package/dist/ai/utils/generateFileNameByPrompt.js.map +1 -1
- package/dist/ai/utils/isObjectSchema.d.ts +0 -1
- package/dist/ai/utils/systemGenerate.d.ts +0 -1
- package/dist/collections/Instructions.d.ts +0 -1
- package/dist/collections/Instructions.js +2 -2
- package/dist/collections/Instructions.js.map +1 -1
- package/dist/defaults.d.ts +0 -1
- package/dist/endpoints/fetchFields.d.ts +2 -3
- package/dist/endpoints/fetchFields.js +7 -3
- package/dist/endpoints/fetchFields.js.map +1 -1
- package/dist/endpoints/index.d.ts +0 -1
- package/dist/endpoints/index.js +111 -31
- package/dist/endpoints/index.js.map +1 -1
- package/dist/exports/client.d.ts +1 -1
- package/dist/exports/client.js +1 -0
- package/dist/exports/client.js.map +1 -1
- package/dist/exports/fields.d.ts +0 -1
- package/dist/exports/types.d.ts +2 -3
- package/dist/exports/types.js.map +1 -1
- package/dist/fields/ComposeField/ComposeField.d.ts +10 -2
- package/dist/fields/ComposeField/ComposeField.js +13 -5
- package/dist/fields/ComposeField/ComposeField.js.map +1 -1
- package/dist/fields/LexicalEditor/ComposeFeatureComponent.d.ts +2 -2
- package/dist/fields/LexicalEditor/feature.client.d.ts +2 -3
- package/dist/fields/LexicalEditor/feature.server.d.ts +0 -1
- package/dist/fields/PromptEditorField/PromptEditorField.d.ts +0 -1
- package/dist/fields/PromptEditorField/PromptEditorField.js +1 -1
- package/dist/fields/PromptEditorField/PromptEditorField.js.map +1 -1
- package/dist/fields/PromptEditorField/defaultStyle.d.ts +0 -1
- package/dist/fields/SelectField/SelectField.d.ts +2 -2
- package/dist/fields/SelectField/SelectField.js +15 -4
- package/dist/fields/SelectField/SelectField.js.map +1 -1
- package/dist/index.d.ts +2 -6
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/init.d.ts +5 -2
- package/dist/init.js +8 -7
- package/dist/init.js.map +1 -1
- package/dist/libraries/handlebars/asyncHandlebars.d.ts +0 -1
- package/dist/libraries/handlebars/helpers.d.ts +1 -2
- package/dist/libraries/handlebars/helpers.js +6 -1
- package/dist/libraries/handlebars/helpers.js.map +1 -1
- package/dist/libraries/handlebars/helpersMap.d.ts +0 -1
- package/dist/libraries/handlebars/replacePlaceholders.d.ts +0 -1
- package/dist/plugin.d.ts +0 -1
- package/dist/plugin.js +7 -5
- package/dist/plugin.js.map +1 -1
- package/dist/providers/FieldProvider/FieldProvider.d.ts +1 -2
- package/dist/providers/FieldProvider/useFieldProps.d.ts +3 -4
- package/dist/providers/InstructionsProvider/InstructionsProvider.d.ts +2 -12
- package/dist/providers/InstructionsProvider/InstructionsProvider.js +7 -9
- package/dist/providers/InstructionsProvider/InstructionsProvider.js.map +1 -1
- package/dist/providers/InstructionsProvider/context.d.ts +16 -0
- package/dist/providers/InstructionsProvider/context.js +13 -0
- package/dist/providers/InstructionsProvider/context.js.map +1 -0
- package/dist/providers/InstructionsProvider/useInstructions.d.ts +0 -1
- package/dist/providers/InstructionsProvider/useInstructions.js +29 -15
- package/dist/providers/InstructionsProvider/useInstructions.js.map +1 -1
- package/dist/translations/index.d.ts +0 -1
- package/dist/types/handlebars-async-helpers.d.js +2 -0
- package/dist/types/handlebars-async-helpers.d.js.map +1 -0
- package/dist/types/handlebars-dist-handlebars.d.js +2 -0
- package/dist/types/handlebars-dist-handlebars.d.js.map +1 -0
- package/dist/types/react-mentions.d.js +2 -0
- package/dist/types/react-mentions.d.js.map +1 -0
- package/dist/types.d.ts +45 -1
- package/dist/types.js.map +1 -1
- package/dist/ui/Compose/Compose.d.ts +0 -1
- package/dist/ui/Compose/Compose.js +61 -25
- package/dist/ui/Compose/Compose.js.map +1 -1
- package/dist/ui/Compose/UndoRedoActions.d.ts +2 -2
- package/dist/ui/Compose/hooks/menu/Item.d.ts +3 -2
- package/dist/ui/Compose/hooks/menu/Item.js +2 -2
- package/dist/ui/Compose/hooks/menu/Item.js.map +1 -1
- package/dist/ui/Compose/hooks/menu/TranslateMenu.d.ts +8 -5
- package/dist/ui/Compose/hooks/menu/TranslateMenu.js +1 -1
- package/dist/ui/Compose/hooks/menu/TranslateMenu.js.map +1 -1
- package/dist/ui/Compose/hooks/menu/items.d.ts +8 -9
- package/dist/ui/Compose/hooks/menu/itemsMap.d.ts +0 -1
- package/dist/ui/Compose/hooks/menu/useMenu.d.ts +7 -7
- package/dist/ui/Compose/hooks/menu/useMenu.js +12 -9
- package/dist/ui/Compose/hooks/menu/useMenu.js.map +1 -1
- package/dist/ui/Compose/hooks/useGenerate.d.ts +0 -1
- package/dist/ui/Compose/hooks/useGenerate.js +41 -20
- package/dist/ui/Compose/hooks/useGenerate.js.map +1 -1
- package/dist/ui/Compose/hooks/useHistory.d.ts +0 -1
- package/dist/ui/Compose/hooks/useHistory.js +2 -2
- package/dist/ui/Compose/hooks/useHistory.js.map +1 -1
- package/dist/ui/Icons/Icons.d.ts +34 -34
- package/dist/ui/Icons/Icons.js +1 -1
- package/dist/ui/Icons/Icons.js.map +1 -1
- package/dist/ui/Icons/LottieAnimation.d.ts +3 -3
- package/dist/ui/Icons/LottieAnimation.js +1 -0
- package/dist/ui/Icons/LottieAnimation.js.map +1 -1
- package/dist/utilities/editorSchemaValidator.d.ts +1 -2
- package/dist/utilities/editorSchemaValidator.js.map +1 -1
- package/dist/utilities/extractImageData.d.ts +0 -1
- package/dist/utilities/extractPromptAttachments.d.ts +2 -0
- package/dist/utilities/extractPromptAttachments.js +32 -0
- package/dist/utilities/extractPromptAttachments.js.map +1 -0
- package/dist/utilities/getFieldBySchemaPath.d.ts +0 -1
- package/dist/utilities/getFieldBySchemaPath.js +12 -4
- package/dist/utilities/getFieldBySchemaPath.js.map +1 -1
- package/dist/utilities/getFieldInfo.d.ts +1 -2
- package/dist/utilities/getGenerationModels.d.ts +1 -2
- package/dist/utilities/isPluginActivated.d.ts +0 -1
- package/dist/utilities/isPluginActivated.js +1 -1
- package/dist/utilities/isPluginActivated.js.map +1 -1
- package/dist/utilities/lexicalToHTML.d.ts +0 -1
- package/dist/utilities/setSafeLexicalState.d.ts +1 -2
- package/dist/utilities/setSafeLexicalState.js.map +1 -1
- package/dist/utilities/updateFieldsConfig.d.ts +0 -1
- package/dist/utilities/updateFieldsConfig.js +10 -3
- package/dist/utilities/updateFieldsConfig.js.map +1 -1
- package/package.json +104 -65
- package/dist/ai/analyse.d.ts.map +0 -1
- package/dist/ai/models/anthropic/generateRichText.d.ts.map +0 -1
- package/dist/ai/models/anthropic/index.d.ts.map +0 -1
- package/dist/ai/models/elevenLabs/generateVoice.d.ts.map +0 -1
- package/dist/ai/models/elevenLabs/index.d.ts.map +0 -1
- package/dist/ai/models/elevenLabs/voices.d.ts.map +0 -1
- package/dist/ai/models/index.d.ts.map +0 -1
- package/dist/ai/models/openai/generateImage.d.ts.map +0 -1
- package/dist/ai/models/openai/generateRichText.d.ts.map +0 -1
- package/dist/ai/models/openai/generateVoice.d.ts.map +0 -1
- package/dist/ai/models/openai/index.d.ts.map +0 -1
- package/dist/ai/models/openai/openai.d.ts.map +0 -1
- package/dist/ai/prompts.d.ts.map +0 -1
- package/dist/ai/schemas/lexicalJsonSchema.d.ts.map +0 -1
- package/dist/ai/utils/editImagesWithOpenAI.d.ts.map +0 -1
- package/dist/ai/utils/filterEditorSchemaByNodes.d.ts.map +0 -1
- package/dist/ai/utils/generateFileNameByPrompt.d.ts.map +0 -1
- package/dist/ai/utils/isObjectSchema.d.ts.map +0 -1
- package/dist/ai/utils/systemGenerate.d.ts.map +0 -1
- package/dist/collections/Instructions.d.ts.map +0 -1
- package/dist/defaults.d.ts.map +0 -1
- package/dist/endpoints/fetchFields.d.ts.map +0 -1
- package/dist/endpoints/index.d.ts.map +0 -1
- package/dist/exports/client.d.ts.map +0 -1
- package/dist/exports/fields.d.ts.map +0 -1
- package/dist/exports/types.d.ts.map +0 -1
- package/dist/fields/ComposeField/ComposeField.d.ts.map +0 -1
- package/dist/fields/LexicalEditor/ComposeFeatureComponent.d.ts.map +0 -1
- package/dist/fields/LexicalEditor/feature.client.d.ts.map +0 -1
- package/dist/fields/LexicalEditor/feature.server.d.ts.map +0 -1
- package/dist/fields/PromptEditorField/PromptEditorField.d.ts.map +0 -1
- package/dist/fields/PromptEditorField/defaultStyle.d.ts.map +0 -1
- package/dist/fields/SelectField/SelectField.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/init.d.ts.map +0 -1
- package/dist/libraries/handlebars/asyncHandlebars.d.ts.map +0 -1
- package/dist/libraries/handlebars/helpers.d.ts.map +0 -1
- package/dist/libraries/handlebars/helpersMap.d.ts.map +0 -1
- package/dist/libraries/handlebars/replacePlaceholders.d.ts.map +0 -1
- package/dist/plugin.d.ts.map +0 -1
- package/dist/providers/FieldProvider/FieldProvider.d.ts.map +0 -1
- package/dist/providers/FieldProvider/useFieldProps.d.ts.map +0 -1
- package/dist/providers/InstructionsProvider/InstructionsProvider.d.ts.map +0 -1
- package/dist/providers/InstructionsProvider/useInstructions.d.ts.map +0 -1
- package/dist/translations/index.d.ts.map +0 -1
- package/dist/types.d.ts.map +0 -1
- package/dist/ui/Compose/Compose.d.ts.map +0 -1
- package/dist/ui/Compose/UndoRedoActions.d.ts.map +0 -1
- package/dist/ui/Compose/hooks/menu/Item.d.ts.map +0 -1
- package/dist/ui/Compose/hooks/menu/TranslateMenu.d.ts.map +0 -1
- package/dist/ui/Compose/hooks/menu/items.d.ts.map +0 -1
- package/dist/ui/Compose/hooks/menu/itemsMap.d.ts.map +0 -1
- package/dist/ui/Compose/hooks/menu/useMenu.d.ts.map +0 -1
- package/dist/ui/Compose/hooks/useGenerate.d.ts.map +0 -1
- package/dist/ui/Compose/hooks/useHistory.d.ts.map +0 -1
- package/dist/ui/Icons/Icons.d.ts.map +0 -1
- package/dist/ui/Icons/LottieAnimation.d.ts.map +0 -1
- package/dist/utilities/editorSchemaValidator.d.ts.map +0 -1
- package/dist/utilities/extractImageData.d.ts.map +0 -1
- package/dist/utilities/getFieldBySchemaPath.d.ts.map +0 -1
- package/dist/utilities/getFieldInfo.d.ts.map +0 -1
- package/dist/utilities/getGenerationModels.d.ts.map +0 -1
- package/dist/utilities/isPluginActivated.d.ts.map +0 -1
- package/dist/utilities/lexicalToHTML.d.ts.map +0 -1
- package/dist/utilities/setSafeLexicalState.d.ts.map +0 -1
- package/dist/utilities/updateFieldsConfig.d.ts.map +0 -1
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Field } from 'payload';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
import type { SerializedPromptField } from '../../types.js';
|
|
4
|
+
export type InstructionsContextValue = {
|
|
5
|
+
activeCollection?: string;
|
|
6
|
+
enabledLanguages?: string[];
|
|
7
|
+
field?: Field;
|
|
8
|
+
instructions: Record<string, any>;
|
|
9
|
+
isConfigAllowed: boolean;
|
|
10
|
+
path?: string;
|
|
11
|
+
promptFields: SerializedPromptField[];
|
|
12
|
+
schemaPath?: unknown;
|
|
13
|
+
setActiveCollection?: React.Dispatch<React.SetStateAction<string>>;
|
|
14
|
+
};
|
|
15
|
+
export declare const initialContext: InstructionsContextValue;
|
|
16
|
+
export declare const InstructionsContext: React.Context<InstructionsContextValue>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createContext } from 'react';
|
|
3
|
+
export const initialContext = {
|
|
4
|
+
field: undefined,
|
|
5
|
+
instructions: {},
|
|
6
|
+
isConfigAllowed: true,
|
|
7
|
+
path: '',
|
|
8
|
+
promptFields: [],
|
|
9
|
+
schemaPath: ''
|
|
10
|
+
};
|
|
11
|
+
export const InstructionsContext = createContext(initialContext);
|
|
12
|
+
|
|
13
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/InstructionsProvider/context.ts"],"sourcesContent":["'use client'\n\nimport type { Field } from 'payload'\nimport type React from 'react';\n\nimport { createContext } from 'react'\n\nimport type { SerializedPromptField } from '../../types.js'\n\nexport type InstructionsContextValue = {\n activeCollection?: string\n enabledLanguages?: string[]\n field?: Field\n instructions: Record<string, any>\n isConfigAllowed: boolean\n path?: string\n promptFields: SerializedPromptField[]\n schemaPath?: unknown\n setActiveCollection?: React.Dispatch<React.SetStateAction<string>>\n}\n\nexport const initialContext: InstructionsContextValue = {\n field: undefined,\n instructions: {},\n isConfigAllowed: true,\n path: '',\n promptFields: [],\n schemaPath: '',\n}\n\nexport const InstructionsContext = createContext<InstructionsContextValue>(initialContext)\n"],"names":["createContext","initialContext","field","undefined","instructions","isConfigAllowed","path","promptFields","schemaPath","InstructionsContext"],"mappings":"AAAA;AAKA,SAASA,aAAa,QAAQ,QAAO;AAgBrC,OAAO,MAAMC,iBAA2C;IACtDC,OAAOC;IACPC,cAAc,CAAC;IACfC,iBAAiB;IACjBC,MAAM;IACNC,cAAc,EAAE;IAChBC,YAAY;AACd,EAAC;AAED,OAAO,MAAMC,sBAAsBT,cAAwCC,gBAAe"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
+
import { InstructionsContext } from '@ai-stack/payloadcms/client';
|
|
1
2
|
import { useDocumentInfo } from '@payloadcms/ui';
|
|
2
3
|
import { useContext, useEffect, useMemo, useState } from 'react';
|
|
3
4
|
import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
|
|
4
5
|
import { handlebarsHelpers, handlebarsHelpersMap } from '../../libraries/handlebars/helpersMap.js';
|
|
5
|
-
import { InstructionsContext } from './InstructionsProvider.js';
|
|
6
6
|
export const useInstructions = (update = {})=>{
|
|
7
7
|
const context = useContext(InstructionsContext);
|
|
8
8
|
const { collectionSlug } = useDocumentInfo();
|
|
9
|
-
const { activeCollection, instructions, setActiveCollection } = context;
|
|
9
|
+
const { activeCollection, instructions, promptFields, setActiveCollection } = context;
|
|
10
10
|
const [schemaPath, setSchemaPath] = useState(update.schemaPath);
|
|
11
11
|
useEffect(()=>{
|
|
12
12
|
if (update.schemaPath !== schemaPath) {
|
|
13
|
-
setSchemaPath(update.schemaPath);
|
|
13
|
+
setSchemaPath(update.schemaPath ?? '');
|
|
14
14
|
}
|
|
15
15
|
}, [
|
|
16
16
|
update.schemaPath
|
|
17
17
|
]);
|
|
18
18
|
useEffect(()=>{
|
|
19
|
-
if (activeCollection !== collectionSlug && collectionSlug !== PLUGIN_INSTRUCTIONS_TABLE) {
|
|
20
|
-
setActiveCollection(collectionSlug);
|
|
19
|
+
if (activeCollection !== collectionSlug && collectionSlug !== PLUGIN_INSTRUCTIONS_TABLE && typeof setActiveCollection === 'function') {
|
|
20
|
+
setActiveCollection(collectionSlug ?? '');
|
|
21
21
|
}
|
|
22
22
|
}, [
|
|
23
23
|
activeCollection,
|
|
@@ -29,7 +29,9 @@ export const useInstructions = (update = {})=>{
|
|
|
29
29
|
for (const fullKey of Object.keys(instructions)){
|
|
30
30
|
const [collection, ...pathParts] = fullKey.split('.');
|
|
31
31
|
const path = pathParts.join('.');
|
|
32
|
-
if (!result[collection])
|
|
32
|
+
if (!result[collection]) {
|
|
33
|
+
result[collection] = [];
|
|
34
|
+
}
|
|
33
35
|
result[collection].push(path);
|
|
34
36
|
}
|
|
35
37
|
return result;
|
|
@@ -39,28 +41,40 @@ export const useInstructions = (update = {})=>{
|
|
|
39
41
|
// Suggestions for prompt editor
|
|
40
42
|
const promptEditorSuggestions = useMemo(()=>{
|
|
41
43
|
const activeFields = groupedFields[activeCollection] || [];
|
|
42
|
-
|
|
44
|
+
const suggestions = [];
|
|
45
|
+
activeFields.forEach((f)=>{
|
|
43
46
|
const fieldKey = Object.keys(instructions).find((k)=>k.endsWith(f));
|
|
44
|
-
const fieldInfo = instructions[fieldKey];
|
|
45
|
-
if (!fieldInfo)
|
|
47
|
+
const fieldInfo = fieldKey ? instructions[fieldKey] : undefined;
|
|
48
|
+
if (!fieldInfo) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
46
51
|
if (fieldInfo.fieldType === 'upload') {
|
|
47
|
-
|
|
48
|
-
return
|
|
52
|
+
suggestions.push(`${f}.url`);
|
|
53
|
+
return;
|
|
49
54
|
}
|
|
50
55
|
const helpers = handlebarsHelpers.filter((h)=>handlebarsHelpersMap[h]?.field === fieldInfo.fieldType);
|
|
51
56
|
if (helpers.length) {
|
|
52
57
|
for (const helper of helpers){
|
|
53
|
-
|
|
58
|
+
suggestions.push(`${helper} ${f}`);
|
|
54
59
|
}
|
|
55
60
|
} else {
|
|
56
|
-
|
|
61
|
+
suggestions.push(f);
|
|
57
62
|
}
|
|
58
|
-
return acc;
|
|
59
63
|
}, []);
|
|
64
|
+
promptFields.forEach(({ name, collections })=>{
|
|
65
|
+
if (!activeCollection) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
if (!collections || collections.includes(activeCollection)) {
|
|
69
|
+
suggestions.push(name);
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
return suggestions;
|
|
60
73
|
}, [
|
|
61
74
|
groupedFields,
|
|
62
75
|
activeCollection,
|
|
63
|
-
instructions
|
|
76
|
+
instructions,
|
|
77
|
+
promptFields
|
|
64
78
|
]);
|
|
65
79
|
return {
|
|
66
80
|
...context,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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'\
|
|
1
|
+
{"version":3,"sources":["../../../src/providers/InstructionsProvider/useInstructions.ts"],"sourcesContent":["import { InstructionsContext } from '@ai-stack/payloadcms/client'\nimport { 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'\n\nexport const useInstructions = (\n update: {\n schemaPath?: unknown\n } = {},\n) => {\n const context = useContext(InstructionsContext)\n const { collectionSlug } = useDocumentInfo()\n const { activeCollection, instructions, promptFields, 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 (\n activeCollection !== collectionSlug &&\n collectionSlug !== PLUGIN_INSTRUCTIONS_TABLE &&\n typeof setActiveCollection === 'function'\n ) {\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]) {\n result[collection] = []\n }\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 as string] || []\n\n const suggestions: string[] = []\n\n activeFields.forEach((f) => {\n const fieldKey = Object.keys(instructions).find((k) => k.endsWith(f))\n const fieldInfo = fieldKey ? instructions[fieldKey] : undefined\n\n if (!fieldInfo) {return}\n\n if (fieldInfo.fieldType === 'upload') {\n suggestions.push(`${f}.url`)\n return\n }\n\n const helpers = handlebarsHelpers.filter(\n (h) => (handlebarsHelpersMap as Record<string, any>)[h]?.field === fieldInfo.fieldType,\n )\n\n if (helpers.length) {\n for (const helper of helpers) {\n suggestions.push(`${helper} ${f}`)\n }\n } else {\n suggestions.push(f)\n }\n }, [])\n\n promptFields.forEach(({ name, collections }) => {\n if (!activeCollection) {return}\n\n if (!collections || collections.includes(activeCollection)) {\n suggestions.push(name)\n }\n })\n\n return suggestions\n }, [groupedFields, activeCollection, instructions, promptFields])\n\n return {\n ...context,\n ...(instructions[schemaPath] || {}),\n promptEditorSuggestions,\n }\n}\n"],"names":["InstructionsContext","useDocumentInfo","useContext","useEffect","useMemo","useState","PLUGIN_INSTRUCTIONS_TABLE","handlebarsHelpers","handlebarsHelpersMap","useInstructions","update","context","collectionSlug","activeCollection","instructions","promptFields","setActiveCollection","schemaPath","setSchemaPath","groupedFields","result","fullKey","Object","keys","collection","pathParts","split","path","join","push","promptEditorSuggestions","activeFields","suggestions","forEach","f","fieldKey","find","k","endsWith","fieldInfo","undefined","fieldType","helpers","filter","h","field","length","helper","name","collections","includes"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,8BAA6B;AACjE,SAASC,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;AAElG,OAAO,MAAMC,kBAAkB,CAC7BC,SAEI,CAAC,CAAC;IAEN,MAAMC,UAAUT,WAAWF;IAC3B,MAAM,EAAEY,cAAc,EAAE,GAAGX;IAC3B,MAAM,EAAEY,gBAAgB,EAAEC,YAAY,EAAEC,YAAY,EAAEC,mBAAmB,EAAE,GAAGL;IAE9E,MAAM,CAACM,YAAYC,cAAc,GAAGb,SAASK,OAAOO,UAAU;IAE9Dd,UAAU;QACR,IAAIO,OAAOO,UAAU,KAAKA,YAAY;YACpCC,cAAc,AAACR,OAAOO,UAAU,IAAe;QACjD;IACF,GAAG;QAACP,OAAOO,UAAU;KAAC;IAEtBd,UAAU;QACR,IACEU,qBAAqBD,kBACrBA,mBAAmBN,6BACnB,OAAOU,wBAAwB,YAC/B;YACAA,oBAAoBJ,kBAAkB;QACxC;IACF,GAAG;QAACC;QAAkBD;QAAgBI;KAAoB;IAE1D,MAAMG,gBAAgBf,QAAQ;QAC5B,MAAMgB,SAAmC,CAAC;QAE1C,KAAK,MAAMC,WAAWC,OAAOC,IAAI,CAACT,cAAe;YAC/C,MAAM,CAACU,YAAY,GAAGC,UAAU,GAAGJ,QAAQK,KAAK,CAAC;YACjD,MAAMC,OAAOF,UAAUG,IAAI,CAAC;YAC5B,IAAI,CAACR,MAAM,CAACI,WAAW,EAAE;gBACvBJ,MAAM,CAACI,WAAW,GAAG,EAAE;YACzB;YACAJ,MAAM,CAACI,WAAW,CAACK,IAAI,CAACF;QAC1B;QAEA,OAAOP;IACT,GAAG;QAACN;KAAa;IAEjB,gCAAgC;IAChC,MAAMgB,0BAA0B1B,QAAQ;QACtC,MAAM2B,eAAeZ,aAAa,CAACN,iBAA2B,IAAI,EAAE;QAEpE,MAAMmB,cAAwB,EAAE;QAEhCD,aAAaE,OAAO,CAAC,CAACC;YACpB,MAAMC,WAAWb,OAAOC,IAAI,CAACT,cAAcsB,IAAI,CAAC,CAACC,IAAMA,EAAEC,QAAQ,CAACJ;YAClE,MAAMK,YAAYJ,WAAWrB,YAAY,CAACqB,SAAS,GAAGK;YAEtD,IAAI,CAACD,WAAW;gBAAC;YAAM;YAEvB,IAAIA,UAAUE,SAAS,KAAK,UAAU;gBACpCT,YAAYH,IAAI,CAAC,GAAGK,EAAE,IAAI,CAAC;gBAC3B;YACF;YAEA,MAAMQ,UAAUnC,kBAAkBoC,MAAM,CACtC,CAACC,IAAM,AAACpC,oBAA4C,CAACoC,EAAE,EAAEC,UAAUN,UAAUE,SAAS;YAGxF,IAAIC,QAAQI,MAAM,EAAE;gBAClB,KAAK,MAAMC,UAAUL,QAAS;oBAC5BV,YAAYH,IAAI,CAAC,GAAGkB,OAAO,CAAC,EAAEb,GAAG;gBACnC;YACF,OAAO;gBACLF,YAAYH,IAAI,CAACK;YACnB;QACF,GAAG,EAAE;QAELnB,aAAakB,OAAO,CAAC,CAAC,EAAEe,IAAI,EAAEC,WAAW,EAAE;YACzC,IAAI,CAACpC,kBAAkB;gBAAC;YAAM;YAE9B,IAAI,CAACoC,eAAeA,YAAYC,QAAQ,CAACrC,mBAAmB;gBAC1DmB,YAAYH,IAAI,CAACmB;YACnB;QACF;QAEA,OAAOhB;IACT,GAAG;QAACb;QAAeN;QAAkBC;QAAcC;KAAa;IAEhE,OAAO;QACL,GAAGJ,OAAO;QACV,GAAIG,YAAY,CAACG,WAAW,IAAI,CAAC,CAAC;QAClCa;IACF;AACF,EAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/types/handlebars-async-helpers.d.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/types/handlebars-dist-handlebars.d.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/types/react-mentions.d.ts"],"names":[],"mappings":""}
|
package/dist/types.d.ts
CHANGED
|
@@ -57,6 +57,19 @@ export interface PluginConfig {
|
|
|
57
57
|
interfaceName?: string;
|
|
58
58
|
mediaUpload?: PluginConfigMediaUploadFunction;
|
|
59
59
|
options?: PluginOptions;
|
|
60
|
+
promptFields?: PromptField[];
|
|
61
|
+
/**
|
|
62
|
+
* Custom action prompts for AI text generation
|
|
63
|
+
* If not provided, uses default prompts
|
|
64
|
+
* You can access default prompts by importing { defaultPrompts } from '@ai-stack/payloadcms'
|
|
65
|
+
*/
|
|
66
|
+
prompts?: ActionPrompt[];
|
|
67
|
+
/**
|
|
68
|
+
* Custom seed prompt function for generating field-specific prompts
|
|
69
|
+
* If not provided, uses default seed prompt function
|
|
70
|
+
* You can access default seed prompts by importing { defaultSeedPrompts } from '@ai-stack/payloadcms'
|
|
71
|
+
*/
|
|
72
|
+
seedPrompts?: SeedPromptFunction;
|
|
60
73
|
uploadCollectionSlug?: CollectionSlug;
|
|
61
74
|
}
|
|
62
75
|
export interface GenerationModel {
|
|
@@ -85,6 +98,27 @@ export interface Endpoints {
|
|
|
85
98
|
upload: Omit<Endpoint, 'root'>;
|
|
86
99
|
}
|
|
87
100
|
export type ActionMenuItems = 'Compose' | 'Expand' | 'Proofread' | 'Rephrase' | 'Settings' | 'Simplify' | 'Summarize' | 'Tone' | 'Translate';
|
|
101
|
+
export type ActionPromptOptions = {
|
|
102
|
+
layout?: string;
|
|
103
|
+
locale?: string;
|
|
104
|
+
prompt?: string;
|
|
105
|
+
systemPrompt?: string;
|
|
106
|
+
};
|
|
107
|
+
export type ActionPrompt = {
|
|
108
|
+
layout?: (options?: ActionPromptOptions) => string;
|
|
109
|
+
name: ActionMenuItems;
|
|
110
|
+
system: (options: ActionPromptOptions) => string;
|
|
111
|
+
};
|
|
112
|
+
export type SeedPromptOptions = {
|
|
113
|
+
fieldLabel: string;
|
|
114
|
+
fieldSchemaPaths: Record<string, any>;
|
|
115
|
+
fieldType: string;
|
|
116
|
+
path: string;
|
|
117
|
+
};
|
|
118
|
+
export type SeedPromptFunction = (options: SeedPromptOptions) => {
|
|
119
|
+
prompt: string;
|
|
120
|
+
system: string;
|
|
121
|
+
};
|
|
88
122
|
export type ActionMenuEvents = 'onCompose' | 'onExpand' | 'onProofread' | 'onRephrase' | 'onSettings' | 'onSimplify' | 'onSummarize' | 'onTone' | 'onTranslate';
|
|
89
123
|
export type UseMenuEvents = {
|
|
90
124
|
[key in ActionMenuEvents]?: (data?: unknown) => void;
|
|
@@ -117,4 +151,14 @@ export type GenerateImageParams = {
|
|
|
117
151
|
style?: ImageGenerateParams['style'];
|
|
118
152
|
version?: ImageGenerateParams['model'];
|
|
119
153
|
};
|
|
120
|
-
|
|
154
|
+
export type SerializedPromptField = {
|
|
155
|
+
collections?: (CollectionSlug)[];
|
|
156
|
+
name: string;
|
|
157
|
+
};
|
|
158
|
+
export type PromptFieldGetterContext = {
|
|
159
|
+
collection: CollectionSlug;
|
|
160
|
+
type: string;
|
|
161
|
+
};
|
|
162
|
+
export type PromptField = {
|
|
163
|
+
getter?: (data: object, ctx: PromptFieldGetterContext) => Promise<string> | string;
|
|
164
|
+
} & SerializedPromptField;
|
package/dist/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { JSONSchema } from 'openai/lib/jsonschema'\nimport type { ImageGenerateParams } from 'openai/resources/images'\nimport type {\n CollectionSlug,\n DataFromCollectionSlug,\n Endpoint,\n Field,\n File,\n GlobalConfig,\n GroupField,\n PayloadRequest,\n} from 'payload'\nimport type { CSSProperties, MouseEventHandler } from 'react'\n\nexport interface PluginConfigAccess {\n /**\n * Control access to AI generation features (generate text, images, audio)\n * @default () => !!req.user (requires authentication)\n */\n generate?: ({ req }: { req: PayloadRequest }) => Promise<boolean> | boolean\n /**\n * Control access to AI settings/configuration\n * @default () => !!req.user (requires authentication)\n */\n settings?: ({ req }: { req: PayloadRequest }) => Promise<boolean> | boolean\n}\n\nexport interface PluginOptions {\n
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { JSONSchema } from 'openai/lib/jsonschema'\nimport type { ImageGenerateParams } from 'openai/resources/images'\nimport type {\n CollectionSlug,\n DataFromCollectionSlug,\n Endpoint,\n Field,\n File,\n GlobalConfig,\n GroupField,\n PayloadRequest,\n} from 'payload'\nimport type { CSSProperties, MouseEventHandler } from 'react'\n\nexport interface PluginConfigAccess {\n /**\n * Control access to AI generation features (generate text, images, audio)\n * @default () => !!req.user (requires authentication)\n */\n generate?: ({ req }: { req: PayloadRequest }) => Promise<boolean> | boolean\n /**\n * Control access to AI settings/configuration\n * @default () => !!req.user (requires authentication)\n */\n settings?: ({ req }: { req: PayloadRequest }) => Promise<boolean> | boolean\n}\n\nexport interface PluginOptions {\n /**\n * Provide local tags to filter language options from the Translate Menu\n * Check for the available local tags,\n * visit: https://www.npmjs.com/package/locale-codes\n * Example: [\"en-US\", \"zh-SG\", \"zh-CN\", \"en\"]\n */\n enabledLanguages?: string[]\n}\n\nexport type PluginConfigMediaUploadFunction = (\n result: { data: Record<any, any>; file: File },\n {\n collection,\n request,\n }: {\n collection: CollectionSlug\n request: PayloadRequest\n },\n) => Promise<DataFromCollectionSlug<CollectionSlug>>\n\nexport interface PluginConfig {\n /**\n * Access control configuration for AI features\n * By default, all AI features require authentication\n */\n access?: PluginConfigAccess\n collections: {\n [key: CollectionSlug]: boolean\n }\n debugging?: boolean\n disableSponsorMessage?: boolean\n editorConfig?: { nodes: JSONSchema[] }\n fields?: Field[]\n generatePromptOnInit?: boolean\n generationModels?: ((defaultModels: GenerationModel[]) => GenerationModel[]) | GenerationModel[]\n globals?: {\n [key: GlobalConfig['slug']]: boolean\n }\n interfaceName?: string\n mediaUpload?: PluginConfigMediaUploadFunction\n options?: PluginOptions\n promptFields?: PromptField[]\n /**\n * Custom action prompts for AI text generation\n * If not provided, uses default prompts\n * You can access default prompts by importing { defaultPrompts } from '@ai-stack/payloadcms'\n */\n prompts?: ActionPrompt[]\n /**\n * Custom seed prompt function for generating field-specific prompts\n * If not provided, uses default seed prompt function\n * You can access default seed prompts by importing { defaultSeedPrompts } from '@ai-stack/payloadcms'\n */\n seedPrompts?: SeedPromptFunction\n uploadCollectionSlug?: CollectionSlug\n}\n\nexport interface GenerationModel {\n fields: string[]\n generateText?: (prompt: string, system: string) => Promise<string>\n handler?: (prompt: string, options: any) => Promise<any> | Response\n id: string\n name: string\n output: 'audio' | 'file' | 'image' | 'json' | 'text' | 'video'\n settings?: GroupField\n supportsPromptOptimization?: boolean\n}\n\nexport interface GenerationConfig {\n models: GenerationModel[]\n provider: string\n}\n\nexport type GenerateTextarea<T = any> = (args: {\n collectionSlug: CollectionSlug\n doc: T\n documentId?: number | string\n locale?: string\n options?: any\n}) => Promise<string> | string\n\nexport interface Endpoints {\n textarea: Omit<Endpoint, 'root'>\n upload: Omit<Endpoint, 'root'>\n}\n\nexport type ActionMenuItems =\n | 'Compose'\n | 'Expand'\n | 'Proofread'\n | 'Rephrase'\n | 'Settings'\n | 'Simplify'\n | 'Summarize'\n | 'Tone'\n | 'Translate'\n\nexport type ActionPromptOptions = {\n layout?: string\n locale?: string\n prompt?: string\n systemPrompt?: string\n}\n\nexport type ActionPrompt = {\n layout?: (options?: ActionPromptOptions) => string\n name: ActionMenuItems\n system: (options: ActionPromptOptions) => string\n}\n\nexport type SeedPromptOptions = {\n fieldLabel: string\n fieldSchemaPaths: Record<string, any>\n fieldType: string\n path: string\n}\n\nexport type SeedPromptFunction = (options: SeedPromptOptions) => {\n prompt: string\n system: string\n}\n\nexport type ActionMenuEvents =\n | 'onCompose'\n | 'onExpand'\n | 'onProofread'\n | 'onRephrase'\n | 'onSettings'\n | 'onSimplify'\n | 'onSummarize'\n | 'onTone'\n | 'onTranslate'\n\nexport type UseMenuEvents = {\n [key in ActionMenuEvents]?: (data?: unknown) => void\n}\n\nexport type UseMenuOptions = {\n isConfigAllowed: boolean\n}\n\nexport type BaseItemProps<T = any> = {\n children?: React.ReactNode\n disabled?: boolean\n hideIcon?: boolean\n isActive?: boolean\n isMenu?: boolean\n onClick: (data?: unknown) => void\n onMouseEnter?: MouseEventHandler<T> | undefined\n onMouseLeave?: MouseEventHandler<T> | undefined\n style?: CSSProperties | undefined\n title?: string\n}\n\nexport type ImageReference = {\n data: Blob\n name: string\n size: number\n type: string\n url: string\n}\n\nexport type GenerateImageParams = {\n images?: ImageReference[]\n size?: ImageGenerateParams['size']\n style?: ImageGenerateParams['style']\n version?: ImageGenerateParams['model']\n}\n\nexport type SerializedPromptField = {\n collections?: (CollectionSlug)[]\n name: string\n}\n\nexport type PromptFieldGetterContext = {\n collection: CollectionSlug\n type: string\n}\n\nexport type PromptField = {\n // If not provided, the value will be returned from the data object as-is\n getter?: (data: object, ctx: PromptFieldGetterContext) => Promise<string> | string\n} & SerializedPromptField\n"],"names":[],"mappings":"AA+MA,WAGyB"}
|
|
@@ -6,10 +6,10 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
|
6
6
|
import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
|
|
7
7
|
import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
|
|
8
8
|
import { PluginIcon } from '../Icons/Icons.js';
|
|
9
|
-
import { UndoRedoActions } from './UndoRedoActions.js';
|
|
10
9
|
import styles from './compose.module.css';
|
|
11
10
|
import { useMenu } from './hooks/menu/useMenu.js';
|
|
12
11
|
import { useGenerate } from './hooks/useGenerate.js';
|
|
12
|
+
import { UndoRedoActions } from './UndoRedoActions.js';
|
|
13
13
|
function findParentWithClass(element, className) {
|
|
14
14
|
// Base case: if the element is null, or we've reached the top of the DOM
|
|
15
15
|
if (!element || element === document.body) {
|
|
@@ -27,32 +27,42 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
|
|
|
27
27
|
id: instructionId,
|
|
28
28
|
collectionSlug: PLUGIN_INSTRUCTIONS_TABLE
|
|
29
29
|
});
|
|
30
|
-
const
|
|
30
|
+
const fieldType = descriptionProps?.field?.type;
|
|
31
|
+
const pathFromContext = descriptionProps?.path;
|
|
32
|
+
const schemaPath = descriptionProps?.schemaPath;
|
|
31
33
|
const { editor: lexicalEditor, editorContainerRef } = useEditorConfigContext();
|
|
32
34
|
// The below snippet is used to show/hide the action menu on AI-enabled fields
|
|
33
35
|
const [input, setInput] = useState(null);
|
|
34
36
|
const actionsRef = useRef(null);
|
|
35
37
|
// Set input element for current field
|
|
36
38
|
useEffect(()=>{
|
|
37
|
-
if (!actionsRef.current)
|
|
39
|
+
if (!actionsRef.current) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
if (!pathFromContext) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
38
45
|
const fieldId = `field-${pathFromContext.replace(/\./g, '__')}`;
|
|
39
46
|
const inputElement = document.getElementById(fieldId);
|
|
40
47
|
if (!inputElement && fieldType === 'richText') {
|
|
41
48
|
setInput(editorContainerRef.current);
|
|
42
49
|
} else {
|
|
43
|
-
actionsRef.current
|
|
50
|
+
actionsRef.current?.setAttribute('for', fieldId);
|
|
44
51
|
setInput(inputElement);
|
|
45
52
|
}
|
|
46
53
|
}, [
|
|
47
54
|
pathFromContext,
|
|
48
55
|
schemaPath,
|
|
49
56
|
actionsRef,
|
|
50
|
-
editorContainerRef
|
|
57
|
+
editorContainerRef,
|
|
58
|
+
fieldType
|
|
51
59
|
]);
|
|
52
60
|
// Show or hide actions menu on field
|
|
53
61
|
useEffect(()=>{
|
|
54
|
-
if (!input || !actionsRef.current)
|
|
55
|
-
|
|
62
|
+
if (!input || !actionsRef.current) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
actionsRef.current?.classList.add(styles.actions_hidden);
|
|
56
66
|
// Create the handler function
|
|
57
67
|
const clickHandler = (event)=>{
|
|
58
68
|
document.querySelectorAll('.ai-plugin-active')?.forEach((element)=>{
|
|
@@ -62,17 +72,17 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
|
|
|
62
72
|
element.classList.remove('ai-plugin-active');
|
|
63
73
|
}
|
|
64
74
|
});
|
|
65
|
-
actionsRef.current
|
|
75
|
+
actionsRef.current?.classList.remove(styles.actions_hidden);
|
|
66
76
|
const parentWithClass = findParentWithClass(event.target, 'field-type');
|
|
67
77
|
if (parentWithClass) {
|
|
68
78
|
parentWithClass.classList.add('ai-plugin-active');
|
|
69
79
|
}
|
|
70
80
|
};
|
|
71
81
|
// Add the event listener
|
|
72
|
-
input
|
|
82
|
+
input?.addEventListener('click', clickHandler);
|
|
73
83
|
// Clean up the event listener when the component unmounts or input changes
|
|
74
84
|
return ()=>{
|
|
75
|
-
input
|
|
85
|
+
input?.removeEventListener('click', clickHandler);
|
|
76
86
|
};
|
|
77
87
|
}, [
|
|
78
88
|
input,
|
|
@@ -83,51 +93,77 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
|
|
|
83
93
|
instructionId
|
|
84
94
|
});
|
|
85
95
|
const { ActiveComponent, Menu } = useMenu({
|
|
86
|
-
onCompose:
|
|
96
|
+
onCompose: ()=>{
|
|
87
97
|
console.log('Composing...');
|
|
88
98
|
setIsProcessing(true);
|
|
89
|
-
|
|
99
|
+
generate({
|
|
90
100
|
action: 'Compose'
|
|
101
|
+
}).catch((reason)=>{
|
|
102
|
+
console.error("Compose : ", reason);
|
|
91
103
|
}).finally(()=>{
|
|
92
104
|
setIsProcessing(false);
|
|
93
105
|
});
|
|
94
106
|
},
|
|
95
|
-
onExpand:
|
|
107
|
+
onExpand: ()=>{
|
|
96
108
|
console.log('Expanding...');
|
|
97
|
-
|
|
109
|
+
generate({
|
|
98
110
|
action: 'Expand'
|
|
111
|
+
}).catch((reason)=>{
|
|
112
|
+
console.error("Compose : ", reason);
|
|
113
|
+
}).finally(()=>{
|
|
114
|
+
setIsProcessing(false);
|
|
99
115
|
});
|
|
100
116
|
},
|
|
101
|
-
onProofread:
|
|
117
|
+
onProofread: ()=>{
|
|
102
118
|
console.log('Proofreading...');
|
|
103
|
-
|
|
119
|
+
generate({
|
|
104
120
|
action: 'Proofread'
|
|
121
|
+
}).catch((reason)=>{
|
|
122
|
+
console.error("Compose : ", reason);
|
|
123
|
+
}).finally(()=>{
|
|
124
|
+
setIsProcessing(false);
|
|
105
125
|
});
|
|
106
126
|
},
|
|
107
|
-
onRephrase:
|
|
127
|
+
onRephrase: ()=>{
|
|
108
128
|
console.log('Rephrasing...');
|
|
109
|
-
|
|
129
|
+
generate({
|
|
110
130
|
action: 'Rephrase'
|
|
131
|
+
}).catch((reason)=>{
|
|
132
|
+
console.error("Compose : ", reason);
|
|
133
|
+
}).finally(()=>{
|
|
134
|
+
setIsProcessing(false);
|
|
111
135
|
});
|
|
112
136
|
},
|
|
113
137
|
onSettings: isConfigAllowed ? openDrawer : undefined,
|
|
114
|
-
onSimplify:
|
|
138
|
+
onSimplify: ()=>{
|
|
115
139
|
console.log('Simplifying...');
|
|
116
|
-
|
|
140
|
+
generate({
|
|
117
141
|
action: 'Simplify'
|
|
142
|
+
}).catch((reason)=>{
|
|
143
|
+
console.error("Compose : ", reason);
|
|
144
|
+
}).finally(()=>{
|
|
145
|
+
setIsProcessing(false);
|
|
118
146
|
});
|
|
119
147
|
},
|
|
120
|
-
onSummarize:
|
|
148
|
+
onSummarize: ()=>{
|
|
121
149
|
console.log('Summarizing...');
|
|
122
|
-
|
|
150
|
+
generate({
|
|
123
151
|
action: 'Summarize'
|
|
152
|
+
}).catch((reason)=>{
|
|
153
|
+
console.error("Compose : ", reason);
|
|
154
|
+
}).finally(()=>{
|
|
155
|
+
setIsProcessing(false);
|
|
124
156
|
});
|
|
125
157
|
},
|
|
126
|
-
onTranslate:
|
|
158
|
+
onTranslate: (data)=>{
|
|
127
159
|
console.log('Translating...');
|
|
128
|
-
|
|
160
|
+
generate({
|
|
129
161
|
action: 'Translate',
|
|
130
162
|
params: data
|
|
163
|
+
}).catch((reason)=>{
|
|
164
|
+
console.error("Compose : ", reason);
|
|
165
|
+
}).finally(()=>{
|
|
166
|
+
setIsProcessing(false);
|
|
131
167
|
});
|
|
132
168
|
}
|
|
133
169
|
}, {
|
|
@@ -137,7 +173,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
|
|
|
137
173
|
path: pathFromContext
|
|
138
174
|
});
|
|
139
175
|
const setIfValueIsLexicalState = useCallback((val)=>{
|
|
140
|
-
if (val
|
|
176
|
+
if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {
|
|
141
177
|
setSafeLexicalState(JSON.stringify(val), lexicalEditor);
|
|
142
178
|
}
|
|
143
179
|
// DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { FieldDescription, Popup, useDocumentDrawer, useField } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\nimport styles from './compose.module.css'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useGenerate } from './hooks/useGenerate.js'\n\nfunction findParentWithClass(element, className) {\n // Base case: if the element is null, or we've reached the top of the DOM\n if (!element || element === document.body) {\n return null\n }\n\n // Check if the current element has the class we're looking for\n if (element.classList.contains(className)) {\n return element\n }\n\n // Recursively call the function on the parent element\n return findParentWithClass(element.parentElement, className)\n}\n\ntype ComposeProps = {\n descriptionProps?: {\n field: ClientField\n path: string\n schemaPath: string\n }\n instructionId: string\n isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, instructionId, isConfigAllowed }) => {\n const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({\n id: instructionId,\n collectionSlug: PLUGIN_INSTRUCTIONS_TABLE,\n })\n\n const {\n field: { type: fieldType },\n path: pathFromContext,\n schemaPath,\n } = descriptionProps || {}\n const { editor: lexicalEditor, editorContainerRef } = useEditorConfigContext()\n\n // The below snippet is used to show/hide the action menu on AI-enabled fields\n const [input, setInput] = useState(null)\n const actionsRef = useRef(null)\n\n // Set input element for current field\n useEffect(() => {\n if (!actionsRef.current) return\n\n const fieldId = `field-${pathFromContext.replace(/\\./g, '__')}`\n const inputElement = document.getElementById(fieldId)\n\n if (!inputElement && fieldType === 'richText') {\n setInput(editorContainerRef.current)\n } else {\n actionsRef.current.setAttribute('for', fieldId)\n setInput(inputElement)\n }\n }, [pathFromContext, schemaPath, actionsRef, editorContainerRef])\n\n // Show or hide actions menu on field\n useEffect(() => {\n if (!input || !actionsRef.current) return\n\n actionsRef.current.classList.add(styles.actions_hidden)\n\n // Create the handler function\n const clickHandler = (event) => {\n document.querySelectorAll('.ai-plugin-active')?.forEach((element) => {\n const actionElement = element.querySelector(`.${styles.actions}`)\n if (actionElement) {\n actionElement.classList.add(styles.actions_hidden)\n element.classList.remove('ai-plugin-active')\n }\n })\n\n actionsRef.current.classList.remove(styles.actions_hidden)\n const parentWithClass = findParentWithClass(event.target, 'field-type')\n if (parentWithClass) {\n parentWithClass.classList.add('ai-plugin-active')\n }\n }\n\n // Add the event listener\n input.addEventListener('click', clickHandler)\n\n // Clean up the event listener when the component unmounts or input changes\n return () => {\n input.removeEventListener('click', clickHandler)\n }\n }, [input, actionsRef])\n\n const [isProcessing, setIsProcessing] = useState(false)\n const { generate, isLoading, stop } = useGenerate({ instructionId })\n\n const { ActiveComponent, Menu } = useMenu({\n onCompose: async () => {\n console.log('Composing...')\n setIsProcessing(true)\n await generate({\n action: 'Compose',\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n onExpand: async () => {\n console.log('Expanding...')\n await generate({\n action: 'Expand',\n })\n },\n onProofread: async () => {\n console.log('Proofreading...')\n await generate({\n action: 'Proofread',\n })\n },\n onRephrase: async () => {\n console.log('Rephrasing...')\n await generate({\n action: 'Rephrase',\n })\n },\n onSettings: isConfigAllowed ? openDrawer : undefined,\n onSimplify: async () => {\n console.log('Simplifying...')\n await generate({\n action: 'Simplify',\n })\n },\n onSummarize: async () => {\n console.log('Summarizing...')\n await generate({\n action: 'Summarize',\n })\n },\n onTranslate: async (data) => {\n console.log('Translating...')\n await generate({\n action: 'Translate',\n params: data,\n })\n },\n },{\n isConfigAllowed\n })\n\n const { setValue } = useField<string>({\n path: pathFromContext,\n })\n\n const setIfValueIsLexicalState = useCallback((val: any) => {\n if (val.root && lexicalEditor) {\n setSafeLexicalState(JSON.stringify(val), lexicalEditor)\n }\n\n // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo\n }, [])\n\n const popupRender = useCallback(\n ({ close }) => {\n return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n },\n [isProcessing, isLoading, Menu],\n )\n\n const memoizedPopup = useMemo(() => {\n return (\n <Popup\n button={<PluginIcon isLoading={isProcessing || isLoading} />}\n render={popupRender}\n verticalAlign=\"bottom\"\n />\n )\n }, [popupRender, isProcessing, isLoading])\n\n return (\n <React.Fragment>\n <label\n className={`${styles.actions}`}\n onClick={(e) => e.preventDefault()}\n ref={actionsRef}\n role=\"presentation\"\n >\n <DocumentDrawer\n onSave={() => {\n closeDrawer()\n }}\n />\n {memoizedPopup}\n <ActiveComponent isLoading={isProcessing || isLoading} stop={stop} />\n <UndoRedoActions\n onChange={(val) => {\n setValue(val)\n setIfValueIsLexicalState(val)\n }}\n />\n </label>\n {/*Render the incoming description field*/}\n {descriptionProps ? (\n <div>\n <FieldDescription {...descriptionProps} />\n </div>\n ) : null}\n </React.Fragment>\n )\n}\n"],"names":["useEditorConfigContext","FieldDescription","Popup","useDocumentDrawer","useField","React","useCallback","useEffect","useMemo","useRef","useState","PLUGIN_INSTRUCTIONS_TABLE","setSafeLexicalState","PluginIcon","UndoRedoActions","styles","useMenu","useGenerate","findParentWithClass","element","className","document","body","classList","contains","parentElement","Compose","descriptionProps","instructionId","isConfigAllowed","DocumentDrawer","_","closeDrawer","openDrawer","id","collectionSlug","field","type","fieldType","path","pathFromContext","schemaPath","editor","lexicalEditor","editorContainerRef","input","setInput","actionsRef","current","fieldId","replace","inputElement","getElementById","setAttribute","add","actions_hidden","clickHandler","event","querySelectorAll","forEach","actionElement","querySelector","actions","remove","parentWithClass","target","addEventListener","removeEventListener","isProcessing","setIsProcessing","generate","isLoading","stop","ActiveComponent","Menu","onCompose","console","log","action","finally","onExpand","onProofread","onRephrase","onSettings","undefined","onSimplify","onSummarize","onTranslate","data","params","setValue","setIfValueIsLexicalState","val","root","JSON","stringify","popupRender","close","onClose","memoizedPopup","button","render","verticalAlign","Fragment","label","onClick","e","preventDefault","ref","role","onSave","onChange","div"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/Compose/Compose.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientField } from 'payload'\nimport type { FC } from 'react'\n\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { FieldDescription, Popup, useDocumentDrawer, useField } from '@payloadcms/ui'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js'\nimport { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js'\nimport { PluginIcon } from '../Icons/Icons.js'\nimport styles from './compose.module.css'\nimport { useMenu } from './hooks/menu/useMenu.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\n\nfunction findParentWithClass(element: HTMLElement | null, className: string): HTMLElement | null {\n // Base case: if the element is null, or we've reached the top of the DOM\n if (!element || element === document.body) {\n return null\n }\n\n // Check if the current element has the class we're looking for\n if (element.classList.contains(className)) {\n return element\n }\n\n // Recursively call the function on the parent element\n return findParentWithClass(element.parentElement, className)\n}\n\ntype ComposeProps = {\n descriptionProps?: {\n field: ClientField\n path: string\n schemaPath: string\n }\n instructionId: string\n isConfigAllowed: boolean\n}\n\nexport const Compose: FC<ComposeProps> = ({ descriptionProps, instructionId, isConfigAllowed }) => {\n const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({\n id: instructionId,\n collectionSlug: PLUGIN_INSTRUCTIONS_TABLE,\n })\n\n const fieldType = descriptionProps?.field?.type\n const pathFromContext = descriptionProps?.path\n const schemaPath = descriptionProps?.schemaPath\n const { editor: lexicalEditor, editorContainerRef } = useEditorConfigContext()\n\n // The below snippet is used to show/hide the action menu on AI-enabled fields\n const [input, setInput] = useState<HTMLElement | null>(null)\n const actionsRef = useRef<HTMLLabelElement | null>(null)\n\n // Set input element for current field\n useEffect(() => {\n if (!actionsRef.current) {\n return\n }\n\n if (!pathFromContext) {\n return\n }\n\n const fieldId = `field-${pathFromContext.replace(/\\./g, '__')}`\n const inputElement = document.getElementById(fieldId)\n\n if (!inputElement && fieldType === 'richText') {\n setInput(editorContainerRef.current as HTMLElement | null)\n } else {\n actionsRef.current?.setAttribute('for', fieldId)\n setInput(inputElement)\n }\n }, [pathFromContext, schemaPath, actionsRef, editorContainerRef, fieldType])\n\n // Show or hide actions menu on field\n useEffect(() => {\n if (!input || !actionsRef.current) {\n return\n }\n\n actionsRef.current?.classList.add(styles.actions_hidden)\n\n // Create the handler function\n const clickHandler = (event: MouseEvent) => {\n document.querySelectorAll('.ai-plugin-active')?.forEach((element) => {\n const actionElement = (element as HTMLElement).querySelector(`.${styles.actions}`)\n if (actionElement) {\n actionElement.classList.add(styles.actions_hidden)\n element.classList.remove('ai-plugin-active')\n }\n })\n\n actionsRef.current?.classList.remove(styles.actions_hidden)\n const parentWithClass = findParentWithClass(event.target as HTMLElement, 'field-type')\n if (parentWithClass) {\n parentWithClass.classList.add('ai-plugin-active')\n }\n }\n\n // Add the event listener\n input?.addEventListener('click', clickHandler)\n\n // Clean up the event listener when the component unmounts or input changes\n return () => {\n input?.removeEventListener('click', clickHandler)\n }\n }, [input, actionsRef])\n\n const [isProcessing, setIsProcessing] = useState<boolean>(false)\n const { generate, isLoading, stop } = useGenerate({ instructionId })\n\n const { ActiveComponent, Menu } = useMenu(\n {\n onCompose: () => {\n console.log('Composing...')\n setIsProcessing(true)\n generate({\n action: 'Compose',\n }).catch((reason)=>{\n console.error(\"Compose : \",reason)\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n onExpand: () => {\n console.log('Expanding...')\n generate({\n action: 'Expand',\n }).catch((reason)=>{\n console.error(\"Compose : \",reason)\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n onProofread: () => {\n console.log('Proofreading...')\n generate({\n action: 'Proofread',\n }).catch((reason)=>{\n console.error(\"Compose : \",reason)\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n onRephrase: () => {\n console.log('Rephrasing...')\n generate({\n action: 'Rephrase',\n }).catch((reason)=>{\n console.error(\"Compose : \",reason)\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n onSettings: isConfigAllowed ? openDrawer : undefined,\n onSimplify: () => {\n console.log('Simplifying...')\n generate({\n action: 'Simplify',\n }).catch((reason)=>{\n console.error(\"Compose : \",reason)\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n onSummarize: () => {\n console.log('Summarizing...')\n generate({\n action: 'Summarize',\n }).catch((reason)=>{\n console.error(\"Compose : \",reason)\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n onTranslate: (data) => {\n console.log('Translating...')\n generate({\n action: 'Translate',\n params: data,\n }).catch((reason)=>{\n console.error(\"Compose : \",reason)\n }).finally(() => {\n setIsProcessing(false)\n })\n },\n },\n {\n isConfigAllowed,\n },\n )\n\n const { setValue } = useField<string>({\n path: pathFromContext,\n })\n\n const setIfValueIsLexicalState = useCallback((val: any) => {\n if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {\n setSafeLexicalState(JSON.stringify(val), lexicalEditor)\n }\n\n // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo\n }, [])\n\n const popupRender = useCallback(\n ({ close }: { close: () => void }) => {\n return <Menu isLoading={isProcessing || isLoading} onClose={close} />\n },\n [isProcessing, isLoading, Menu],\n )\n\n const memoizedPopup = useMemo(() => {\n return (\n <Popup\n button={<PluginIcon isLoading={isProcessing || isLoading} />}\n render={popupRender}\n verticalAlign=\"bottom\"\n />\n )\n }, [popupRender, isProcessing, isLoading])\n\n return (\n <React.Fragment>\n <label\n className={`${styles.actions}`}\n onClick={(e) => e.preventDefault()}\n ref={actionsRef}\n role=\"presentation\"\n >\n <DocumentDrawer\n onSave={() => {\n closeDrawer()\n }}\n />\n {memoizedPopup}\n <ActiveComponent isLoading={isProcessing || isLoading} stop={stop} />\n <UndoRedoActions\n onChange={(val) => {\n setValue(val)\n setIfValueIsLexicalState(val)\n }}\n />\n </label>\n {/*Render the incoming description field*/}\n {descriptionProps ? (\n <div>\n <FieldDescription {...descriptionProps} />\n </div>\n ) : null}\n </React.Fragment>\n )\n}\n"],"names":["useEditorConfigContext","FieldDescription","Popup","useDocumentDrawer","useField","React","useCallback","useEffect","useMemo","useRef","useState","PLUGIN_INSTRUCTIONS_TABLE","setSafeLexicalState","PluginIcon","styles","useMenu","useGenerate","UndoRedoActions","findParentWithClass","element","className","document","body","classList","contains","parentElement","Compose","descriptionProps","instructionId","isConfigAllowed","DocumentDrawer","_","closeDrawer","openDrawer","id","collectionSlug","fieldType","field","type","pathFromContext","path","schemaPath","editor","lexicalEditor","editorContainerRef","input","setInput","actionsRef","current","fieldId","replace","inputElement","getElementById","setAttribute","add","actions_hidden","clickHandler","event","querySelectorAll","forEach","actionElement","querySelector","actions","remove","parentWithClass","target","addEventListener","removeEventListener","isProcessing","setIsProcessing","generate","isLoading","stop","ActiveComponent","Menu","onCompose","console","log","action","catch","reason","error","finally","onExpand","onProofread","onRephrase","onSettings","undefined","onSimplify","onSummarize","onTranslate","data","params","setValue","setIfValueIsLexicalState","val","JSON","stringify","popupRender","close","onClose","memoizedPopup","button","render","verticalAlign","Fragment","label","onClick","e","preventDefault","ref","role","onSave","onChange","div"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { BaseItemProps } from '../../../../types.js';
|
|
3
3
|
export declare const Item: React.FC<BaseItemProps>;
|
|
4
|
-
export declare const createMenuItem: (IconComponent:
|
|
5
|
-
|
|
4
|
+
export declare const createMenuItem: (IconComponent: React.ComponentType<{
|
|
5
|
+
size?: number;
|
|
6
|
+
}>, initialText: string) => React.MemoExoticComponent<({ children, disabled, hideIcon, isMenu, onClick, ...rest }: BaseItemProps) => React.JSX.Element>;
|
|
@@ -5,8 +5,8 @@ import styles from './menu.module.scss';
|
|
|
5
5
|
export const Item = /*#__PURE__*/ memo(({ children, disabled, isActive, onClick, ...rest })=>/*#__PURE__*/ _jsx("span", {
|
|
6
6
|
className: styles.generate_button + ' ' + (isActive ? styles.active : ''),
|
|
7
7
|
"data-disabled": disabled,
|
|
8
|
-
onClick: !disabled ? onClick :
|
|
9
|
-
onKeyDown: !disabled ? onClick :
|
|
8
|
+
onClick: !disabled && typeof onClick === 'function' ? onClick : undefined,
|
|
9
|
+
onKeyDown: !disabled && typeof onClick === 'function' ? onClick : undefined,
|
|
10
10
|
role: "presentation",
|
|
11
11
|
...rest,
|
|
12
12
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/Item.tsx"],"sourcesContent":["import React, { memo } from 'react'\n\nimport type { BaseItemProps } from '../../../../types.js'\n\nimport { ArrowIcon } from '../../../Icons/Icons.js'\nimport styles from './menu.module.scss'\n\nexport const Item: React.FC<BaseItemProps> = memo(\n ({ children, disabled, isActive, onClick, ...rest }) => (\n <span\n className={styles.generate_button + ' ' + (isActive ? styles.active : '')}\n data-disabled={disabled}\n onClick={!disabled ? onClick :
|
|
1
|
+
{"version":3,"sources":["../../../../../src/ui/Compose/hooks/menu/Item.tsx"],"sourcesContent":["import React, { memo } from 'react'\n\nimport type { BaseItemProps } from '../../../../types.js'\n\nimport { ArrowIcon } from '../../../Icons/Icons.js'\nimport styles from './menu.module.scss'\n\nexport const Item: React.FC<BaseItemProps> = memo(\n ({ children, disabled, isActive, onClick, ...rest }) => (\n <span\n className={styles.generate_button + ' ' + (isActive ? styles.active : '')}\n data-disabled={disabled}\n onClick={\n !disabled && typeof onClick === 'function'\n ? (onClick as React.MouseEventHandler<HTMLSpanElement>)\n : undefined\n }\n onKeyDown={\n !disabled && typeof onClick === 'function'\n ? (onClick as React.KeyboardEventHandler<HTMLSpanElement>)\n : undefined\n }\n role=\"presentation\"\n {...rest}\n >\n {children}\n </span>\n ),\n)\n\nexport const createMenuItem = (\n IconComponent: React.ComponentType<{ size?: number }>,\n initialText: string,\n) =>\n memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest }: BaseItemProps) => (\n <Item disabled={disabled} onClick={onClick} {...rest}>\n {hideIcon || <IconComponent size={18} />}\n {children || <span className={styles.text}>{initialText}</span>}\n {isMenu && <ArrowIcon size={18} />}\n </Item>\n ))\n"],"names":["React","memo","ArrowIcon","styles","Item","children","disabled","isActive","onClick","rest","span","className","generate_button","active","data-disabled","undefined","onKeyDown","role","createMenuItem","IconComponent","initialText","hideIcon","isMenu","size","text"],"mappings":";AAAA,OAAOA,SAASC,IAAI,QAAQ,QAAO;AAInC,SAASC,SAAS,QAAQ,0BAAyB;AACnD,OAAOC,YAAY,qBAAoB;AAEvC,OAAO,MAAMC,qBAAgCH,KAC3C,CAAC,EAAEI,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,MAAM,iBACjD,KAACC;QACCC,WAAWR,OAAOS,eAAe,GAAG,MAAOL,CAAAA,WAAWJ,OAAOU,MAAM,GAAG,EAAC;QACvEC,iBAAeR;QACfE,SACE,CAACF,YAAY,OAAOE,YAAY,aAC3BA,UACDO;QAENC,WACE,CAACV,YAAY,OAAOE,YAAY,aAC3BA,UACDO;QAENE,MAAK;QACJ,GAAGR,IAAI;kBAEPJ;QAGN;AAED,OAAO,MAAMa,iBAAiB,CAC5BC,eACAC,4BAEAnB,KAAK,CAAC,EAAEI,QAAQ,EAAEC,QAAQ,EAAEe,QAAQ,EAAEC,MAAM,EAAEd,OAAO,EAAE,GAAGC,MAAqB,iBAC7E,MAACL;YAAKE,UAAUA;YAAUE,SAASA;YAAU,GAAGC,IAAI;;gBACjDY,0BAAY,KAACF;oBAAcI,MAAM;;gBACjClB,0BAAY,KAACK;oBAAKC,WAAWR,OAAOqB,IAAI;8BAAGJ;;gBAC3CE,wBAAU,KAACpB;oBAAUqB,MAAM;;;YAE9B"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const TranslateMenu: ({ onClick }: {
|
|
3
|
-
onClick:
|
|
4
|
-
|
|
3
|
+
onClick: (data: {
|
|
4
|
+
locale: string;
|
|
5
|
+
}) => void;
|
|
6
|
+
}) => React.JSX.Element;
|
|
5
7
|
export declare const MemoizedTranslateMenu: React.MemoExoticComponent<({ onClick }: {
|
|
6
|
-
onClick:
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
onClick: (data: {
|
|
9
|
+
locale: string;
|
|
10
|
+
}) => void;
|
|
11
|
+
}) => React.JSX.Element>;
|
|
@@ -56,7 +56,7 @@ export const TranslateMenu = ({ onClick })=>{
|
|
|
56
56
|
const value = event.target.value;
|
|
57
57
|
setLanguages(filteredLocales.filter((l)=>{
|
|
58
58
|
const lowerCaseValue = value.toLowerCase();
|
|
59
|
-
return l.name.toLowerCase().startsWith(lowerCaseValue) || l.location.toLowerCase().startsWith(lowerCaseValue) || l.tag.toLowerCase().startsWith(lowerCaseValue);
|
|
59
|
+
return l.name.toLowerCase().startsWith(lowerCaseValue) || l.location && l.location.toLowerCase().startsWith(lowerCaseValue) || l.tag.toLowerCase().startsWith(lowerCaseValue);
|
|
60
60
|
}));
|
|
61
61
|
},
|
|
62
62
|
onFocus: ()=>setInputFocus(true),
|