From 908a6fd986492492a8fd722baab111d72502342c Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sun, 14 Jul 2024 16:33:58 -0500
Subject: [PATCH] fix: chat state and ux

---
 app/react-components/dom/chat/chat.jsx        | 21 ++++++++++-
 app/react-components/dom/chat/chat.module.css |  5 ++-
 app/react-components/dom/chat/input.jsx       | 37 +++++++++++--------
 app/react-components/ui.jsx                   | 11 ++++++
 4 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/app/react-components/dom/chat/chat.jsx b/app/react-components/dom/chat/chat.jsx
index b073be4..2d55f19 100644
--- a/app/react-components/dom/chat/chat.jsx
+++ b/app/react-components/dom/chat/chat.jsx
@@ -5,23 +5,42 @@ import Messages from './messages.jsx';
 
 export default function Chat({
   chatHistory,
+  chatHistoryCaret,
+  chatInputRef,
   chatMessages,
   onClose,
   message,
+  pendingMessage,
+  setChatHistoryCaret,
   setChatHistory,
   setMessage,
+  setPendingMessage,
 }) {
   return (
-    <div className={styles.chat}>
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      onMouseDown={(event) => {
+        event.stopPropagation();
+      }}
+      onMouseUp={(event) => {
+        event.stopPropagation();
+      }}
+      className={styles.chat}
+    >
       <Messages
         chatMessages={chatMessages}
       />
       <Input
         chatHistory={chatHistory}
+        chatHistoryCaret={chatHistoryCaret}
         onClose={onClose}
         message={message}
+        chatInputRef={chatInputRef}
+        pendingMessage={pendingMessage}
         setChatHistory={setChatHistory}
+        setChatHistoryCaret={setChatHistoryCaret}
         setMessage={setMessage}
+        setPendingMessage={setPendingMessage}
       />
     </div>
   );
diff --git a/app/react-components/dom/chat/chat.module.css b/app/react-components/dom/chat/chat.module.css
index 1f006cd..83333f3 100644
--- a/app/react-components/dom/chat/chat.module.css
+++ b/app/react-components/dom/chat/chat.module.css
@@ -1,11 +1,12 @@
 .chat {
   background-color: #00000044;
+  bottom: 0;
   display: flex;
   flex-direction: column;
   font-family: Cookbook, Georgia, 'Times New Roman', Times, serif;
-  position: absolute;
-  bottom: 0;
   max-height: 25%;
+  position: absolute;
+  user-select: text;
   width: 100%;
 }
 
diff --git a/app/react-components/dom/chat/input.jsx b/app/react-components/dom/chat/input.jsx
index bbd812a..80323e6 100644
--- a/app/react-components/dom/chat/input.jsx
+++ b/app/react-components/dom/chat/input.jsx
@@ -5,14 +5,18 @@ import {useClient} from '@/context/client.js';
 import styles from './input.module.css';
 
 export default function ChatInput({
+  setChatHistoryCaret,
   chatHistory,
+  chatHistoryCaret,
+  chatInputRef,
   message,
+  pendingMessage,
   setChatHistory,
   setMessage,
+  setPendingMessage,
 }) {
   const client = useClient();
   const [disabled, setDisabled] = useState(true);
-  const [historyCaret, setHistoryCaret] = useState(0);
   useEffect(() => {
     setDisabled(false);
   }, []);
@@ -26,6 +30,8 @@ export default function ChatInput({
             payload: {type: 'chat', value: message},
           });
           setChatHistory([message, ...chatHistory]);
+          setChatHistoryCaret(-1);
+          setPendingMessage('');
           setMessage('');
         }
         event.preventDefault();
@@ -39,30 +45,28 @@ export default function ChatInput({
         onKeyDown={(event) => {
           switch (event.key) {
             case 'ArrowDown': {
-              if (0 === historyCaret) {
+              if (-1 === chatHistoryCaret) {
                 break;
               }
-              let localHistoryCaret = historyCaret - 1;
-              setMessage(chatHistory[localHistoryCaret])
-              setHistoryCaret(localHistoryCaret);
-              if (0 === localHistoryCaret) {
-                setChatHistory(chatHistory.slice(1));
+              else if (0 === chatHistoryCaret) {
+                setMessage(pendingMessage);
+                setPendingMessage('');
               }
+              else {
+                setMessage(chatHistory[chatHistoryCaret - 1])
+              }
+              setChatHistoryCaret(chatHistoryCaret - 1);
               break;
             }
             case 'ArrowUp': {
-              if (historyCaret === chatHistory.length - 1) {
+              if (chatHistory.length - 1 === chatHistoryCaret) {
                 break;
               }
-              let localHistoryCaret = historyCaret;
-              let localChatHistory = chatHistory;
-              if (0 === historyCaret) {
-                localChatHistory = [message, ...localChatHistory];
-                setChatHistory(localChatHistory);
+              if (-1 === chatHistoryCaret) {
+                setPendingMessage(message);
               }
-              localHistoryCaret += 1;
-              setMessage(localChatHistory[localHistoryCaret])
-              setHistoryCaret(localHistoryCaret);
+              setMessage(chatHistory[chatHistoryCaret + 1])
+              setChatHistoryCaret(chatHistoryCaret + 1);
               break;
             }
           }
@@ -72,6 +76,7 @@ export default function ChatInput({
         }}
         maxLength="255"
         ref={(element) => {
+          chatInputRef.current = element;
           if (element) {
             element.focus();
           }
diff --git a/app/react-components/ui.jsx b/app/react-components/ui.jsx
index 337e366..6956e8d 100644
--- a/app/react-components/ui.jsx
+++ b/app/react-components/ui.jsx
@@ -50,6 +50,7 @@ const devEventsChannel = {
 export default function Ui({disconnected}) {
   // Key input.
   const client = useClient();
+  const chatInputRef = useRef();
   const gameRef = useRef();
   const [mainEntity, setMainEntity] = useMainEntity();
   const [debug, setDebug] = useDebug();
@@ -69,7 +70,9 @@ export default function Ui({disconnected}) {
   const [message, setMessage] = useState('');
   const [chatIsOpen, setChatIsOpen] = useState(false);
   const [chatHistory, setChatHistory] = useState([]);
+  const [chatHistoryCaret, setChatHistoryCaret] = useState(-1);
   const [chatMessages, setChatMessages] = useState([]);
+  const [pendingMessage, setPendingMessage] = useState('');
   useEffect(() => {
     async function setEcsStuff() {
       const {default: Components} = await import('@/ecs-components/index.js');
@@ -102,6 +105,9 @@ export default function Ui({disconnected}) {
         setChatIsOpen(false);
         return;
       }
+      if (chatInputRef.current) {
+        chatInputRef.current.focus();
+      }
       if (chatIsOpen) {
         return;
       }
@@ -447,10 +453,15 @@ export default function Ui({disconnected}) {
           {chatIsOpen && (
             <Chat
               chatHistory={chatHistory}
+              chatHistoryCaret={chatHistoryCaret}
+              chatInputRef={chatInputRef}
               chatMessages={chatMessages}
               message={message}
+              pendingMessage={pendingMessage}
               setChatHistory={setChatHistory}
+              setChatHistoryCaret={setChatHistoryCaret}
               setMessage={setMessage}
+              setPendingMessage={setPendingMessage}
               onClose={() => {
                 setChatIsOpen(false);
               }}