@ai-stack/payloadcms 3.2.19-beta → 3.2.21-beta

package/dist/types.js.map

@@ -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  CollectionConfig,\n  CollectionSlug,\n  DataFromCollectionSlug,\n  Endpoint,\n  Field,\n  File,\n  GlobalConfig,\n  GroupField,\n  PayloadRequest,\n  TypedCollection,\n} from 'payload'\nimport type { CSSProperties, MouseEventHandler } from 'react'\n\nimport type {PLUGIN_INSTRUCTIONS_TABLE} from \"./defaults.js\";\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  // Override the instructions collection config\n  overrideInstructions?: Partial<CollectionConfig>\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 SeedPromptData = Omit<TypedCollection[typeof PLUGIN_INSTRUCTIONS_TABLE], 'createdAt' | 'id' | 'updatedAt'>\n\nexport type SeedPromptResult = {\n  data?: SeedPromptData\n  prompt: string\n  system: string\n} | {\n  data?: SeedPromptData\n} | false | undefined | void\n\nexport type SeedPromptFunction = (options: SeedPromptOptions) => Promise<SeedPromptResult> | SeedPromptResult\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":"AA4NA,WAGyB"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { JSONSchema } from 'openai/lib/jsonschema'\nimport type { ImageGenerateParams } from 'openai/resources/images'\nimport type {\n  CollectionConfig,\n  CollectionSlug,\n  DataFromCollectionSlug,\n  Endpoint,\n  Field,\n  File,\n  GlobalConfig,\n  GroupField,\n  PayloadRequest,\n  TypedCollection,\n} from 'payload'\nimport type { CSSProperties, MouseEventHandler } from 'react'\n\nimport type {PLUGIN_INSTRUCTIONS_TABLE} from \"./defaults.js\";\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 }) => boolean | Promise<boolean>\n  /**\n   * Control access to AI settings/configuration\n   * @default () => !!req.user (requires authentication)\n   */\n  settings?: ({ req }: { req: PayloadRequest }) => boolean | Promise<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  // Override the instructions collection config\n  overrideInstructions?: Partial<CollectionConfig>\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 SeedPromptData = Omit<TypedCollection[typeof PLUGIN_INSTRUCTIONS_TABLE], 'createdAt' | 'id' | 'updatedAt'>\n\nexport type SeedPromptResult = {\n  data?: SeedPromptData\n} | {\n  data?: SeedPromptData\n  prompt: string\n  system: string\n} | false | undefined | void\n\nexport type SeedPromptFunction = (options: SeedPromptOptions) => Promise<SeedPromptResult> | SeedPromptResult\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":"AA4NA,WAGyB"}

package/dist/ui/Compose/Compose.js

@@ -2,92 +2,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
 import { Popup, useDocumentDrawer, useField } from '@payloadcms/ui';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
 import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
 import { PluginIcon } from '../Icons/Icons.js';
 import styles from './compose.module.css';
 import { useMenu } from './hooks/menu/useMenu.js';
