Skip to content

[Bug] Nested table elements can't be restored from chat history #380

Description

@thrandale

Bug Description:
If you have a message that contains a html table, that table can't be restored from chat history

Steps To Reproduce:
The issue can be seen with the following snippet:

import type { CSSProperties } from "react";
import ChatBot, {
	useChatHistory,
	type Flow,
	type Settings,
} from "react-chatbotify";
import "./App.css";

const ComponentWithTable = () => {
	const styles: Record<string, CSSProperties> = {
		table: {
			borderCollapse: "collapse",
		},
		th: {
			border: "1px solid #ddd",
			padding: "8px",
			backgroundColor: "#f2f2f2",
		},
		td: {
			border: "1px solid #ddd",
			padding: "8px",
		},
	};

	return (
		<table style={styles.table}>
			<thead>
				<tr>
					<th scope="col" style={styles.th}>
						Feature
					</th>
					<th scope="col" style={styles.th}>
						Initial render
					</th>
					<th scope="col" style={styles.th}>
						After reload
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row" style={styles.th}>
						Table structure
					</th>
					<td style={styles.td}>Expected</td>
					<td style={styles.td}>Should remain intact</td>
				</tr>
			</tbody>
		</table>
	);
};

function App() {
	const { getHistoryMessages } = useChatHistory();

	const flow: Flow = {
		start: {
			component: () => {
				if (getHistoryMessages().length == 0) {
					return <ComponentWithTable />;
				}
				return undefined;
			},
		},
	};

	const settings: Settings = {
		chatHistory: {
			autoLoad: true,
		},
		chatWindow: {
			defaultOpen: true,
		},
	};

	return <ChatBot flow={flow} settings={settings} />;
}

export default App;

Expected behavior:
I expect the table to be restored from chat history as it was shown on the initial load.

Current Behavior:
On Initial Send:

Image

After reloading (with the console error App.tsx:88 In HTML, text nodes cannot be a child of <table>. This will cause a hydration error.:

Image

Library version:
2.5.0

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome / Safari

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions