Generative AI Page Designer Component

[kevinxh]

I'm looking to do ship nightly releases for the Gen AI PD component to make this feature avaliable to the pilot customers. This way we can still iterate on the API without worrying about making breaking changes until we beta/GA this feature.

TODO - I need to figure out how to include this in a nightly build.

[kevinxh]

there is a backlog ticket to code split the react-jsx-parser lib.

[kevinxh]

Well, i don't like the name of this prop... Any other ideas?

[clavery]

As mentioned before this should look at the component.typeId to determine if this is in fact the EGPT component. Otherwise this can/will get triggered by unrelated components that have this (commonly-named) property.

[clavery]

Is there a strong reason the eGPT component needs to be elevated to special status in this "container" component? Can it not just be another PD "ComponentClass" that is added to the ComponentMap of the page?

That would give you a few benefits:

• You can move this logic out of this file including the heavy react-jsx-parser dependency. It would only be brought in if the customer elects to add it to their component map and wouldn't affect everyones (or the default) bundle size. Right now this is brought in once they use this version of the SDK.
• Avoids adding new props to the Page wrapper like JsxParserComponents. Instead customers add the egpt assisted component where they are already used to
• Lets folks use the einstein assisted component directly (like in their own page designer implementations: like my own which is slightly different in it's wrappers)
  • Related to this you could, in theory if you wanted to, ship the eGPT component as a separate package instead of in commerce-sdk-react
• In theory customers can use the egpt editor in their own components that might have other attributes. So this would support that since they could dispatch the JSX part to be handled by the EGPT component.

Since you still need to know the "JsxParserComponents" instead of passing in the component class itself you can have a higher-order function create it. i.e. Thinking customers could initialize their page designer based page like this which would look very familiar

import {usePage} from '@salesforce/commerce-sdk-react'
import {Page} from '@salesforce/commerce-sdk-react/components'
import {makeEinsteinAssistedComponent} from '@salesforce/commerce-sdk-react/components/egpt'

import {ImageTile, ImageWithText} from '../../page-designer/assets'
// import chakra components, ideally define this constant in 1 shared place
const DEFAULT_EGPT_JSX_COMPONENTS = {
    // bunch of chakra components
    
    // add table support
    TableContainer,
    Table,
    Thead,
    Tbody,
    Th,
    Td,
    Tr,
    TableCaption,
}

import {
    Carousel
} from '../../page-designer/layouts'

const PAGEDESIGNER_TO_COMPONENT = {
    'commerce_assets.photoTile': ImageTile,
    'commerce_assets.imageAndText': ImageWithText,
    'commerce_layouts.carousel': Carousel,
    'einstein.einsteinAssisted': makeEinsteinAssistedComponent({
        ...DEFAULT_EGPT_JSX_COMPONENTS,
        SomeOtherComponent
    })
}

const PageViewer = () => {
    // ...
    return (
        <Box layerStyle={'page'}>
            <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
        </Box>
    )
}