Format
This commit is contained in:
parent
13403de3fc
commit
802e5ec31a
1 changed files with 49 additions and 47 deletions
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue