Fix(ChatInput): preserve multiline input by converting newlines to <br> in HTML output (#695)

shashank-bhatotia · web-flow · commit 32f79e7a6611 · 2025-06-12T20:23:52.000+05:30
- Ensures that multiline user input in ChatInput is correctly rendered as multiline in emails and other HTML consumers.
diff --git a/src/components/ChatInput/ChatInput.jsx b/src/components/ChatInput/ChatInput.jsx
@@ -114,7 +114,7 @@ const labels = {
 
 const convertMentionsToHTMLAndPlainText = ({ suggestions, value }) => {
   const mentionsRegex = new RegExp(/@\[[^)]*\)/g);
-  let html = `<p>${value}</p>`;
+  let html = `<p>${value.replace(/\n/g, "<br>")}</p>`; // Replace newlines with <br> for HTML output
   let plainText = value;
   const allMentions = html.matchAll(mentionsRegex);
 
@@ -140,7 +140,6 @@ const convertMentionsToHTMLAndPlainText = ({ suggestions, value }) => {
 
   return { html, plainText };
 };
-
 export const ChatInput = forwardRef(
   (
     {

Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ const labels = {`
`114`	`114`
`115`	`115`	`const convertMentionsToHTMLAndPlainText = ({ suggestions, value }) => {`
`116`	`116`	`const mentionsRegex = new RegExp(/@\[[^)]*\)/g);`
`117`		- let html = `<p>${value}</p>`;
	`117`	+ let html = `<p>${value.replace(/\n/g, "<br>")}</p>`; // Replace newlines with <br> for HTML output
`118`	`118`	`let plainText = value;`
`119`	`119`	`const allMentions = html.matchAll(mentionsRegex);`
`120`	`120`
`@@ -140,7 +140,6 @@ const convertMentionsToHTMLAndPlainText = ({ suggestions, value }) => {`
`140`	`140`
`141`	`141`	`return { html, plainText };`
`142`	`142`	`};`
`143`		`-`
`144`	`143`	`export const ChatInput = forwardRef(`
`145`	`144`	`(`
`146`	`145`	`{`