@ai-stack/payloadcms/dist/fields/ComposeField/ComposeField.jsx

<p align="center"> <img alt="Payload AI Plugin" src="assets/payload-ai-intro.gif" width="100%" /> </p>

'use client';
import { FieldDescription, useDocumentInfo } from '@payloadcms/ui';
import React from 'react';
import { FieldProvider } from '../../providers/FieldProvider/FieldProvider.js';
import { useInstructions } from '../../providers/InstructionsProvider/useInstructions.js';
import { Compose } from '../../ui/Compose/Compose.js';
export const ComposeField = (props) => {
    const { collectionSlug } = useDocumentInfo();
    const finalSchemaPath = props?.schemaPath ??
        (collectionSlug ? `${collectionSlug}.${props?.path ?? ''}` : (props?.path ?? ''));
    const { id: instructionId, disabled, hasInstructions, isConfigAllowed, } = useInstructions({
        schemaPath: finalSchemaPath,
    });
    const adminDescription = props?.field?.admin || {};
    const description = "description" in adminDescription ? adminDescription.description : "";
    return (<FieldProvider context={{
            field: props?.field,
            path: props?.path ?? '',
            schemaPath: finalSchemaPath,
        }}>
      {hasInstructions && instructionId && !disabled ? (<Compose descriptionProps={{
                ...props,
                field: props?.field,
                path: props?.path ?? '',
                schemaPath: finalSchemaPath,
            }} instructionId={instructionId} isConfigAllowed={isConfigAllowed}/>) : null}

      <div>
        <FieldDescription description={description} path={props?.path}/>
      </div>
    </FieldProvider>);
};