refactor: message keys

app/react-components/dom/chat/messages.jsx

@@ -3,14 +3,18 @@ import Message from './message.jsx';
 import styles from './messages.module.css';
 
 export default function Messages({chatMessages}) {
+  const messages = [];
+  for (const key in chatMessages) {
+    messages.push(
+      <Message
+        key={key}
+        letters={chatMessages[key]}
+      />,
+    );
+  }
   return (
     <div className={styles.messages}>
-      {chatMessages.map((letters, i) => (
-        <Message
-          key={i}
-          letters={letters}
-        />
-      ))}
+      {messages}
    </div>
   )
 }

app/react-components/dom/entities.jsx

@@ -39,7 +39,10 @@ export default function Entities({
         for (const key in dialogue) {
           dialogues[key] = dialogue[key];
           dialogues[key].letters = parseLetters(dialogues[key].body);
-          setChatMessages((chatMessages) => [dialogues[key].letters, ...chatMessages]);
+          setChatMessages((chatMessages) => ({
+            [[id, key].join('-')]: dialogues[key].letters,
+            ...chatMessages,
+          }));
           const skipListeners = new Set();
           dialogues[key].addSkipListener = (listener) => {
             skipListeners.add(listener);

app/react-components/ui.jsx

@@ -71,7 +71,7 @@ function Ui({disconnected}) {
   const [chatIsOpen, setChatIsOpen] = useState(false);
   const [chatHistory, setChatHistory] = useState([]);
   const [chatHistoryCaret, setChatHistoryCaret] = useState(-1);
-  const [chatMessages, setChatMessages] = useState([]);
+  const [chatMessages, setChatMessages] = useState({});
   const [pendingMessage, setPendingMessage] = useState('');
   useEffect(() => {
     async function setEcsStuff() {