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

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

@@ -0,0 +1,89 @@
+'use client';
+import { useField } from '@payloadcms/ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useFieldProps } from '../../../../providers/FieldProvider/useFieldProps.js';
+import { Compose, Proofread, Rephrase } from './items.js';
+import { menuItemsMap } from './itemsMap.js';
+import styles from './menu.module.scss';
+const getActiveComponent = (ac) => {
+    switch (ac) {
+        case 'Compose':
+            return Compose;
+        case 'Proofread':
+            return Proofread;
+        case 'Rephrase':
+            return Rephrase;
+        default:
+            return Rephrase;
+    }
+};
+export const useMenu = (menuEvents, options) => {
+    const { field: { type: fieldType } = {}, path: pathFromContext } = useFieldProps();
+    const field = useField({ path: pathFromContext ?? '' });
+    const [activeComponent, setActiveComponent] = useState('Rephrase');
+    const { initialValue, value } = field;
+    useEffect(() => {
+        if (!value) {
+            setActiveComponent('Compose');
+            return;
+        }
+        if (menuItemsMap.some((i) => i.excludedFor?.includes(fieldType ?? ''))) {
+            setActiveComponent('Compose');
+            return;
+        }
+        if (typeof value === 'string' && value !== initialValue) {
+            setActiveComponent('Proofread');
+        }
+        else {
+            setActiveComponent('Rephrase');
+        }
+    }, [initialValue, value, fieldType]);
+    const MemoizedActiveComponent = useMemo(() => {
+        return ({ isLoading, stop }) => {
+            const ActiveComponent = getActiveComponent(activeComponent);
+            const activeItem = menuItemsMap.find((i) => i.name === activeComponent);
+            return (<ActiveComponent hideIcon onClick={(data) => {
+                    if (!isLoading) {
+                        const trigger = menuEvents[`on${activeComponent}`];
+                        if (typeof trigger === 'function') {
+                            trigger(data);
+                        }
+                        else {
+                            console.error('No trigger found for', activeComponent);
+                        }
+                    }
+                    else {
+                        stop();
+                    }
+                }} title={isLoading ? 'Click to stop' : activeItem.name}>
+          {isLoading && activeItem.loadingText}
+        </ActiveComponent>);
+        };
+    }, [activeComponent, menuEvents]);
+    const filteredMenuItems = useMemo(() => menuItemsMap.filter((i) => {
+        if (i.name === 'Settings' && !options.isConfigAllowed) {
+            return false;
+        } // Disable settings if a user role is not permitted
+        return i.name !== activeComponent && !i.excludedFor?.includes(fieldType ?? '');
+    }), [activeComponent, fieldType, options.isConfigAllowed]);
+    const MemoizedMenu = useMemo(() => {
+        return ({ isLoading, onClose }) => (<div className={styles.menu}>
+        {filteredMenuItems.map((i) => {
+                const Action = i.component;
+                return (<Action disabled={isLoading} key={i.name} onClick={(data) => {
+                        if (i.name !== 'Settings') {
+                            setActiveComponent(i.name);
+                        }
+                        menuEvents[`on${i.name}`]?.(data);
+                        onClose();
+                    }}>
+              {isLoading && i.loadingText}
+            </Action>);
+            })}
+      </div>);
+    }, [filteredMenuItems, menuEvents]);
+    return {
+        ActiveComponent: MemoizedActiveComponent,
+        Menu: MemoizedMenu,
+    };
+};

package/dist/ui/Compose/hooks/useActiveFieldTracking.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Initialize document-level listeners to track the active field container.
+ * When a container is active, it receives the 'ai-plugin-active' class.
+ */
+export declare const useActiveFieldTracking: () => void;

package/dist/ui/Compose/hooks/useActiveFieldTracking.js

