Fixed pages layouy

components/Main/Inbox/AddUserModal/index.tsx

@@ -31,6 +31,13 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 }) => {
     const { enqueueSnackbar } = useSnackbar();
 
+    console.log("projectMembersState In Add User Modal : ", projectMembersState);
+    console.log("usersListSingleChat In Add User Modal : ", usersListSingleChat);
+    console.log("signedInUserData In Add User Modal : ", signedInUserData);
+    console.log("isSignedIn In Add User Modal : ", isSignedIn);
+    console.log("isOpen In Add User Modal : ", isOpen);
+    console.log("setIsOpen In Add User Modal : ", setIsOpen);
+    console.log("usersListSingleChat In Add User Modal : ", usersListSingleChat);
     interface ProjectMemberOptionType {
         title: string;
     }
@@ -75,13 +82,15 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
                 uid: value.title,
                 email: value.title,
                 name: name,
-                lastMessage: 'Hi',
+                lastMessage: '',
                 lastMessageTime: new Date().toLocaleTimeString(),
                 profilePic: "/static/images/avatar/1.jpg",
                 isOnline: true
             }
 
-            console.log("UsersListSingleChat ===> ", usersListSingleChat);
+            alert("Chat User ===> " + JSON.stringify(chatUser));
+
+            console.log("Chat User ===> ", chatUser);
 
             // Check if user already exists in the database by checking the value in the 
             // projectMembersState array

components/Main/Inbox/index.tsx

@@ -229,7 +229,6 @@ const Inbox: React.FC<InboxProps> = ({ email }) => {
         };
     }, [router.query]);
     // FOR GETTING CHATLISTPROJECTCHAT
-    ////////////////////////////////////// FOR GETTING PROJECTS DATA //////////////////////////////////////
 
     // For messages
     const [message, setMessage] = useState('');
@@ -1108,21 +1107,17 @@ const Inbox: React.FC<InboxProps> = ({ email }) => {
                                                                 message={item.message}
                                                                 id={item.id}
                                                                 type={
-                                                                    (item.userIDSender === signedInUserData.email) ?
+                                                                    ((item.userIDSender === signedInUserData.email)) ?
                                                                         ("sent") :
-                                                                        (
-                                                                            "received"
-                                                                        )
+                                                                        ("received")
                                                                 }
                                                                 messageType={(item.type) ? (item.type) : ("text")}
                                                             // ref={messagesEndRef}
                                                             />
                                                         </Box>
                                                     ) : null}
-
                                                 </>
                                             ))}
-
                                         </section>
                                     </Box>
                                 ))}

components/TextToSpeech/index.tsx

@@ -0,0 +1,24 @@
+import React,{useEffect,FC} from 'react';
+import { useSpeechSynthesis } from 'react-speech-kit';
+
+interface TextToSpeechProps {
+  text: string;
+}
+
+const TextToSpeech: FC<TextToSpeechProps> = ({ text }) => {
+  const { speak, speaking } = useSpeechSynthesis();
+
+  useEffect(() => {
+    // if (!speaking) {
+      speak({ text });
+    // }
+  }, [speak, speaking, text]);
+
+  return (
+    <div>
+      {speaking ? 'Speaking...' : 'Ready'}
+    </div>
+  );
+};
+
+export default TextToSpeech;

package.json

@@ -45,6 +45,8 @@
     "react-firebase-hooks": "^5.1.1",
     "react-icons": "^4.6.0",
     "react-intersection-observer": "^9.4.3",
+    "react-speech-kit": "^3.0.1",
+    "react-speech-recognition": "^3.10.0",
     "react-type-animation": "^2.1.2",
     "styled-components": "^5.3.10"
   },
@@ -58,6 +60,7 @@
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "18.0.7",
     "@types/react-draft-wysiwyg": "^1.13.4",
+    "@types/react-speech-recognition": "^3.9.2",
     "@types/styled-components": "^5.1.26",
     "autoprefixer": "^10.4.14",
     "eslint": "8.26.0",