Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reverting the audio message PR #99

Merged
merged 1 commit into from
May 17, 2024
Merged

Reverting the audio message PR #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 64 additions & 121 deletions Frontend/src/pages/message/message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
import { FaMicrophone } from "react-icons/fa";
import { useNavigate } from "react-router-dom";
import { Logo } from "../../svgs/logoSVG";
import styles from "./message.module.css";
import { useCallback, useContext, useEffect, useRef, useState } from "react";
import axios from "axios";
import Markdown from "react-markdown";
import LoginContext from "../../context/context";
Expand Down Expand Up @@ -35,16 +34,14 @@ function Message() {
const [chatState, setChatState] = useState("busy");
const [chatInit, setChatInit] = useState(false);
const [message, setMessage] = useState("");
const ws = useRef(null);
const [isListening, setIsListening] = useState(false);
let ws = useRef(null);

useEffect(() => {
if (mainRef.current) {
const container = mainRef.current;
container.scrollTop = container.scrollHeight;
}
}, [chat]);

useEffect(() => {
async function fetchData() {
try {
Expand All @@ -59,26 +56,25 @@ function Message() {
}
fetchData();
}, []);

useEffect(() => {
if (chatId !== null) {
//make a websocket connection here
let wss = new WebSocket(`wss://mindmate-ws.onrender.com?id=${chatId}`);
ws.current = wss;
console.log(wss);

wss.addEventListener("open", () => {
console.log("Websocket connected");
ws.current.send(JSON.stringify({ type: "client:connected" }));
ws.current.send(JSON.stringify({ type: "client:chathist" }));
});

wss.addEventListener("message", (event) => {
// console.log(event.data);
const data = JSON.parse(event.data);

if (data?.type === "server:chathist") {
// console.log(data.data);
const histdata = data?.data;
if (!histdata) return;

histdata.forEach((conv) => {
for (let conv of histdata) {
if (conv.prompt) {
setChat((prevchat) => [
...prevchat,
Expand All @@ -91,58 +87,62 @@ function Message() {
{ message: conv.response, own: false },
]);
}
});
}

setChatState("idle");
setChatInit(true);
// promptBut.disabled = false;
} else if (data?.type === "server:response:start") {
// setChat((prevchat) => [
// ...prevchat,
// { message: "", own: false, isLoading: true },
// ]);
} else if (data?.type === "server:response:chunk") {
setChat((prevchat) => {
const lastMessageIndex = prevchat.length - 1;
const lastMessage = prevchat[lastMessageIndex];


if (lastMessage && lastMessage.own) {
return [
...prevchat,
{ message: data.chunk, own: false, isLoading: true },
];
} else if (lastMessage && !lastMessage.isLoading) {

const updatedMessage = {
...lastMessage,
message: lastMessage.message + data.chunk,
};
return [...prevchat.slice(0, lastMessageIndex), updatedMessage];
} else {

const updatedMessage = {
...lastMessage,
message: lastMessage.message + data.chunk,
};
return [...prevchat.slice(0, lastMessageIndex), updatedMessage];
}
// prevchat.at(-1).message += data.chunk;
// console.log("!!!", prevchat);
// console.log("!!!", prevchat.slice(-1));
return [
...prevchat.slice(0, -1),
{
message: `${prevchat.at(prevchat.length - 1).message}${
data.chunk
}`,
own: false,
isLoading: true,
},
];
});
// console.log("@text", data.chunk);
} else if (data?.type === "server:response:end") {
// response = "";
// promptBut.disabled = false;
setChat((prevchat) => {
const lastMessageIndex = prevchat.length - 1;
const lastMessage = prevchat[lastMessageIndex];
if (lastMessage && lastMessage.isLoading) {
const updatedMessage = { ...lastMessage, isLoading: false };
return [...prevchat.slice(0, lastMessageIndex), updatedMessage];
}
return prevchat;
return [
...prevchat.slice(0, -1),
{
message: prevchat.at(prevchat.length - 1).message,
own: false,
isLoading: false,
},
];
});
setChatState("idle");
}
});
ws.current = wss;
}
}, [chatId]);

const handleClick = () => {
setChat((prevchat) => [...prevchat, { message, own: true }]);
if (ws.current) {
ws.current.send(JSON.stringify({ type: "client:prompt", prompt: message }));
}
console.log(message);
ws.current?.send(
JSON.stringify({
type: "client:prompt",
prompt: message,
})
);
setMessage("");
setChatState("busy");
setChat((prevchat) => [
Expand All @@ -168,76 +168,19 @@ function Message() {
}
};

const handleSpeechRecognition = () => {
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
console.error("Speech Recognition is not supported in this browser.");
return;
}

const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-US";

let recognitionTimeout;

const stopRecognition = () => {
clearTimeout(recognitionTimeout);
recognition.stop();
setIsListening(false);
};

recognition.start();
setIsListening(true);

recognition.onresult = (event) => {
let finalTranscript = "";
for (let i = event.resultIndex; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
}
}

if (finalTranscript) {
setChat((prevchat) => [...prevchat, { message: finalTranscript, own: true }]);
if (ws.current) {
ws.current.send(JSON.stringify({ type: "client:prompt", prompt: finalTranscript }));
}
setChatState("busy");
setChat((prevchat) => [
...prevchat,
{ message: "", own: false, isLoading: true },
]);
clearTimeout(recognitionTimeout);
recognitionTimeout = setTimeout(stopRecognition, 2000);
}
};

recognition.onerror = (event) => {
console.error("Speech Recognition Error:", event.error);
stopRecognition();
};
recognition.onend = stopRecognition;
};
return (
<div className={styles.messageContainer}>
<header>
<div
className={styles.logoContainer}
onClick={() => {
navigate("/");
}}
>
<div className={styles.logoContainer} onClick={()=>{
navigate('/')
}}>
<Logo />
<div className={styles.headerText}>
<h4>MindMate</h4>
<h6>A mental health chat assistance</h6>
</div>
</div>

<div className="flex flex-row gap-4">
<button
onClick={() => {
Expand Down Expand Up @@ -267,10 +210,10 @@ function Message() {
style={
!chatInit || chat.length === 0
? {
display: "flex",
alignItems: "center",
justifyContent: "center",
}
display: "flex",
alignItems: "center",
justifyContent: "center",
}
: {}
}
>
Expand Down Expand Up @@ -300,29 +243,29 @@ function Message() {
})}
</main>
<footer>
<form onSubmit={(e) => { e.preventDefault(); }}>
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>

<button
type="submit"
onClick={() => { handleClick(); }}
onClick={() => {
handleClick();
}}
disabled={chatState === "busy" ? true : false}
>
<span className="material-symbols-outlined">send</span>
</button>
<div
className={`${styles.microphoneButton} ${isListening ? styles.listening : ''}`}
onClick={handleSpeechRecognition}
>
<FaMicrophone />
</div>
</form>
</footer>
</div>
);
}
export default Message;

export default Message;
15 changes: 0 additions & 15 deletions Frontend/src/pages/message/message.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,26 +132,11 @@
-moz-animation: pulse 2s infinite ease-in-out;
animation: pulse 2s infinite ease-in-out;
}

.headerText{
font-family: "Poppins", sans-serif;
font-weight: 500;
}

.microphoneButton {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.listening {
background-color: red;
border-radius: 50%;
padding: 0.5rem;
}


@media only screen and (max-width: 650px) {
.messageContainer header {
padding: 1rem 3rem;
Expand Down
Loading