20250626 refresh

chatter/src/components/Messages/components/Footer.js

@@ -16,6 +16,7 @@ export default function Footer({ sendMessage, onChangeMessage, message }) {
         placeholder="Write a message..."
         id="user-message-input"
         onChange={onChangeMessage}
+        value={message}
       />
       <div className="messages__footer__actions">
         <i className="far fa-smile" />
@@ -25,4 +26,4 @@ export default function Footer({ sendMessage, onChangeMessage, message }) {
       </div>
     </div>
   );
-}
+}

chatter/src/components/Messages/components/Messages.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect, useRef } from 'react';
 import io from 'socket.io-client';
 import useSound from 'use-sound';
 import config from '../../../config';
@@ -8,25 +8,95 @@ import Header from './Header';
 import Footer from './Footer';
 import Message from './Message';
 import '../styles/_messages.scss';
+import initialBottyMessage from '../../../common/constants/initialBottyMessage';
 
-const socket = io(
-  config.BOT_SERVER_ENDPOINT,
-  { transports: ['websocket', 'polling', 'flashsocket'] }
-);
+const socket = io(config.BOT_SERVER_ENDPOINT, {
+  transports: ['websocket', 'polling', 'flashsocket']
+});
 
-function Messages() {
+const Messages = () => {
+  const { setLatestMessage } = useContext(LatestMessagesContext);
+  const [messages] = useState([{ message: initialBottyMessage, user: 'bot' }]);
+  const [messageText, setMessageText] = useState('');
+  const [displayError, setDisplayError] = useState({ isVisible: false, message: '' });
+  const [displayTyping, setDisplayTyping] = useState(false);
   const [playSend] = useSound(config.SEND_AUDIO_URL);
   const [playReceive] = useSound(config.RECEIVE_AUDIO_URL);
-  const { setLatestMessage } = useContext(LatestMessagesContext);
+  const refVal = useRef(null);
+
+  const sendMessage = () => {
+    const newMessage = { message: messageText, user: 'me' };
+    messages.push(newMessage);
+    socket.emit('user-message', newMessage.message);
+    setLatestMessage(newMessage.message);
+    playSend();
+    setMessageText('');
+  };
+
+  const handleNewMessage = (newBotMessage) => {
+    playReceive();
+    setLatestMessage(newBotMessage);
+    messages.push({ message: newBotMessage, user: 'bot' });
+    setDisplayTyping(false);
+  };
+
+  const handleBotTyping = () => setDisplayTyping(true);
+
+  const scrollToLastMessage = () => {
+    refVal.current?.scrollIntoView();
+  };
+
+  const displayMessages = () => messages.map((item, index) => (
+    <Message key={index} message={item} nextMessage={messages[index + 1]} botTyping={displayTyping} />
+  ));
+
+  const displayErrorText = () => displayError.isVisible && <p>{displayError.message}</p>;
+
+  useEffect(() => {
+    socket.on('bot-message', handleNewMessage);
+    socket.on('bot-typing', handleBotTyping);
+
+    const errorEvents = ['connect_error', 'disconnect', 'reconnect_error', 'error', 'connect_timeout'];
+
+    socket.on('connect_error', (error) => {
+      setDisplayError({isVisible: true, message: "There was an error connecting."})
+    });
+    socket.on('disconnect', (reason) => {
+      setDisplayError({isVisible: true, message: "There was an error. Disconnected from Botty."})
+    });
+    socket.on('reconnect_error', (error) => {
+      setDisplayError({isVisible: true, message: "There was an error reconnecting."})
+    });
+    socket.on('error', (error) => {
+      setDisplayError({isVisible: true, message: "There was an error. Please refresh and try again."})
+    });
+    socket.on('connect_timeout', (timeout) => {
+      setDisplayError({isVisible: true, message: "There was an error, connection timed out."})
+    });
+
+    scrollToLastMessage();
+
+    return () => {
+      socket.off('bot-message', handleNewMessage);
+      socket.off('bot-typing', handleBotTyping);
+      errorEvents.forEach(event => socket.off(event));
+    };
+  }, []);
 
   return (
     <div className="messages">
       <Header />
       <div className="messages__list" id="message-list">
+        { displayMessages() }
+        { displayTyping && <TypingMessage /> }
+        { displayErrorText() }
+        <div ref={refVal} />
       </div>
-      <Footer message={message} sendMessage={sendMessage} onChangeMessage={onChangeMessage} />
+      {!displayError.isVisible && (
+        <Footer message={messageText} sendMessage={sendMessage} onChangeMessage={(e) => setMessageText(e.target.value)} />
+      )}
     </div>
   );
-}
+};
 
-export default Messages;
+export default Messages;

chatter/src/layouts/CoreLayout/components/IconBackground.js

@@ -16,11 +16,12 @@ function getRandomIcon() {
 function IconRow({ numberOfIcons }) {
   return (
     <div className="icon-background__row">
-      {[...new Array(numberOfIcons)].map(() => {
+      {[...new Array(numberOfIcons)].map((item, index) => {
         const icon = getRandomIcon();
 
         return (
           <i
+            key={index}
             aria-hidden="true"
             className={icon.name}
             style={{
@@ -43,9 +44,9 @@ export default function IconBackground() {
 
   return (
     <div className="icon-background">
-      {[...new Array(numberOfRows)].map(() => (
-        <IconRow numberOfIcons={numberOfElsPerRow} />
+      {[...new Array(numberOfRows)].map((item, index) => (
+        <IconRow key={index} numberOfIcons={numberOfElsPerRow} />
       ))}
     </div>
   )
-}
+}