import useWidgetInstance from '@chatbotkit/react/hooks/useWidgetInstance' import { Body } from '@react-email/body' import { Heading } from '@react-email/heading' import { Hr } from '@react-email/hr' import { Html } from '@react-email/html' import { Markdown } from '@react-email/markdown' import { renderAsync } from '@react-email/render' import { Text } from '@react-email/text' import clsx from 'clsx' function getNextElement(children) { return children?.map?.((child) => { switch (child.type) { case 'layout': return case 'h': case 'heading': return case 'hr': case 'divider': return case 'md': case 'markdown': return case 'p': case 'paragraph': return default: return null } }) } function LayoutElement({ dsl }) { return ( {getNextElement(dsl.children)} ) } function HeadingElement({ dsl }) { return {dsl.text} } function HrElement({ dsl }) { return

} function MarkdownElement({ dsl }) { return {dsl.text} } function ParagraphElement({ dsl }) { return {dsl.text} } function reducer(state, action) { const { type, value } = action switch (type) { case 'SET_DSL': { return { ...state, dsl: value, } } } } export function useHTMLGenerator(dsl) { const [html, setHtml] = useState('') useEffect(() => { async function doRender() { const children = <>{getNextElement(dsl)} const html = await renderAsync(children) setHtml(html) } doRender() }, [dsl]) return html } export default function Page() { const [state, dispatch] = useReducer(reducer, { dsl: [ { type: 'layout', children: [ { type: 'p', text: 'Hello, world!' }, { type: 'hr' }, { type: 'p', text: 'This is a test email' }, { type: 'hr' }, { type: 'markdown', text: '# Goodbye!' }, ], }, ], }) const dslRef = useRef(state.dsl) useEffect(() => { dslRef.current = state.dsl }, [state.dsl]) const html = useHTMLGenerator(state.dsl) const widget = useWidgetInstance('chatbotkit-widget') useEffect(() => { // if the widget is not ready, do nothing if (!widget) { return } // setup the functions available to the widget AI bot widget.functions = { getDsl: { description: 'Get the DSL for the email template', parameters: {}, handler: async () => { return { value: dslRef.current } }, }, setDsl: { description: 'Set the DSL for the email template', parameters: { type: 'object', properties: { value: { type: 'array', description: 'The DSL for the email template', items: { type: 'object', properties: { type: { type: 'string', description: 'The type of element', }, style: { type: 'object', description: 'The style for this element', properties: {}, }, children: { type: 'array', description: 'The children elements', items: { type: 'object', properties: {}, }, }, }, }, }, }, required: ['value'], }, handler: async ({ value }) => { dispatch({ type: 'SET_DSL', value }) return { value } }, }, } }, [widget, dispatch]) return (

) }

Email Template Generator