+import { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js';
 import { useGenerate } from './hooks/useGenerate.js';
 import { UndoRedoActions } from './UndoRedoActions.js';
-function findParentWithClass(element, className) {
-    // Base case: if the element is null, or we've reached the top of the DOM
-    if (!element || element === document.body) {
-        return null;
-    }
-    // Check if the current element has the class we're looking for
-    if (element.classList.contains(className)) {
-        return element;
-    }
-    // Recursively call the function on the parent element
-    return findParentWithClass(element.parentElement, className);
-}
 export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
     const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({
         id: instructionId,
         collectionSlug: PLUGIN_INSTRUCTIONS_TABLE
     });
-    const fieldType = descriptionProps?.field?.type;
     const pathFromContext = descriptionProps?.path;
-    const schemaPath = descriptionProps?.schemaPath;
-    const { editor: lexicalEditor, editorContainerRef } = useEditorConfigContext();
-    // The below snippet is used to show/hide the action menu on AI-enabled fields
-    const [input, setInput] = useState(null);
-    const actionsRef = useRef(null);
-    // Set input element for current field
-    useEffect(()=>{
-        if (!actionsRef.current) {
-            return;
-        }
-        if (!pathFromContext) {
-            return;
-        }
-        const fieldId = `field-${pathFromContext.replace(/\./g, '__')}`;
-        const inputElement = document.getElementById(fieldId);
-        if (!inputElement && fieldType === 'richText') {
-            setInput(editorContainerRef.current);
-        } else {
-            actionsRef.current?.setAttribute('for', fieldId);
-            setInput(inputElement);
-        }
-    }, [
-        pathFromContext,
-        schemaPath,
-        actionsRef,
-        editorContainerRef,
-        fieldType
-    ]);
-    // Show or hide actions menu on field
-    useEffect(()=>{
-        if (!input || !actionsRef.current) {
-            return;
-        }
-        actionsRef.current?.classList.add(styles.actions_hidden);
-        // Create the handler function
-        const clickHandler = (event)=>{
-            document.querySelectorAll('.ai-plugin-active')?.forEach((element)=>{
-                const actionElement = element.querySelector(`.${styles.actions}`);
-                if (actionElement) {
-                    actionElement.classList.add(styles.actions_hidden);
-                    element.classList.remove('ai-plugin-active');
-                }
-            });
-            actionsRef.current?.classList.remove(styles.actions_hidden);
-            const parentWithClass = findParentWithClass(event.target, 'field-type');
-            if (parentWithClass) {
-                parentWithClass.classList.add('ai-plugin-active');
-            }
-        };
-        // Add the event listener
-        input?.addEventListener('click', clickHandler);
-        // Clean up the event listener when the component unmounts or input changes
-        return ()=>{
-            input?.removeEventListener('click', clickHandler);
-        };
-    }, [
-        input,
-        actionsRef
-    ]);
+    const { editor: lexicalEditor } = useEditorConfigContext();
+    // Initialize global active-field tracking
+    useActiveFieldTracking();
     const [isProcessing, setIsProcessing] = useState(false);
     const { generate, isLoading, stop } = useGenerate({
         instructionId
@@ -99,7 +31,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Compose'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -109,7 +41,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Expand'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -119,7 +51,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Proofread'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -129,7 +61,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Rephrase'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -140,7 +72,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Simplify'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -150,7 +82,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
             generate({
                 action: 'Summarize'
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -161,7 +93,7 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
                 action: 'Translate',
                 params: data
             }).catch((reason)=>{
-                console.error("Compose : ", reason);
+                console.error('Compose : ', reason);
             }).finally(()=>{
                 setIsProcessing(false);
             });
@@ -204,7 +136,6 @@ export const Compose = ({ descriptionProps, instructionId, isConfigAllowed })=>{
     return /*#__PURE__*/ _jsxs("label", {
         className: `payloadai-compose__actions ${styles.actions}`,
         onClick: (e)=>e.preventDefault(),
-        ref: actionsRef,
         role: "presentation",
         children: [
             /*#__PURE__*/ _jsx(DocumentDrawer, {

package/dist/ui/Compose/Compose.js.map

@@ -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 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    <label\n      className={`payloadai-compose__actions ${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  )\n}\n"],"names":["useEditorConfigContext","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","label","onClick","e","preventDefault","ref","role","onSave","onChange"],"mappings":"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"}
+{"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 { Popup, useDocumentDrawer, useField } from '@payloadcms/ui'\nimport React, { useCallback, useMemo, 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 { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js'\nimport { useGenerate } from './hooks/useGenerate.js'\nimport { UndoRedoActions } from './UndoRedoActions.js'\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 pathFromContext = descriptionProps?.path\n  const { editor: lexicalEditor } = useEditorConfigContext()\n\n  // Initialize global active-field tracking\n  useActiveFieldTracking()\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        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onExpand: () => {\n        console.log('Expanding...')\n        generate({\n          action: 'Expand',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onProofread: () => {\n        console.log('Proofreading...')\n        generate({\n          action: 'Proofread',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onRephrase: () => {\n        console.log('Rephrasing...')\n        generate({\n          action: 'Rephrase',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onSettings: isConfigAllowed ? openDrawer : undefined,\n      onSimplify: () => {\n        console.log('Simplifying...')\n        generate({\n          action: 'Simplify',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onSummarize: () => {\n        console.log('Summarizing...')\n        generate({\n          action: 'Summarize',\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\n          .finally(() => {\n            setIsProcessing(false)\n          })\n      },\n      onTranslate: (data) => {\n        console.log('Translating...')\n        generate({\n          action: 'Translate',\n          params: data,\n        })\n          .catch((reason) => {\n            console.error('Compose : ', reason)\n          })\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    <label\n      className={`payloadai-compose__actions ${styles.actions}`}\n      onClick={(e) => e.preventDefault()}\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  )\n}\n"],"names":["useEditorConfigContext","Popup","useDocumentDrawer","useField","React","useCallback","useMemo","useState","PLUGIN_INSTRUCTIONS_TABLE","setSafeLexicalState","PluginIcon","styles","useMenu","useActiveFieldTracking","useGenerate","UndoRedoActions","Compose","descriptionProps","instructionId","isConfigAllowed","DocumentDrawer","_","closeDrawer","openDrawer","id","collectionSlug","pathFromContext","path","editor","lexicalEditor","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","label","className","actions","onClick","e","preventDefault","role","onSave","onChange"],"mappings":"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"}

package/dist/ui/Compose/Compose.jsx

@@ -0,0 +1,141 @@
+'use client';
+import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
+import { Popup, useDocumentDrawer, useField } from '@payloadcms/ui';
+import React, { useCallback, useMemo, useState } from 'react';
+import { PLUGIN_INSTRUCTIONS_TABLE } from '../../defaults.js';
+import { setSafeLexicalState } from '../../utilities/setSafeLexicalState.js';
+import { PluginIcon } from '../Icons/Icons.js';
+import styles from './compose.module.css';
+import { useMenu } from './hooks/menu/useMenu.js';
+import { useActiveFieldTracking } from './hooks/useActiveFieldTracking.js';
+import { useGenerate } from './hooks/useGenerate.js';
+import { UndoRedoActions } from './UndoRedoActions.js';
+export const Compose = ({ descriptionProps, instructionId, isConfigAllowed }) => {
+    const [DocumentDrawer, _, { closeDrawer, openDrawer }] = useDocumentDrawer({
+        id: instructionId,
+        collectionSlug: PLUGIN_INSTRUCTIONS_TABLE,
+    });
+    const pathFromContext = descriptionProps?.path;
+    const { editor: lexicalEditor } = useEditorConfigContext();
+    // Initialize global active-field tracking
+    useActiveFieldTracking();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const { generate, isLoading, stop } = useGenerate({ instructionId });
+    const { ActiveComponent, Menu } = useMenu({
+        onCompose: () => {
+            console.log('Composing...');
+            setIsProcessing(true);
+            generate({
+                action: 'Compose',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onExpand: () => {
+            console.log('Expanding...');
+            generate({
+                action: 'Expand',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onProofread: () => {
+            console.log('Proofreading...');
+            generate({
+                action: 'Proofread',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onRephrase: () => {
+            console.log('Rephrasing...');
+            generate({
+                action: 'Rephrase',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onSettings: isConfigAllowed ? openDrawer : undefined,
+        onSimplify: () => {
+            console.log('Simplifying...');
+            generate({
+                action: 'Simplify',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onSummarize: () => {
+            console.log('Summarizing...');
+            generate({
+                action: 'Summarize',
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+        onTranslate: (data) => {
+            console.log('Translating...');
+            generate({
+                action: 'Translate',
+                params: data,
+            })
+                .catch((reason) => {
+                console.error('Compose : ', reason);
+            })
+                .finally(() => {
+                setIsProcessing(false);
+            });
+        },
+    }, {
+        isConfigAllowed,
+    });
+    const { setValue } = useField({
+        path: pathFromContext,
+    });
+    const setIfValueIsLexicalState = useCallback((val) => {
+        if (val && typeof val === 'object' && 'root' in val && lexicalEditor) {
+            setSafeLexicalState(JSON.stringify(val), lexicalEditor);
+        }
+        // DO NOT PROVIDE lexicalEditor as a dependency, it freaks out and does not update the editor after first undo/redo
+    }, []);
+    const popupRender = useCallback(({ close }) => {
+        return <Menu isLoading={isProcessing || isLoading} onClose={close}/>;
+    }, [isProcessing, isLoading, Menu]);
+    const memoizedPopup = useMemo(() => {
+        return (<Popup button={<PluginIcon isLoading={isProcessing || isLoading}/>} render={popupRender} verticalAlign="bottom"/>);
+    }, [popupRender, isProcessing, isLoading]);
+    return (<label className={`payloadai-compose__actions ${styles.actions}`} onClick={(e) => e.preventDefault()} role="presentation">
+      <DocumentDrawer onSave={() => {
+            closeDrawer();
+        }}/>
+      {memoizedPopup}
+      <ActiveComponent isLoading={isProcessing || isLoading} stop={stop}/>
+      <UndoRedoActions onChange={(val) => {
+            setValue(val);
+            setIfValueIsLexicalState(val);
+        }}/>
+    </label>);
+};

package/dist/ui/Compose/UndoRedoActions.jsx

@@ -0,0 +1,34 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useHistory } from './hooks/useHistory.js';
+export const UndoRedoActions = ({ onChange }) => {
+    const { canRedo, canUndo, redo, undo } = useHistory();
+    const redoHistoryValue = useCallback((event) => {
+        event.stopPropagation();
+        const value = redo();
+        if (value) {
+            onChange(value);
+        }
+    }, [redo]);
+    const undoHistoryValue = useCallback((event) => {
+        event.stopPropagation();
+        const value = undo();
+        if (value) {
+            onChange(value);
+        }
+    }, [undo]);
+    // Delay rendering until the client-side hydration is complete
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    if (!isMounted || (!canUndo && !canRedo))
+        return null;
+    return (<React.Fragment>
+      <button className={`btn btn--size-small btn--style-secondary ${!canUndo && 'btn--disabled'}`} disabled={!canUndo} onClick={undoHistoryValue} style={{ marginBlock: 0 }} type="button">
+        Undo
+      </button>
+      <button className={`btn btn--size-small btn--style-secondary ${!canRedo && 'btn--disabled'}`} disabled={!canRedo} onClick={redoHistoryValue} style={{ marginBlock: 0 }} type="button">
+        Redo
+      </button>
+    </React.Fragment>);
+};

package/dist/ui/Compose/compose.module.css

@@ -1,21 +1,108 @@
 .actions {
   position: relative;
-  margin: 5px 0;
   display: flex;
   gap: 10px;
+  align-items: center;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  padding: 0 5px;
+  margin: 0;
+  z-index: 1;
+  transform: scaleY(0) skewX(90deg) translateY(-5px);
+  transform-origin: top;
+  max-height: 0;
+
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  perspective: 1000px;
+
+  transition:
+    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    visibility 0s linear 0.3s;
+}
+
+:global(.field-type.ai-plugin-active) .actions {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
   padding: 5px 0;
-  transition: all 0.3s ease;
+  margin: 5px 0;
   max-height: 100px;
-  opacity: 1;
-  align-items: center;
-  z-index: auto;
+  transform: scaleY(1) skewX(0) translateY(0) translateZ(0);
+
+  transition:
+    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.actions_hidden {
-  max-height: 0;
-  overflow: hidden;
-  padding: 0 5px;
-  margin: 0;
+:global(.field-type.ai-plugin-active) .actions {
+  animation: removeWillChange 0.3s forwards;
+}
+
+@keyframes removeWillChange {
+  to {
+    will-change: auto;
+  }
+}
+
+.actions > * {
   opacity: 0;
-  z-index: 0;
-}
+  transform: translateY(-3px) translateZ(0);
+
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+
+  transition:
+    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:global(.field-type.ai-plugin-active) .actions > * {
+  opacity: 1;
+  transform: translateY(0) translateZ(0);
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(1) {
+  transition-delay: 0.05s;
+  animation: removeWillChange 0.25s 0.05s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(2) {
+  transition-delay: 0.08s;
+  animation: removeWillChange 0.28s 0.08s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(3) {
+  transition-delay: 0.11s;
+  animation: removeWillChange 0.31s 0.11s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(4) {
+  transition-delay: 0.14s;
+  animation: removeWillChange 0.34s 0.14s forwards;
+}
+
+:global(.field-type.ai-plugin-active) .actions > *:nth-child(5) {
+  transition-delay: 0.17s;
+  animation: removeWillChange 0.37s 0.17s forwards;
+}
+
+@media (prefers-reduced-motion: no-preference) and (min-resolution: 120dpi) {
+  .actions,
+  .actions > * {
+    transition-duration: 0.2s;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .actions,
+  .actions > * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    will-change: auto !important;
+  }
+}

package/dist/ui/Compose/hooks/menu/Item.jsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+import { ArrowIcon } from '../../../Icons/Icons.js';
+import styles from './menu.module.scss';
+export const Item = memo(({ children, disabled, isActive, onClick, ...rest }) => (<span className={styles.generate_button + ' ' + (isActive ? styles.active : '')} data-disabled={disabled} onClick={!disabled && typeof onClick === 'function'
+        ? onClick
+        : undefined} onKeyDown={!disabled && typeof onClick === 'function'
+        ? onClick
+        : undefined} role="presentation" {...rest}>
+      {children}
+    </span>));
+export const createMenuItem = (IconComponent, initialText) => memo(({ children, disabled, hideIcon, isMenu, onClick, ...rest }) => (<Item disabled={disabled} onClick={onClick} {...rest}>
+      {hideIcon || <IconComponent size={18}/>}
+      {children || <span className={styles.text}>{initialText}</span>}
+      {isMenu && <ArrowIcon size={18}/>}
+    </Item>));

package/dist/ui/Compose/hooks/menu/TranslateMenu.jsx

@@ -0,0 +1,58 @@
+import locales from 'locale-codes';
+import React, { memo, useState } from 'react';
+import { useInstructions } from '../../../../providers/InstructionsProvider/useInstructions.js';
+import { Item } from './Item.js';
+import { Translate } from './items.js';
+import styles from './menu.module.scss';
+export const TranslateMenu = ({ onClick }) => {
+    const [show, setShow] = useState(false);
+    const { enabledLanguages = [] } = useInstructions();
+    let filteredLocales = locales.all.filter((a) => {
+        return a.tag && a.location;
+    });
+    if (enabledLanguages?.length) {
+        filteredLocales = filteredLocales.filter((a) => enabledLanguages?.includes(a.tag));
+    }
+    const [languages, setLanguages] = useState(filteredLocales);
+    const [inputFocus, setInputFocus] = useState(false);
+    return (<div className={styles.menu} onMouseLeave={() => {
+            if (!inputFocus) {
+                setShow(false);
+            }
+        }}>
+      <Translate isActive={show} isMenu onClick={() => {
+            setShow(!show);
+        }} onMouseEnter={() => setShow(true)}/>
+      <div className={styles.hoverMenu} data-show={show}>
+        <div className={`${styles.menu} ${styles.subMenu}`} style={{
+            background: 'var(--popup-bg)',
+            // minHeight: '300px',
+        }}>
+          <Item onClick={() => { }} style={{
+            background: 'transparent',
+            padding: '0 0 5px 0',
+            position: 'sticky',
+            top: 0,
+        }}>
+            <input className={styles.menuInput} onBlur={() => setInputFocus(false)} onChange={(event) => {
+            const value = event.target.value;
+            setLanguages(filteredLocales.filter((l) => {
+                const lowerCaseValue = value.toLowerCase();
+                return (l.name.toLowerCase().startsWith(lowerCaseValue) ||
+                    (l.location && l.location.toLowerCase().startsWith(lowerCaseValue)) ||
+                    l.tag.toLowerCase().startsWith(lowerCaseValue));
+            }));
+        }} onFocus={() => setInputFocus(true)} placeholder="Search..."/>
+          </Item>
+          {languages.map((locale) => {
+            return (<Item key={locale.tag} onClick={() => {
+                    onClick({ locale: locale.tag });
+                }}>
+                <span className={styles.ellipsis}>{`${locale.location} (${locale.tag})`}</span>
+              </Item>);
+        })}
+        </div>
+      </div>
+    </div>);
+};
+export const MemoizedTranslateMenu = memo(TranslateMenu);

package/dist/ui/Compose/hooks/menu/items.jsx

@@ -0,0 +1,10 @@
+import { DocsAddOnIcon, EditNoteIcon, SegmentIcon, SpellCheckIcon, StylusNoteIcon, SummarizeIcon, TranslateIcon, TuneIcon, } from '../../../Icons/Icons.js';
+import { createMenuItem } from './Item.js';
+export const Proofread = createMenuItem(SpellCheckIcon, 'Proofread');
+export const Rephrase = createMenuItem(EditNoteIcon, 'Rephrase');
+export const Translate = createMenuItem(TranslateIcon, 'Translate');
+export const Expand = createMenuItem(DocsAddOnIcon, 'Expand');
+export const Summarize = createMenuItem(SummarizeIcon, 'Summarize');
+export const Simplify = createMenuItem(SegmentIcon, 'Simplify');
+export const Compose = createMenuItem(StylusNoteIcon, 'Compose');
+export const Settings = createMenuItem(TuneIcon, 'Settings');

package/dist/ui/Compose/hooks/menu/useMenu.js

@@ -19,7 +19,7 @@ const getActiveComponent = (ac)=>{
     }
 };
 export const useMenu = (menuEvents, options)=>{
-    const { type: fieldType, path: pathFromContext } = useFieldProps();
+    const { field: { type: fieldType } = {}, path: pathFromContext } = useFieldProps();
     const field = useField({
         path: pathFromContext ?? ''
     });