Add React-Email + OpenUI Renderer chat#371
Merged
i-subham23 merged 27 commits intomainfrom Mar 24, 2026
Merged
Conversation
- Introduced a new example project, `react-email-chat`, showcasing an AI-powered email generator using OpenUI and React Email. - Added essential configuration files including package.json, ESLint, PostCSS, and TypeScript settings. - Implemented core components for email generation, including a responsive layout and theme management. - Established API routes for chat interactions with OpenAI, including a system prompt for generating email content. - Created a README with setup instructions, features, and component descriptions to facilitate onboarding for developers. - Included global CSS for consistent styling using Tailwind CSS. This commit sets the foundation for further development and enhancements in the react-email-chat example.
- Introduced `ComposePage` and `ChatPage` components to manage email composition and chat interactions. - Implemented session management for saving and loading messages and view state using sessionStorage. - Updated global CSS to style placeholder text for input fields in both light and dark themes. - Refactored the main `Page` component to integrate new components and improve layout. - Added utility functions for content parsing and HTML formatting to enhance email rendering capabilities. - Included loading indicators and conversation starters to improve user experience. This commit significantly enhances the functionality and user interface of the React Email Chat example.
- Deleted the `react-email-chat` example project, including all associated files such as configuration, components, and styles. - Updated `pnpm-lock.yaml` to reflect the removal of dependencies related to the deleted example. - Modified `pnpm-workspace.yaml` to exclude the `react-email-chat` package from the workspace. - Cleaned up environment and configuration files, ensuring no remnants of the removed example remain. This commit streamlines the project by removing an unused example, improving overall maintainability.
- Deleted the `react-email-chat` package and its associated files, including configuration and lock files. - Updated `pnpm-workspace.yaml` to exclude the removed package from the workspace. - Refactored dependencies in `package.json` to use workspace links for related packages. - Cleaned up imports in the `react-email-genui` components to streamline code and improve maintainability. This commit simplifies the project structure by removing the unused `react-email-chat` package and optimizing related configurations.
- Introduced a custom hook, `useIsMobile`, to manage mobile responsiveness based on window width. - Updated layout and styling in `ChatPage` to include a mobile toggle for HTML and preview views, ensuring a better user experience on smaller screens. - Adjusted padding, font sizes, and button dimensions in `ComposePage` for improved usability on mobile devices. - Enhanced grid layout for conversation starters in `ComposePage` to adapt to mobile view, optimizing space and accessibility. These changes significantly improve the mobile experience for users interacting with the email chat application.
- Updated loading indicators to include a spinning animation for mobile devices, enhancing visual feedback during email generation. - Adjusted button styles and dimensions based on screen size, ensuring a consistent user experience across devices. - Refined layout properties such as padding and gap to better accommodate mobile users, improving overall usability. These changes significantly enhance the mobile experience in the ChatPage component, making it more user-friendly and visually appealing.
- Introduced the `react-email-chat` package, including essential configuration files such as `package.json`, `.gitignore`, and `.npmrc`. - Implemented core components like `ComposePage` and `ChatPage` for managing email interactions. - Added a new `generate-prompt.ts` script for dynamic prompt generation. - Updated ESLint configuration to accommodate new rules for specific files. - Enhanced `next.config.ts` to support turbopack with the correct root directory. - Created a new `pnpm-lock.yaml` to manage dependencies effectively. These changes lay the groundwork for further development of the React Email Chat application, enhancing its functionality and maintainability.
- Added the `react-email-chat` example project, showcasing an AI-powered email generator using OpenUI and React Email. - Included essential configuration files such as `package.json`, ESLint, PostCSS, and TypeScript settings. - Developed core components including `ComposePage`, `ChatPage`, and utility functions for content parsing and HTML formatting. - Established API routes for chat interactions with OpenAI, integrating a system prompt for generating email content. - Created a README with setup instructions, features, and component descriptions to facilitate onboarding for developers. - Enhanced global CSS for consistent styling using Tailwind CSS. These changes lay a solid foundation for further development and enhancements in the React Email Chat example.
…l Chat example - Created a new TypeScript definition file `next-env.d.ts` for the `react-email-chat` example to enhance type safety and integration with Next.js. - Updated the `generate:prompt` script in `package.json` to reference the new `chat-library.tsx` file, improving prompt generation functionality. - Removed the obsolete `.gitkeep` file from the `src/generated` directory and added a new `system-prompt.txt` file containing the AI assistant's response guidelines. These changes improve the structure and functionality of the React Email Chat example, ensuring better type support and prompt management.
…pdating dependencies - Removed the `@openuidev/react-ui` dependency from the `react-email-chat` example, streamlining the project. - Updated the `generate:prompt` script to reference the new `library.ts` file, enhancing prompt generation functionality. - Refactored the `ChatPage` and `ComposePage` components to improve structure and maintainability. - Replaced the obsolete `chat-library.tsx` with a new `library.ts` that consolidates email-related components and utilities. - Enhanced the `pnpm-lock.yaml` to reflect updated dependencies and ensure consistency across the project. These changes improve the overall organization and functionality of the React Email Chat example, ensuring better integration and performance.
…session management - Removed the `ready` state and adjusted the session restoration logic to occur synchronously on the first render, enhancing performance and reducing complexity. - Updated the `restoredRef` to use a nullable boolean type for better clarity in state management. - Deleted the unused `library.ts` file, streamlining the project by removing unnecessary code. These changes enhance the overall efficiency and maintainability of the EmailApp component in the React Email Chat example.
- Rearranged and updated component imports in `library.ts` to enhance clarity and maintainability. - Moved `EmailCard` import above `FollowUpItem` and adjusted the order of form component imports for better structure. These changes streamline the import section of the file, making it easier to navigate and manage component dependencies.
abhithesys
reviewed
Mar 23, 2026
- Removed the `lucide-react` dependency from both `package.json` files in the `react-email` and `react-email-chat` examples, streamlining the project. - Updated the `generate:prompt` script in the `react-email-chat` example to provide a static message instead of generating a prompt dynamically. - Refactored the `render-email.tsx` file by removing unused components, enhancing code clarity and maintainability. - Updated the `pnpm-lock.yaml` to reflect the changes in dependencies and ensure consistency across the project. These changes improve the overall organization and functionality of the React Email Chat example, ensuring better integration and performance.
- Removed the `@react-email/render` dependency from `package.json` and updated the `pnpm-lock.yaml` to reflect this change, streamlining the project. - Refactored the `ChatPage` component to use the new `emailChatLibrary` instead of the deprecated `emailLibrary`, enhancing code clarity. - Updated the `system-prompt.txt` to reflect changes in the email generation process, including the new root component definition. - Introduced new components such as `EmailCard`, `FollowUpBlock`, and `TextContent` to improve the structure and functionality of the chat interface. These changes enhance the overall organization and performance of the React Email Chat example, ensuring better integration and user experience.
- Updated the `generate:prompt` script in `package.json` to generate the system prompt dynamically, improving the email generation process. - Changed the model used in the chat API from "gpt-4o" to "gpt-5.4" for enhanced performance. - Implemented user scroll tracking in the `ChatPage` component to improve user experience during email generation. - Expanded the `STARTERS` array with new email templates, including a launch announcement and an abandoned cart reminder, to provide users with more options. - Updated the `system-prompt.txt` to reflect changes in the email generation capabilities, ensuring accurate guidance for the AI. These changes enhance the overall functionality and user experience of the React Email Chat example, making it more robust and user-friendly.
- Updated the `generate:prompt` script in `package.json` to use the new `emailLibrary` from `@openuidev/react-email`, enhancing prompt generation. - Replaced instances of `emailChatLibrary` with `emailLibrary` in the `ChatPage` component for consistency and improved functionality. - Removed the deprecated `chat-library.tsx` file, streamlining the project structure and reducing complexity. - Cleaned up imports in `index.ts` to improve organization and maintainability. These changes enhance the overall functionality and clarity of the React Email Chat example, ensuring better integration with the updated email library.
- Introduced the `react-email` example, showcasing an AI-powered email generator using OpenUI and React Email. - Added a new `react-email` component library with 44 email components for dynamic email generation. - Implemented a live preview feature that allows users to see email designs in real-time as they describe them. - Created a README with setup instructions, features, and project structure to assist developers. - Included necessary configuration files such as `package.json`, ESLint, PostCSS, and TypeScript settings. These changes enhance the functionality and usability of the React Email example, providing a robust foundation for future enhancements.
- Updated `eslint` from version 10.0.2 to 9.29.0 in multiple dependencies to ensure compatibility and stability. - Changed the `resolve` package version from 1.22.10 to 1.22.11 for minor improvements. - Removed the `zod` dependency from the project, streamlining the dependency list. - Renamed the `examples/react-email-chat` directory to `examples/react-email` for clarity and consistency. These changes enhance the overall dependency management and organization of the project.
- Introduced `lucide-react` as a dependency in `package.json` for improved icon usage. - Replaced the `ChatPage` component with a new `EmailEditor` component to enhance email composition functionality. - Updated the `compose-page.tsx` to utilize the new `Send` icon from `lucide-react`. - Removed unused components such as `content-parser.ts`, `format-html.ts`, and `icons.tsx` to streamline the project structure. These changes improve the overall functionality and organization of the React Email example, providing a more robust email editing experience.
… new rendering method - Deleted the `render-email.tsx` file to eliminate unused code and streamline the project. - Updated the `EmailEditor` component to utilize the new rendering method from `@react-email/render`, enhancing the email generation process. - Adjusted the onStreamingEnd callback to reflect the new rendering logic, improving overall functionality. These changes enhance the clarity and performance of the React Email example, ensuring better integration with the updated rendering approach.
- Updated import paths in `layout.tsx` and `page.tsx` to use camelCase for `useSystemTheme`, `composePage`, and `emailEditor`. - Removed the deprecated `email-editor.tsx` file to streamline the project structure. - Introduced new components: `LoadingDots`, `ComposePage`, and various email editor components to enhance functionality and user experience. These changes improve code consistency and organization, providing a more robust email editing experience.
- Clarified the usage of the `useEmailRendering` hook in the `react-email.mdx` file to specify client-side rendering. - Improved the README with prerequisites, setup instructions, and key dependencies for better onboarding. - Enhanced project structure by organizing components into dedicated directories for better maintainability. - Updated commands for starting the development server to reflect the new directory structure. These changes improve clarity and usability for developers working with the React Email example.
- Updated `pnpm-lock.yaml` to include `tsx` version 4.20.3 for improved TypeScript support. - Added `tsx` as a dependency in `examples/react-email/package.json` to ensure compatibility with the latest features. These changes enhance the development experience by integrating the latest TypeScript tooling.
- Removed the `useSystemTheme` hook and its associated `ThemeProvider` to simplify theme management in the application. - Updated `ComposePage` and `EmailEditor` components to use a hardcoded dark mode instead of dynamic theme detection. - Adjusted the `useEmailRendering` hook to remove unnecessary checks related to the `openuiCode` variable. - Enhanced the `CodeBlock` component to ensure default language handling is more robust. These changes improve the overall code clarity and reduce complexity in theme management across the React Email example.
i-subham23
force-pushed
the
sd/example/react-email-chat
branch
from
e4574bd to
1585fcc
Compare
- Moved email components and their associated groups from `index.ts` to a new `library.ts` file for better modularity and maintainability. - This restructuring enhances the clarity of the email component library, making it easier to manage and extend in the future. These changes improve the overall organization of the React Email example, facilitating easier access to components and their documentation.
abhithesys
previously approved these changes
Mar 24, 2026
Contributor
|
can you add it in the build? |
- Updated the GitHub Actions workflow to include 'react-email' as a publishable package option. - Added new linting and formatting scripts to the `react-email` package for improved code quality checks. - Refactored the `CustomerReview` component for better readability by adjusting code formatting. These changes improve the development workflow and maintainability of the React Email package.
abhithesys
approved these changes
Mar 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
packages/react-email-chat, a Next.js email builder powered by OpenUI GenUIand
@react-email/components. Includes a chat interface where users describe emailsand get live-rendered previews with HTML export.
code block, markdown), layout (section, columns), pre-built headers (side nav, centered
nav, social icons), pre-built footers (centered, two-column), and rich patterns
(article, avatar, bento grid, checkout table, customer review, feature grid/list,
image grid, numbered steps, pricing card, product card, stats, survey rating,
testimonial).
Form,Button,Input, etc.) from@openuidev/react-ui/genui-libto support external library consumers.