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:
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.:
Library version:
2.5.0
Desktop (please complete the following information):
- OS: Windows
- Browser: Chrome / Safari
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:
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:
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.:Library version:
2.5.0
Desktop (please complete the following information):