File size: 2,509 Bytes
babeaf6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
/**
* src/components/TextView/index.jsx
* show chat log. User can send message and switch to CallView.
*
* created by Lynchee on 7/16/23
*/
import React, { useEffect, useRef } from 'react';
import './style.css';
import { TbPower, TbMicrophone } from 'react-icons/tb';
import IconButton from '../Common/IconButton';
const TextView = ({ send, isPlaying, stopAudioPlayback, textAreaValue, setTextAreaValue, messageInput, setMessageInput, handleDisconnect, setIsCallView }) => {
const chatWindowRef = useRef(null);
// always show the latest chat log
useEffect(() => {
if (chatWindowRef.current) {
chatWindowRef.current.scrollTop = chatWindowRef.current.scrollHeight;
}
}, [textAreaValue]);
// send message to server. stop audio if it's playing to interrupt character.
const sendMessage = () => {
setTextAreaValue(prevState => prevState + `\nYou> ${messageInput}\n`);
send(messageInput);
setMessageInput('');
if (isPlaying) {
stopAudioPlayback();
}
}
const handleSendClick = () => {
if (messageInput.trim() !== '') {
sendMessage();
}
}
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
handleSendClick();
}
};
const handleInputChange = (event) => {
setMessageInput(event.target.value);
};
return (
<>
<textarea
className="chat-window"
readOnly
draggable="false"
ref={chatWindowRef}
value={textAreaValue}
></textarea>
<div className="message-input-container">
<input
className="message-input"
type="text"
placeholder="Type your message"
value={messageInput}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
/>
<span className="focus-border"><i></i></span>
</div>
<button className="send-btn" onClick={handleSendClick}>Send Message</button>
<div className="options-container">
<IconButton Icon={TbPower} className="icon-red" onClick={handleDisconnect} />
<IconButton Icon={TbMicrophone} className="icon-blue" onClick={() => setIsCallView(true)} />
</div>
</>
)
}
export default TextView |