@@ -0,0 +1,148 @@
+'use client';
+import { useEffect } from 'react';
+let currentContainer = null;
+/**
+ * Safely escape CSS selector values
+ */ const cssEscape = (value)=>{
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    return value.replace(/([ #;?%&,.+*~':"!^$[\]()=>|/@])/g, '\\$1');
+};
+/**
+ * Find container from React Select dropdown elements
+ */ const findContainerFromReactSelect = (target)=>{
+    const listbox = target.closest('[role="listbox"]');
+    if (!listbox?.id) {
+        return null;
+    }
+    const id = cssEscape(listbox.id);
+    const selector = `[aria-controls="${id}"], [aria-owns="${id}"]`;
+    const control = document.querySelector(selector);
+    return control?.closest('.field-type') ?? null;
+};
+/**
+ * Resolve the .field-type container for a given event target
+ */ const resolveContainerFromTarget = (target)=>{
+    if (!(target instanceof HTMLElement)) {
+        return null;
+    }
+    // Check for direct parent first
+    const direct = target.closest('.field-type');
+    if (direct) {
+        return direct;
+    }
+    // Fall back to React Select logic
+    return findContainerFromReactSelect(target);
+};
+/**
+ * Update the active container and toggle CSS class
+ */ const setActiveContainer = (next)=>{
+    if (currentContainer === next) {
+        return;
+    }
+    currentContainer?.classList.remove('ai-plugin-active');
+    next?.classList.add('ai-plugin-active');
+    currentContainer = next;
+};
+const isInteractiveElement = (element)=>{
+    const tagName = element.tagName.toLowerCase();
+    const interactiveTags = [
+        'input',
+        'textarea',
+        'select',
+        'button'
+    ];
+    if (interactiveTags.includes(tagName)) {
+        return true;
+    }
+    // Check for contenteditable
+    if (element.isContentEditable) {
+        return true;
+    }
+    // Check for elements with role="textbox" or role="combobox" (React Select)
+    const role = element.getAttribute('role');
+    if (role && [
+        'combobox',
+        'listbox',
+        'searchbox',
+        'textbox'
+    ].includes(role)) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Handle focus events - only activate if focus is on an interactive element within .field-type
+ */ const onFocusIn = (e)=>{
+    const target = e.target;
+    if (!(target instanceof HTMLElement)) {
+        return;
+    }
+    // Only activate if the focused element is actually interactive
+    if (!isInteractiveElement(target)) {
+        return;
+    }
+    const container = resolveContainerFromTarget(target);
+    // Only update if we found a new container
+    if (container) {
+        setActiveContainer(container);
+    }
+};
+/**
+ * Handle pointer/mouse events - only switch when clicking a different .field-type
+ */ const onPointerDown = (e)=>{
+    const target = e.target;
+    if (!(target instanceof HTMLElement)) {
+        return;
+    }
+    const container = resolveContainerFromTarget(target);
+    // Only update if we found a container (keeps last active if clicking elsewhere)
+    if (container) {
+        setActiveContainer(container);
+    }
+};
+/**
+ * Handle keyboard navigation (Tab key)
+ */ const onKeyDown = (e)=>{
+    if (e.key !== 'Tab') {
+        return;
+    }
+    requestAnimationFrame(()=>{
+        const container = resolveContainerFromTarget(document.activeElement);
+        setActiveContainer(container);
+    });
+};
+/**
+ * Initialize document-level listeners to track the active field container.
+ * When a container is active, it receives the 'ai-plugin-active' class.
+ */ export const useActiveFieldTracking = ()=>{
+    useEffect(()=>{
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const pluginWindow = window;
+        // Track number of mounted users of the hook
+        pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1;
+        // Initialize listeners only once
+        if (!pluginWindow.__aiComposeTracking) {
+            document.addEventListener('focusin', onFocusIn, true);
+            document.addEventListener('pointerdown', onPointerDown, true);
+            document.addEventListener('keydown', onKeyDown, true);
+            pluginWindow.__aiComposeTracking = true;
+        }
+        return ()=>{
+            // Decrement and cleanup when the last user unmounts
+            pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1;
+            if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {
+                document.removeEventListener('focusin', onFocusIn, true);
+                document.removeEventListener('pointerdown', onPointerDown, true);
+                document.removeEventListener('keydown', onKeyDown, true);
+                pluginWindow.__aiComposeTracking = false;
+                pluginWindow.__aiComposeTrackingCount = 0;
+            }
+        };
+    }, []);
+};
+
+//# sourceMappingURL=useActiveFieldTracking.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useActiveFieldTracking.ts"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nlet currentContainer: HTMLElement | null = null\n\n/**\n * Safely escape CSS selector values\n */\nconst cssEscape = (value: string): string => {\n  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {\n    return CSS.escape(value)\n  }\n  return value.replace(/([ #;?%&,.+*~':\"!^$[\\]()=>|/@])/g, '\\\\$1')\n}\n\n/**\n * Find container from React Select dropdown elements\n */\nconst findContainerFromReactSelect = (target: HTMLElement): HTMLElement | null => {\n  const listbox = target.closest<HTMLElement>('[role=\"listbox\"]')\n  if (!listbox?.id) {\n    return null\n  }\n\n  const id = cssEscape(listbox.id)\n  const selector = `[aria-controls=\"${id}\"], [aria-owns=\"${id}\"]`\n  const control = document.querySelector<HTMLElement>(selector)\n\n  return control?.closest<HTMLElement>('.field-type') ?? null\n}\n\n/**\n * Resolve the .field-type container for a given event target\n */\nconst resolveContainerFromTarget = (target: EventTarget | null): HTMLElement | null => {\n  if (!(target instanceof HTMLElement)) {\n    return null\n  }\n\n  // Check for direct parent first\n  const direct = target.closest<HTMLElement>('.field-type')\n  if (direct) {\n    return direct\n  }\n\n  // Fall back to React Select logic\n  return findContainerFromReactSelect(target)\n}\n\n/**\n * Update the active container and toggle CSS class\n */\nconst setActiveContainer = (next: HTMLElement | null): void => {\n  if (currentContainer === next) {\n    return\n  }\n\n  currentContainer?.classList.remove('ai-plugin-active')\n  next?.classList.add('ai-plugin-active')\n  currentContainer = next\n}\n\nconst isInteractiveElement = (element: HTMLElement): boolean => {\n  const tagName = element.tagName.toLowerCase()\n  const interactiveTags = ['input', 'textarea', 'select', 'button']\n\n  if (interactiveTags.includes(tagName)) {\n    return true\n  }\n\n  // Check for contenteditable\n  if (element.isContentEditable) {\n    return true\n  }\n\n  // Check for elements with role=\"textbox\" or role=\"combobox\" (React Select)\n  const role = element.getAttribute('role')\n  if (role && ['combobox', 'listbox', 'searchbox', 'textbox'].includes(role)) {\n    return true\n  }\n\n  return false\n}\n\n/**\n * Handle focus events - only activate if focus is on an interactive element within .field-type\n */\nconst onFocusIn = (e: FocusEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  // Only activate if the focused element is actually interactive\n  if (!isInteractiveElement(target)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n  // Only update if we found a new container\n  if (container) {\n    setActiveContainer(container)\n  }\n}\n\n/**\n * Handle pointer/mouse events - only switch when clicking a different .field-type\n */\nconst onPointerDown = (e: PointerEvent): void => {\n  const target = e.target\n  if (!(target instanceof HTMLElement)) {\n    return\n  }\n\n  const container = resolveContainerFromTarget(target)\n\n  // Only update if we found a container (keeps last active if clicking elsewhere)\n  if (container) {\n    setActiveContainer(container)\n  }\n}\n\n/**\n * Handle keyboard navigation (Tab key)\n */\nconst onKeyDown = (e: KeyboardEvent): void => {\n  if (e.key !== 'Tab') {\n    return\n  }\n\n  requestAnimationFrame(() => {\n    const container = resolveContainerFromTarget(document.activeElement)\n    setActiveContainer(container)\n  })\n}\n\n/**\n * Initialize document-level listeners to track the active field container.\n * When a container is active, it receives the 'ai-plugin-active' class.\n */\nexport const useActiveFieldTracking = (): void => {\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return\n    }\n\n    const pluginWindow = window as {\n      __aiComposeTracking?: boolean\n      __aiComposeTrackingCount?: number\n    } & Window\n\n    // Track number of mounted users of the hook\n    pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 0) + 1\n\n    // Initialize listeners only once\n    if (!pluginWindow.__aiComposeTracking) {\n      document.addEventListener('focusin', onFocusIn, true)\n      document.addEventListener('pointerdown', onPointerDown, true)\n      document.addEventListener('keydown', onKeyDown, true)\n      pluginWindow.__aiComposeTracking = true\n    }\n\n    return () => {\n      // Decrement and cleanup when the last user unmounts\n      pluginWindow.__aiComposeTrackingCount = (pluginWindow.__aiComposeTrackingCount ?? 1) - 1\n      if ((pluginWindow.__aiComposeTrackingCount ?? 0) <= 0) {\n        document.removeEventListener('focusin', onFocusIn, true)\n        document.removeEventListener('pointerdown', onPointerDown, true)\n        document.removeEventListener('keydown', onKeyDown, true)\n        pluginWindow.__aiComposeTracking = false\n        pluginWindow.__aiComposeTrackingCount = 0\n      }\n    }\n  }, [])\n}\n"],"names":["useEffect","currentContainer","cssEscape","value","CSS","escape","replace","findContainerFromReactSelect","target","listbox","closest","id","selector","control","document","querySelector","resolveContainerFromTarget","HTMLElement","direct","setActiveContainer","next","classList","remove","add","isInteractiveElement","element","tagName","toLowerCase","interactiveTags","includes","isContentEditable","role","getAttribute","onFocusIn","e","container","onPointerDown","onKeyDown","key","requestAnimationFrame","activeElement","useActiveFieldTracking","window","pluginWindow","__aiComposeTrackingCount","__aiComposeTracking","addEventListener","removeEventListener"],"mappings":"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"}

package/dist/ui/Compose/hooks/useGenerate.js

@@ -1,4 +1,4 @@
-import { useCompletion, experimental_useObject as useObject } from '@ai-sdk/react';
+import { experimental_useObject as useObject } from '@ai-sdk/react';
 import { useEditorConfigContext } from '@payloadcms/richtext-lexical/client';
 import { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui';
 import { jsonSchema } from 'ai';
@@ -6,6 +6,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { PLUGIN_API_ENDPOINT_GENERATE, PLUGIN_API_ENDPOINT_GENERATE_UPLOAD, PLUGIN_INSTRUCTIONS_TABLE, PLUGIN_NAME } from '../../../defaults.js';
 import { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js';
 import { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js';
+import { fieldToJsonSchema } from '../../../utilities/fieldToJsonSchema.js';
 import { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js';
 import { useHistory } from './useHistory.js';
 export const useGenerate = ({ instructionId })=>{
@@ -17,7 +18,7 @@ export const useGenerate = ({ instructionId })=>{
     }, [
         instructionId
     ]);
-    const { type, path: pathFromContext } = useFieldProps();
+    const { field, path: pathFromContext } = useFieldProps();
     const editorConfigContext = useEditorConfigContext();
     const { editor } = editorConfigContext;
     const { config } = useConfig();
@@ -56,6 +57,24 @@ export const useGenerate = ({ instructionId })=>{
         }), [
         memoizedValidator
     ]);
+    // Active JSON schema for useObject based on field type
+    const activeSchema = useMemo(()=>{
+        const f = field;
+        const fieldType = f?.type;
+        if (fieldType === 'richText') {
+            return memoizedSchema;
+        }
+        if (f && f.name && fieldType) {
+            const schemaJson = fieldToJsonSchema(f);
+            if (schemaJson && Object.keys(schemaJson).length > 0) {
+                return jsonSchema(schemaJson);
+            }
+        }
+        return undefined;
+    }, [
+        field,
+        memoizedSchema
+    ]);
     const { isLoading: loadingObject, object, stop: objectStop, submit } = useObject({
         api: `/api${PLUGIN_API_ENDPOINT_GENERATE}`,
         onError: (error)=>{
@@ -63,50 +82,35 @@ export const useGenerate = ({ instructionId })=>{
             console.error('Error generating object:', error);
         },
         onFinish: (result)=>{
-            if (result.object) {
-                setHistory(result.object);
-                setValue(result.object);
+            if (result.object && field) {
+                if (field.type === 'richText') {
+                    setHistory(result.object);
+                    setValue(result.object);
+                } else if ('name' in field) {
+                    setHistory(result.object[field.name]);
+                    setValue(result.object[field.name]);
+                }
             } else {
-                console.log('onFinish: result ', result);
+                console.log('onFinish: result, field ', result, field);
             }
         },
-        schema: memoizedSchema
+        schema: activeSchema
     });
     useEffect(()=>{
         if (!object) {
             return;
         }
         requestAnimationFrame(()=>{
-            // TODO: Temporary disabled pre validation, sometimes it fails to validate
-            // const validateObject = await memoizedSchema?.validate?.(object)
-            // if (validateObject?.success) {
-            setSafeLexicalState(object, editor);
-        // }
+            if (field?.type === 'richText') {
+                setSafeLexicalState(object, editor);
+            } else if (field && 'name' in field && object[field.name]) {
+                setValue(object[field.name]);
+            }
         });
     }, [
         object,
-        editor
-    ]);
-    const { complete, completion, isLoading: loadingCompletion, stop: completionStop } = useCompletion({
-        api: `${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE}`,
-        onError: (error)=>{
-            toast.error(`Failed to generate: ${error.message}`);
-            console.error('Error generating text:', error);
-        },
-        onFinish: (prompt, result)=>{
-            setHistory(result);
-        },
-        streamProtocol: 'data'
-    });
-    useEffect(()=>{
-        if (!completion) {
-            return;
-        }
-        requestAnimationFrame(()=>{
-            setValue(completion);
-        });
-    }, [
-        completion
+        editor,
+        field
     ]);
     const streamObject = useCallback(({ action = 'Compose', params })=>{
         const doc = getData();
@@ -130,31 +134,6 @@ export const useGenerate = ({ instructionId })=>{
         instructionIdRef,
         documentId
     ]);
-    const streamText = useCallback(async ({ action = 'Compose', params })=>{
-        const doc = getData();
-        const currentInstructionId = instructionIdRef.current;
-        const options = {
-            action,
-            actionParams: params,
-            instructionId: currentInstructionId
-        };
-        await complete('', {
-            body: {
-                doc: {
-                    ...doc,
-                    id: documentId
-                },
-                locale: localFromContext?.code,
-                options
-            }
-        });
-    }, [
-        getData,
-        localFromContext?.code,
-        instructionIdRef,
-        complete,
-        documentId
-    ]);
     const generateUpload = useCallback(async ()=>{
         const doc = getData();
         const currentInstructionId = instructionIdRef.current;
@@ -201,39 +180,27 @@ export const useGenerate = ({ instructionId })=>{
         collectionSlug
     ]);
     const generate = useCallback(async (options)=>{
-        if (type === 'richText') {
-            return streamObject(options ?? {
-                action: 'Compose'
-            });
-        }
-        if ([
-            'text',
-            'textarea'
-        ].includes(type ?? '') && type) {
-            return streamText(options ?? {
-                action: 'Compose'
-            });
-        }
-        if (type === 'upload') {
+        if (field?.type === 'upload') {
             return generateUpload();
         }
+        // All supported types use structured object generation when schema is provided server-side
+        return streamObject(options ?? {
+            action: 'Compose'
+        });
     }, [
         generateUpload,
         streamObject,
-        streamText,
-        type
+        field
     ]);
     const stop = useCallback(()=>{
         console.log('Stopping...');
         objectStop();
-        completionStop();
     }, [
-        objectStop,
-        completionStop
+        objectStop
     ]);
     return {
         generate,
-        isLoading: loadingCompletion || loadingObject,
+        isLoading: loadingObject,
         stop
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/ui/Compose/hooks/useGenerate.ts"],"sourcesContent":["import { useCompletion, experimental_useObject as useObject } from '@ai-sdk/react'\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui'\nimport { jsonSchema } from 'ai'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\n\nimport type { ActionMenuItems, GenerateTextarea } from '../../../types.js'\n\nimport {\n  PLUGIN_API_ENDPOINT_GENERATE,\n  PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n  PLUGIN_INSTRUCTIONS_TABLE,\n  PLUGIN_NAME,\n} from '../../../defaults.js'\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\nimport { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js'\nimport { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js'\nimport { useHistory } from './useHistory.js'\n\ntype ActionCallbackParams = { action: ActionMenuItems; params?: unknown }\n\nexport const useGenerate = ({ instructionId }: { instructionId: string }) => {\n  // Create a ref to hold the current instructionId\n  const instructionIdRef = useRef(instructionId)\n\n  // Update the ref whenever instructionId changes\n  useEffect(() => {\n    instructionIdRef.current = instructionId\n  }, [instructionId])\n\n  const { type, path: pathFromContext } = useFieldProps()\n  const editorConfigContext = useEditorConfigContext()\n\n  const { editor } = editorConfigContext\n\n  const { config } = useConfig()\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  const { setValue } = useField<string>({\n    path: pathFromContext ?? '',\n  })\n\n  const { set: setHistory } = useHistory()\n\n  const { getData } = useForm()\n  const { id: documentId, collectionSlug } = useDocumentInfo()\n\n  const localFromContext = useLocale()\n  const {\n    config: { collections },\n  } = useConfig()\n\n  const collection = collections.find((collection) => collection.slug === PLUGIN_INSTRUCTIONS_TABLE)\n  const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection?.admin ?? {}\n  const { schema: editorSchema = {} } = editorConfig\n\n  const memoizedValidator = useMemo(() => {\n    return editorSchemaValidator(editorSchema)\n  }, [editorSchema])\n\n  const memoizedSchema = useMemo(\n    () =>\n      jsonSchema(editorSchema, {\n        validate: (value) => {\n          const isValid = memoizedValidator(value)\n\n          if (isValid) {\n            return {\n              success: true,\n              value,\n            }\n          } else {\n            return {\n              error: new Error('Invalid schema'),\n              success: false,\n            }\n          }\n        },\n      }),\n    [memoizedValidator],\n  )\n\n  const {\n    isLoading: loadingObject,\n    object,\n    stop: objectStop,\n    submit,\n  } = useObject({\n    api: `/api${PLUGIN_API_ENDPOINT_GENERATE}`,\n    onError: (error: any) => {\n      toast.error(`Failed to generate: ${error.message}`)\n      console.error('Error generating object:', error)\n    },\n    onFinish: (result) => {\n      if (result.object) {\n        setHistory(result.object)\n        setValue(result.object)\n      } else {\n        console.log('onFinish: result ', result)\n      }\n    },\n    schema: memoizedSchema,\n  })\n\n  useEffect(() => {\n    if (!object) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      // TODO: Temporary disabled pre validation, sometimes it fails to validate\n      // const validateObject = await memoizedSchema?.validate?.(object)\n      // if (validateObject?.success) {\n        setSafeLexicalState(object, editor)\n      // }\n    })\n  }, [object, editor])\n\n  const {\n    complete,\n    completion,\n    isLoading: loadingCompletion,\n    stop: completionStop,\n  } = useCompletion({\n    api: `${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE}`,\n    onError: (error: any) => {\n      toast.error(`Failed to generate: ${error.message}`)\n      console.error('Error generating text:', error)\n    },\n    onFinish: (prompt, result) => {\n      setHistory(result)\n    },\n    streamProtocol: 'data',\n  })\n\n  useEffect(() => {\n    if (!completion) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      setValue(completion)\n    })\n  }, [completion])\n\n  const streamObject = useCallback(\n    ({ action = 'Compose', params }: ActionCallbackParams) => {\n      const doc = getData()\n\n      const currentInstructionId = instructionIdRef.current\n\n      const options = {\n        action,\n        actionParams: params,\n        instructionId: currentInstructionId,\n      }\n\n      submit({\n        allowedEditorNodes: Array.from(editor?._nodes?.keys() || []),\n        doc: {\n          ...doc,\n          id: documentId,\n        },\n        locale: localFromContext?.code,\n        options,\n      })\n    },\n    [localFromContext?.code, instructionIdRef, documentId],\n  )\n\n  const streamText = useCallback(\n    async ({ action = 'Compose', params }: ActionCallbackParams) => {\n      const doc = getData()\n      const currentInstructionId = instructionIdRef.current\n\n      const options = {\n        action,\n        actionParams: params,\n        instructionId: currentInstructionId,\n      }\n\n      await complete('', {\n        body: {\n          doc: {\n            ...doc,\n            id: documentId,\n          },\n          locale: localFromContext?.code,\n          options,\n        },\n      })\n    },\n    [getData, localFromContext?.code, instructionIdRef, complete, documentId],\n  )\n\n  const generateUpload = useCallback(async () => {\n    const doc = getData()\n    const currentInstructionId = instructionIdRef.current\n\n    return fetch(`${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE_UPLOAD}`, {\n      body: JSON.stringify({\n        collectionSlug: collectionSlug ?? '',\n        doc,\n        documentId,\n        locale: localFromContext?.code,\n        options: {\n          instructionId: currentInstructionId,\n        },\n      } satisfies Parameters<GenerateTextarea>[0]),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n      .then(async (uploadResponse) => {\n        if (uploadResponse.ok) {\n          const { result } = await uploadResponse.json()\n          if (!result) {\n            throw new Error('generateUpload: Something went wrong')\n          }\n\n          setValue(result?.id)\n          setHistory(result?.id)\n          console.log('Image updated...', result)\n        } else {\n          const { errors = [] } = await uploadResponse.json()\n          const errStr = errors.map((error: any) => error.message).join(', ')\n          throw new Error(errStr)\n        }\n        return uploadResponse\n      })\n      .catch((error) => {\n        toast.error(`Failed to generate: ${error.message}`)\n        console.error(\n          'Error generating or setting your upload, please set it manually if its saved in your media files.',\n          error\n        )\n      })\n  }, [getData, localFromContext?.code, instructionIdRef, setValue, documentId, collectionSlug])\n\n  const generate = useCallback(\n    async (options?: ActionCallbackParams) => {\n      if (type === 'richText') {\n        return streamObject(options ?? { action: 'Compose' })\n      }\n\n      if (['text', 'textarea'].includes(type ?? '') && type) {\n        return streamText(options ?? { action: 'Compose' })\n      }\n\n      if (type === 'upload') {\n        return generateUpload()\n      }\n    },\n    [generateUpload, streamObject, streamText, type],\n  )\n\n  const stop = useCallback(() => {\n    console.log('Stopping...')\n    objectStop()\n    completionStop()\n  }, [objectStop, completionStop])\n\n  return {\n    generate,\n    isLoading: loadingCompletion || loadingObject,\n    stop,\n  }\n}\n"],"names":["useCompletion","experimental_useObject","useObject","useEditorConfigContext","toast","useConfig","useDocumentInfo","useField","useForm","useLocale","jsonSchema","useCallback","useEffect","useMemo","useRef","PLUGIN_API_ENDPOINT_GENERATE","PLUGIN_API_ENDPOINT_GENERATE_UPLOAD","PLUGIN_INSTRUCTIONS_TABLE","PLUGIN_NAME","useFieldProps","editorSchemaValidator","setSafeLexicalState","useHistory","useGenerate","instructionId","instructionIdRef","current","type","path","pathFromContext","editorConfigContext","editor","config","routes","api","serverURL","setValue","set","setHistory","getData","id","documentId","collectionSlug","localFromContext","collections","collection","find","slug","custom","editorConfig","admin","schema","editorSchema","memoizedValidator","memoizedSchema","validate","value","isValid","success","error","Error","isLoading","loadingObject","object","stop","objectStop","submit","onError","message","console","onFinish","result","log","requestAnimationFrame","complete","completion","loadingCompletion","completionStop","prompt","streamProtocol","streamObject","action","params","doc","currentInstructionId","options","actionParams","allowedEditorNodes","Array","from","_nodes","keys","locale","code","streamText","body","generateUpload","fetch","JSON","stringify","credentials","headers","method","then","uploadResponse","ok","json","errors","errStr","map","join","catch","generate","includes"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/ui/Compose/hooks/useGenerate.ts"],"sourcesContent":["import { experimental_useObject as useObject } from '@ai-sdk/react'\nimport { useEditorConfigContext } from '@payloadcms/richtext-lexical/client'\nimport { toast, useConfig, useDocumentInfo, useField, useForm, useLocale } from '@payloadcms/ui'\nimport { jsonSchema } from 'ai'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\n\nimport type { ActionMenuItems, GenerateTextarea } from '../../../types.js'\n\nimport {\n  PLUGIN_API_ENDPOINT_GENERATE,\n  PLUGIN_API_ENDPOINT_GENERATE_UPLOAD,\n  PLUGIN_INSTRUCTIONS_TABLE,\n  PLUGIN_NAME,\n} from '../../../defaults.js'\nimport { useFieldProps } from '../../../providers/FieldProvider/useFieldProps.js'\nimport { editorSchemaValidator } from '../../../utilities/editorSchemaValidator.js'\nimport { fieldToJsonSchema } from '../../../utilities/fieldToJsonSchema.js'\nimport { setSafeLexicalState } from '../../../utilities/setSafeLexicalState.js'\nimport { useHistory } from './useHistory.js'\n\ntype ActionCallbackParams = { action: ActionMenuItems; params?: unknown }\n\nexport const useGenerate = ({ instructionId }: { instructionId: string }) => {\n  // Create a ref to hold the current instructionId\n  const instructionIdRef = useRef(instructionId)\n\n  // Update the ref whenever instructionId changes\n  useEffect(() => {\n    instructionIdRef.current = instructionId\n  }, [instructionId])\n\n  const { field, path: pathFromContext } = useFieldProps()\n  const editorConfigContext = useEditorConfigContext()\n\n  const { editor } = editorConfigContext\n\n  const { config } = useConfig()\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  const { setValue } = useField<any>({\n    path: pathFromContext ?? '',\n  })\n\n  const { set: setHistory } = useHistory()\n\n  const { getData } = useForm()\n  const { id: documentId, collectionSlug } = useDocumentInfo()\n\n  const localFromContext = useLocale()\n  const {\n    config: { collections },\n  } = useConfig()\n\n  const collection = collections.find((collection) => collection.slug === PLUGIN_INSTRUCTIONS_TABLE)\n  const { custom: { [PLUGIN_NAME]: { editorConfig = {} } = {} } = {} } = collection?.admin ?? {}\n  const { schema: editorSchema = {} } = editorConfig\n\n  const memoizedValidator = useMemo(() => {\n    return editorSchemaValidator(editorSchema)\n  }, [editorSchema])\n\n  const memoizedSchema = useMemo(\n    () =>\n      jsonSchema(editorSchema, {\n        validate: (value) => {\n          const isValid = memoizedValidator(value)\n\n          if (isValid) {\n            return {\n              success: true,\n              value,\n            }\n          } else {\n            return {\n              error: new Error('Invalid schema'),\n              success: false,\n            }\n          }\n        },\n      }),\n    [memoizedValidator],\n  )\n\n  // Active JSON schema for useObject based on field type\n  const activeSchema = useMemo(() => {\n    const f = field as any\n    const fieldType = f?.type as string | undefined\n    if (fieldType === 'richText') {\n      return memoizedSchema\n    }\n    if (f && f.name && fieldType) {\n      const schemaJson = fieldToJsonSchema(f)\n      if (schemaJson && Object.keys(schemaJson).length > 0) {\n        return jsonSchema(schemaJson)\n      }\n    }\n    return undefined\n  }, [field, memoizedSchema])\n\n  const {\n    isLoading: loadingObject,\n    object,\n    stop: objectStop,\n    submit,\n  } = useObject({\n    api: `/api${PLUGIN_API_ENDPOINT_GENERATE}`,\n    onError: (error: any) => {\n      toast.error(`Failed to generate: ${error.message}`)\n      console.error('Error generating object:', error)\n    },\n    onFinish: (result) => {\n      if (result.object && field) {\n        if (field.type === 'richText') {\n          setHistory(result.object)\n          setValue(result.object)\n        } else if ('name' in field) {\n          setHistory(result.object[field.name])\n          setValue(result.object[field.name])\n        }\n      } else {\n        console.log('onFinish: result, field ', result, field)\n      }\n    },\n    schema: activeSchema as any,\n  })\n\n  useEffect(() => {\n    if (!object) {\n      return\n    }\n\n    requestAnimationFrame(() => {\n      if (field?.type === 'richText') {\n        setSafeLexicalState(object, editor)\n      } else if (field && 'name' in field && object[field.name]) {\n        setValue(object[field.name])\n      }\n    })\n  }, [object, editor, field])\n\n  const streamObject = useCallback(\n    ({ action = 'Compose', params }: ActionCallbackParams) => {\n      const doc = getData()\n\n      const currentInstructionId = instructionIdRef.current\n\n      const options = {\n        action,\n        actionParams: params,\n        instructionId: currentInstructionId,\n      }\n\n      submit({\n        allowedEditorNodes: Array.from(editor?._nodes?.keys() || []),\n        doc: {\n          ...doc,\n          id: documentId,\n        },\n        locale: localFromContext?.code,\n        options,\n      })\n    },\n    [localFromContext?.code, instructionIdRef, documentId],\n  )\n\n  const generateUpload = useCallback(async () => {\n    const doc = getData()\n    const currentInstructionId = instructionIdRef.current\n\n    return fetch(`${serverURL}${api}${PLUGIN_API_ENDPOINT_GENERATE_UPLOAD}`, {\n      body: JSON.stringify({\n        collectionSlug: collectionSlug ?? '',\n        doc,\n        documentId,\n        locale: localFromContext?.code,\n        options: {\n          instructionId: currentInstructionId,\n        },\n      } satisfies Parameters<GenerateTextarea>[0]),\n      credentials: 'include',\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n    })\n      .then(async (uploadResponse) => {\n        if (uploadResponse.ok) {\n          const { result } = await uploadResponse.json()\n          if (!result) {\n            throw new Error('generateUpload: Something went wrong')\n          }\n\n          setValue(result?.id)\n          setHistory(result?.id)\n          console.log('Image updated...', result)\n        } else {\n          const { errors = [] } = await uploadResponse.json()\n          const errStr = errors.map((error: any) => error.message).join(', ')\n          throw new Error(errStr)\n        }\n        return uploadResponse\n      })\n      .catch((error) => {\n        toast.error(`Failed to generate: ${error.message}`)\n        console.error(\n          'Error generating or setting your upload, please set it manually if its saved in your media files.',\n          error,\n        )\n      })\n  }, [getData, localFromContext?.code, instructionIdRef, setValue, documentId, collectionSlug])\n\n  const generate = useCallback(\n    async (options?: ActionCallbackParams) => {\n      if ((field as any)?.type === 'upload') {\n        return generateUpload()\n      }\n      // All supported types use structured object generation when schema is provided server-side\n      return streamObject(options ?? { action: 'Compose' })\n    },\n    [generateUpload, streamObject, field],\n  )\n\n  const stop = useCallback(() => {\n    console.log('Stopping...')\n    objectStop()\n  }, [objectStop])\n\n  return {\n    generate,\n    isLoading: loadingObject,\n    stop,\n  }\n}\n"],"names":["experimental_useObject","useObject","useEditorConfigContext","toast","useConfig","useDocumentInfo","useField","useForm","useLocale","jsonSchema","useCallback","useEffect","useMemo","useRef","PLUGIN_API_ENDPOINT_GENERATE","PLUGIN_API_ENDPOINT_GENERATE_UPLOAD","PLUGIN_INSTRUCTIONS_TABLE","PLUGIN_NAME","useFieldProps","editorSchemaValidator","fieldToJsonSchema","setSafeLexicalState","useHistory","useGenerate","instructionId","instructionIdRef","current","field","path","pathFromContext","editorConfigContext","editor","config","routes","api","serverURL","setValue","set","setHistory","getData","id","documentId","collectionSlug","localFromContext","collections","collection","find","slug","custom","editorConfig","admin","schema","editorSchema","memoizedValidator","memoizedSchema","validate","value","isValid","success","error","Error","activeSchema","f","fieldType","type","name","schemaJson","Object","keys","length","undefined","isLoading","loadingObject","object","stop","objectStop","submit","onError","message","console","onFinish","result","log","requestAnimationFrame","streamObject","action","params","doc","currentInstructionId","options","actionParams","allowedEditorNodes","Array","from","_nodes","locale","code","generateUpload","fetch","body","JSON","stringify","credentials","headers","method","then","uploadResponse","ok","json","errors","errStr","map","join","catch","generate"],"mappings":"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"}

package/dist/ui/Icons/Icons.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import styles from './icons.module.css';
+import LottieAnimation from './LottieAnimation.js';
+export const PluginIcon = ({ color = 'white', isLoading, }) => {
+    return (<span className={styles.actions_icon}>
+      <LottieAnimation isLoading={isLoading}/>
+    </span>);
+};
+export const TuneIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="M450-130v-220h60v80h320v60H510v80h-60Zm-320-80v-60h220v60H130Zm160-160v-80H130v-60h160v-80h60v220h-60Zm160-80v-60h380v60H450Zm160-160v-220h60v80h160v60H670v80h-60Zm-480-80v-60h380v60H130Z"/>
+      </svg>
+    </span>);
+};
+export const LocalLibraryIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="M480-115.38q-67.38-54.93-148.85-86.7Q249.69-233.85 160-240v-373.85q91.77 5.39 174.38 43.81Q417-531.62 480-474.92q63-56.7 145.62-95.12 82.61-38.42 174.38-43.81V-240q-89.92 6.15-171.27 37.92-81.35 31.77-148.73 86.7Zm0-50.16q63-46.23 134-74.56 71-28.33 146-37.44v-291.38q-78.38 13-149.65 50.57-71.27 37.58-130.35 96.66-59.08-59.08-130.35-96.66-71.27-37.57-149.65-50.57v291.38q75 9.11 146 37.44t134 74.56Zm0-451.38q-53.31 0-91.27-37.96-37.96-37.97-37.96-91.27 0-53.31 37.96-91.27 37.96-37.96 91.27-37.96 53.31 0 91.27 37.96 37.96 37.96 37.96 91.27 0 53.3-37.96 91.27-37.96 37.96-91.27 37.96Zm.03-40q36.82 0 63.01-26.22 26.19-26.22 26.19-63.04t-26.22-63.01q-26.22-26.19-63.04-26.19t-63.01 26.21q-26.19 26.22-26.19 63.04t26.22 63.01q26.22 26.2 63.04 26.2Zm-.03-89.23Zm0 324.46Z"/>
+      </svg>
+    </span>);
+};
+export const SpellCheckIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="M564-93.85 407.85-250 450-292.15l114 114 226.77-226.77 42.15 42.15L564-93.85ZM135.39-320l191.69-520h69.38l190.92 520h-68.92l-49.07-142H250.92l-49.84 142h-65.69ZM272-518h178.31L362-765.54h-3.23L272-518Z"/>
+      </svg>
+    </span>);
+};
+export const TranslateIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="m476-100 178.15-460h62.46l178.16 460h-63.62l-45.3-122H584.92l-45.31 122H476ZM160.38-217.69l-42.15-42.16 198.92-199.3q-34.61-35-65.8-83.08Q220.15-590.31 200-640h63.61q17.31 36.31 42.12 72.62 24.81 36.3 53.58 66.07 42.61-43 80.61-104.42T493.62-720H67.69v-60H330v-64.61h60V-780h262.31v60h-97.93q-19.46 67.38-62.03 140.88-42.58 73.5-90.89 121.2l98.69 101.07-22.69 61.62-118.15-121.16-198.93 198.7Zm443.77-57.39h162.46l-81.23-218.23-81.23 218.23Z"/>
+      </svg>
+    </span>);
+};
+export const DocsAddOnIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="M650-131v-120H530v-60h120v-120h60v120h120v60H710v120h-60ZM170-250v-60h281.85q-1.85 15.8-1.35 30.09t2.35 29.91H170Zm0-160v-60h379.08q-17.23 12.15-31.5 27.15-14.27 15-25.96 32.85H170Zm0-160v-60h580v60H170Zm0-160v-60h580v60H170Z"/>
+      </svg>
+    </span>);
+};
+export const SummarizeIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="M320-603.85q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53Zm0 160q15.08 0 25.62-10.53 10.53-10.54 10.53-25.62 0-15.08-10.53-25.62-10.54-10.53-25.62-10.53-15.08 0-25.62 10.53-10.53 10.54-10.53 25.62 0 15.08 10.53 25.62 10.54 10.53 25.62 10.53ZM212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h419.23L820-631.54v419.23Q820-182 799-161q-21 21-51.31 21H212.31Zm0-60h535.38q5.39 0 8.85-3.46t3.46-8.85V-600H600v-160H212.31q-5.39 0-8.85 3.46t-3.46 8.85v535.38q0 5.39 3.46 8.85t8.85 3.46ZM200-760v160-160V-200v-560Z"/>
+      </svg>
+    </span>);
+};
+export const SegmentIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="M380-254.62v-59.99h440v59.99H380ZM380-450v-60h440v60H380ZM140-645.39v-59.99h680v59.99H140Z"/>
+      </svg>
+    </span>);
+};
+export const StylusNoteIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="m487.46-283.15 332.31-332.31q2.69-2.69 2.69-6.54t-2.69-6.54l-38.92-38.92q-2.7-2.69-6.54-2.69-3.85 0-6.54 2.69L435.46-335.15l52 52Zm-251 72.38q-89.23-5-134-39.69-44.77-34.69-44.77-98.16 0-60.76 51-98.57 51-37.81 141.77-45.81 43.62-3.77 65.43-15.77 21.8-12 21.8-33.23 0-29.46-29.5-44.96t-96.73-22.27l5.46-59.62q92.23 8.77 136.5 39.77 44.27 31 44.27 87.08 0 47.61-36.57 75.5-36.58 27.88-106.2 33.5-68.61 5.77-102.92 26.77t-34.31 57.61q0 37.31 28.58 55.51 28.58 18.19 92.65 22.34l-2.46 60Zm260.38 3.15L359.92-344.54l373.54-373.15q17.69-17.69 41.35-17.5 23.65.19 41.34 17.5L870-663.85q17.69 17.7 17.69 41.54 0 23.85-17.69 41.54L496.84-207.62ZM363.23-180q-13.54 3.23-23.84-7.08-10.31-10.31-7.08-23.84l27.61-133.62 136.92 136.92L363.23-180Z"/>
+      </svg>
+    </span>);
+};
+export const EditNoteIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="M180-400v-60h280v60H180Zm0-160v-60h440v60H180Zm0-160v-60h440v60H180Zm344.62 540v-105.69l217.15-216.16q7.46-7.46 16.11-10.5 8.65-3.03 17.3-3.03 9.43 0 18.25 3.53 8.82 3.54 16.03 10.62l37 37.38q6.46 7.47 10 16.16Q860-439 860-430.31t-3.23 17.69q-3.23 9-10.31 16.46L630.31-180H524.62Zm287.69-250.31-37-37.38 37 37.38Zm-240 202.62h38l129.84-130.47-18.38-19-18.62-18.76-130.84 130.23v38Zm149.46-149.47-18.62-18.76 37 37.76-18.38-19Z"/>
+      </svg>
+    </span>);
+};
+export const ArrowIcon = ({ color = 'white', size = 24 }) => {
+    return (<span className={styles.icon}>
+      <svg height={size} viewBox="0 -960 960 960" width={size} xmlns="http://www.w3.org/2000/svg">
+        <path d="m531.69-480-184-184L376-692.31 588.31-480 376-267.69 347.69-296l184-184Z"/>
+      </svg>
+    </span>);
+};