File size: 2,676 Bytes
b9ee0e6 |
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 |
"use client";
import React, { useState, FormEvent } from 'react';
type ChatInputProps = {
onSendMessage: (message: string) => void;
disabled?: boolean;
};
const ChatInput: React.FC<ChatInputProps> = ({ onSendMessage, disabled = false }) => {
const [message, setMessage] = useState('');
const handleSubmit = (e: FormEvent) => {
e.preventDefault();
if (message.trim() && !disabled) {
onSendMessage(message);
setMessage('');
}
};
return (
<div className="py-4 px-4 sm:px-6 md:px-8 bg-white">
<form onSubmit={handleSubmit} className="relative max-w-3xl mx-auto">
<div className="relative shadow-sm rounded-2xl border border-gray-200">
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Ask anything (but I'll only say meow)..."
disabled={disabled}
rows={1}
className="w-full py-3 px-4 pr-12 rounded-2xl border-0 bg-white focus:outline-none resize-none"
style={{ minHeight: '80px', maxHeight: '200px' }}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
if (message.trim() && !disabled) {
onSendMessage(message);
setMessage('');
}
}
}}
/>
<button
type="submit"
disabled={!message.trim() || disabled}
className={`absolute right-3 bottom-2.5 p-1.5 rounded-full ${
!message.trim() || disabled
? 'bg-gray-200 text-gray-500 cursor-not-allowed'
: 'bg-black text-white hover:bg-gray-800'
}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
<div className="text-center text-[8px] text-gray-500 mt-2">
CatGPT may produce inaccurate information because it's just a cat saying meow. Check out <a href="https://opencharacter.org" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">OpenCharacter</a> for more characters.
</div>
</form>
</div>
);
};
export default ChatInput; |