67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import { useChat } from '../../providers/chat-provider';
|
|
import { useSound } from '../../providers/sound-provider';
|
|
import '../../styles/chat.css';
|
|
|
|
export function ChatInput() {
|
|
const [message, setMessage] = React.useState('');
|
|
const { sendActivity } = useChat();
|
|
const { playSound } = useSound();
|
|
|
|
const handleSend = () => {
|
|
if (!message.trim()) return;
|
|
playSound('send');
|
|
sendActivity({
|
|
type: 'message',
|
|
text: message.trim(),
|
|
});
|
|
setMessage('');
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
<div className="input-container">
|
|
<button className="icon-button" onClick={() => playSound('click')}>
|
|
<svg className="icon" viewBox="0 0 24 24">
|
|
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
|
|
</svg>
|
|
</button>
|
|
<button className="icon-button">
|
|
<svg className="icon" viewBox="0 0 24 24">
|
|
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
|
|
</svg>
|
|
</button>
|
|
<textarea
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
className="chat-input"
|
|
placeholder="Type a message..."
|
|
/>
|
|
{message.trim().length > 0 ? (
|
|
<button className="send-button" onClick={handleSend}>
|
|
<svg className="icon" viewBox="0 0 24 24">
|
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
|
|
</svg>
|
|
</button>
|
|
) : (
|
|
<button className="icon-button" onClick={() => playSound('click')}>
|
|
<svg className="icon" viewBox="0 0 24 24">
|
|
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
|
|
<path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
{/* <EmojiPicker
|
|
visible={showEmoji}
|
|
onClose={() => {
|
|
playSound('click');
|
|
setShowEmoji(false);
|
|
}}
|
|
onEmojiSelect={handleEmojiSelect}
|
|
/> */}
|
|
</>
|
|
);
|
|
}
|