This commit is contained in:
Gabriel Almeida 2023-05-22 16:44:36 -03:00
commit 802e5ec31a

View file

@ -3,53 +3,55 @@ import { classNames } from "../../../utils";
import { useRef } from "react"; import { useRef } from "react";
export default function ChatInput({ export default function ChatInput({
lockChat, lockChat,
chatValue, chatValue,
sendMessage, sendMessage,
setChatValue, setChatValue,
}: { }: {
lockChat: boolean; lockChat: boolean;
chatValue: string; chatValue: string;
sendMessage: Function; sendMessage: Function;
setChatValue: Function; setChatValue: Function;
}) { }) {
const inputRef = useRef(null); const inputRef = useRef(null);
return ( return (
<> <>
<textarea <textarea
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === "Enter" && !lockChat && !event.shiftKey) { if (event.key === "Enter" && !lockChat && !event.shiftKey) {
sendMessage(); sendMessage();
} }
}} }}
ref={inputRef} ref={inputRef}
disabled={lockChat} disabled={lockChat}
style={{ resize: "none" }} style={{ resize: "none" }}
value={lockChat ? "Thinking..." : chatValue} value={lockChat ? "Thinking..." : chatValue}
onChange={(e) => { onChange={(e) => {
setChatValue(e.target.value); setChatValue(e.target.value);
}} }}
className={classNames( className={classNames(
lockChat ? "bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300" : "bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-300", lockChat
"form-input block w-full custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" ? "bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300"
)} : "bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-300",
placeholder={"Send a message..."} "form-input block w-full custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm"
/> )}
<div className="absolute inset-y-0 right-0 flex items-center pr-3"> placeholder={"Send a message..."}
<button disabled={lockChat} onClick={() => sendMessage()}> />
{lockChat ? ( <div className="absolute inset-y-0 right-0 flex items-center pr-3">
<LockClosedIcon <button disabled={lockChat} onClick={() => sendMessage()}>
className="h-5 w-5 text-gray-500 dark:hover:text-gray-300 animate-pulse" {lockChat ? (
aria-hidden="true" <LockClosedIcon
/> className="h-5 w-5 text-gray-500 dark:hover:text-gray-300 animate-pulse"
) : ( aria-hidden="true"
<PaperAirplaneIcon />
className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300" ) : (
aria-hidden="true" <PaperAirplaneIcon
/> className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
)} aria-hidden="true"
</button> />
</div> )}
</> </button>
); </div>
</>
);
} }