[FIX] Improve readability for larger messages entered into chat input (#1410)

* increase max height of chat input for larger messages

* allow resize of input on mobile up to 50vh

* remove duplicate css rule

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield 2024-05-16 11:17:33 -07:00 committed by GitHub
parent 87b41a60e9
commit 381bdf0b61
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,7 +3,6 @@ import SlashCommandsButton, {
SlashCommands, SlashCommands,
useSlashCommands, useSlashCommands,
} from "./SlashCommands"; } from "./SlashCommands";
import { isMobile } from "react-device-detect";
import debounce from "lodash.debounce"; import debounce from "lodash.debounce";
import { PaperPlaneRight } from "@phosphor-icons/react"; import { PaperPlaneRight } from "@phosphor-icons/react";
import StopGenerationButton from "./StopGenerationButton"; import StopGenerationButton from "./StopGenerationButton";
@ -83,7 +82,6 @@ export default function PromptInput({
}; };
const adjustTextArea = (event) => { const adjustTextArea = (event) => {
if (isMobile) return false;
const element = event.target; const element = event.target;
element.style.height = "auto"; element.style.height = "auto";
element.style.height = `${element.scrollHeight}px`; element.style.height = `${element.scrollHeight}px`;
@ -130,7 +128,7 @@ export default function PromptInput({
adjustTextArea(e); adjustTextArea(e);
}} }}
value={promptInput} value={promptInput}
className="cursor-text max-h-[100px] md:min-h-[40px] mx-2 md:mx-0 py-2 w-full text-[16px] md:text-md text-white bg-transparent placeholder:text-white/60 resize-none active:outline-none focus:outline-none flex-grow" className="cursor-text max-h-[50vh] md:max-h-[350px] md:min-h-[40px] mx-2 md:mx-0 py-2 w-full text-[16px] md:text-md text-white bg-transparent placeholder:text-white/60 resize-none active:outline-none focus:outline-none flex-grow"
placeholder={"Send a message"} placeholder={"Send a message"}
/> />
{buttonDisabled ? ( {buttonDisabled ? (