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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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