fix: textarea should resize after sending
This commit is contained in:
parent
855e9ee9df
commit
0180937262
@ -18,6 +18,8 @@ const BasicPromptInput: React.FC = () => {
|
|||||||
|
|
||||||
const { initModel } = useInitModel();
|
const { initModel } = useInitModel();
|
||||||
|
|
||||||
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
const handleKeyDown = async (
|
const handleKeyDown = async (
|
||||||
event: React.KeyboardEvent<HTMLTextAreaElement>
|
event: React.KeyboardEvent<HTMLTextAreaElement>
|
||||||
) => {
|
) => {
|
||||||
@ -40,12 +42,19 @@ const BasicPromptInput: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
adjustTextareaHeight();
|
||||||
|
}, [currentPrompt]);
|
||||||
|
|
||||||
|
const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
|
setCurrentPrompt(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
// Auto adjust textarea height based on content
|
// Auto adjust textarea height based on content
|
||||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
||||||
const MAX_ROWS = 10;
|
const MAX_ROWS = 10;
|
||||||
const adjustTextareaHeight = () => {
|
const adjustTextareaHeight = () => {
|
||||||
if (textareaRef.current) {
|
if (textareaRef.current) {
|
||||||
textareaRef.current.style.height = "auto";
|
textareaRef.current.style.height = "auto"; // 1 row
|
||||||
const scrollHeight = textareaRef.current.scrollHeight;
|
const scrollHeight = textareaRef.current.scrollHeight;
|
||||||
const maxScrollHeight =
|
const maxScrollHeight =
|
||||||
parseInt(window.getComputedStyle(textareaRef.current).lineHeight, 10) *
|
parseInt(window.getComputedStyle(textareaRef.current).lineHeight, 10) *
|
||||||
@ -57,15 +66,6 @@ const BasicPromptInput: React.FC = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
adjustTextareaHeight();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
||||||
setCurrentPrompt(event.target.value);
|
|
||||||
adjustTextareaHeight();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
|
<div className="overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
|
||||||
<textarea
|
<textarea
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user