fix: Xpert bugs

This commit fixes a number of bugs in the Xpert. These fixes include changing the propType for the chatboxContainerRef from a string to an object, storing serializable values for dates in Redux, and correctly dispatching the addChatMessage thunk action creator.

src/components/ChatBox/index.jsx

@@ -28,12 +28,10 @@ const ChatBox = ({ messageList, chatboxContainerRef }) => {
 };
 
 ChatBox.propTypes = {
-  messageList: PropTypes.arrayOf(PropTypes.shape({
-    role: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    timestamp: PropTypes.instanceOf(Date).isRequired,
-  })).isRequired,
-  chatboxContainerRef: PropTypes.string.isRequired,
+  chatboxContainerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element)  }),
+  ]).isRequired,
 };
 
 export default ChatBox;

src/components/Message/index.jsx

@@ -7,21 +7,23 @@ const Message = ({ variant, message, timestamp }) => {
     return null;
   }
 
+  const parsedTimestamp = new Date(Date.parse(timestamp));
+
   return (
     <div
       className={`message ${variant} ${variant === 'user' ? 'align-self-end' : ''} text-left my-1 mx-2 py-1 px-2`}
       data-hj-suppress
     >
       {message}
-      <div className="time text-right pl-2">{`${timestamp?.getHours()}:${timestamp?.getMinutes()}:${timestamp?.getSeconds()}`}</div>
+      <div className="time text-right pl-2">{`${parsedTimestamp?.getHours()}:${parsedTimestamp?.getMinutes()}:${parsedTimestamp?.getSeconds()}`}</div>
     </div>
   );
 };
 
 Message.propTypes = {
   variant: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
-  timestamp: PropTypes.instanceOf(Date).isRequired,
+  timestamp: PropTypes.string.isRequired,
 };
 
 export default Message;

src/data/thunks.js

@@ -11,10 +11,15 @@ import {
 export function addChatMessage(role, content) {
   return (dispatch, getState) => {
     const { messageList, conversationId } = getState().learningAssistant;
+
+    // Redux recommends only serializable values in the store, so we'll stringify the timestap to store in Redux.
+    // When we need to operate on the Date object, we'll deserialize the string.
+    const timestamp = new Date();
+
     const message = {
       role,
       content,
-      timestamp: new Date(),
+      timestamp: timestamp.toString(),
     };
     const updatedMessageList = [...messageList, message];
     dispatch(setMessageList({ messageList: updatedMessageList }));
@@ -33,7 +38,7 @@ export function getChatResponse(courseId) {
     const { messageList } = getState().learningAssistant;
     try {
       const message = await fetchChatResponse(courseId, messageList);
-      addChatMessage(message.role, message.content);
+      dispatch(addChatMessage(message.role, message.content));
     } catch (error) {
       dispatch(setApiError());
     }