mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-11 01:10:11 +01:00
[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:
parent
87b41a60e9
commit
381bdf0b61
@ -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 ? (
|
||||||
|
Loading…
Reference in New Issue
Block a user