singlexyz/ChatGPT-Next-Web
1
0
Fork 0
forked from XiaoMo/ChatGPT-Next-Web
Code Pull Requests Activity

feat: add optimize textarea height when inputing

Browse Source
This commit is contained in:
leedom 2023-04-01 17:34:38 +08:00
parent 0385f6ede9
commit 2a79d35667
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/home.module.scss
View File

@ -414,7 +414,7 @@
background-color: var(--white); background-color: var(--white);
color: var(--black); color: var(--black);
font-family: inherit; font-family: inherit;
padding: 10px 14px 50px; padding: 10px 90px 10px 14px;
resize: none; resize: none;
outline: none; outline: none;
} }

23
app/components/home.tsx
View File

@ -108,7 +108,7 @@ export function ChatList() {
state.currentSessionIndex, state.currentSessionIndex,
state.selectSession, state.selectSession,
state.removeSession, state.removeSession,
] ],
); );
return ( return (
@ -192,6 +192,7 @@ export function Chat(props: {
const inputRef = useRef<HTMLTextAreaElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
const [userInput, setUserInput] = useState(""); const [userInput, setUserInput] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [textareaRows, setTextareaRows] = useState(2);
const { submitKey, shouldSubmit } = useSubmitHandler(); const { submitKey, shouldSubmit } = useSubmitHandler();
// prompt hints // prompt hints
@ -202,7 +203,7 @@ export function Chat(props: {
setPromptHints(promptStore.search(text)); setPromptHints(promptStore.search(text));
}, },
100, 100,
{ leading: true, trailing: true } { leading: true, trailing: true },
); );
const onPromptSelect = (prompt: Prompt) => { const onPromptSelect = (prompt: Prompt) => {
@ -216,7 +217,7 @@ export function Chat(props: {
if (!dom) return; if (!dom) return;
const paddingBottomNum: number = parseInt( const paddingBottomNum: number = parseInt(
window.getComputedStyle(dom).paddingBottom, window.getComputedStyle(dom).paddingBottom,
10 10,
); );
dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum; dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
}; };
@ -237,6 +238,11 @@ export function Chat(props: {
onSearch(text.slice(1)); onSearch(text.slice(1));
} }
} }
// textarea rows optimize
const length = text.split("\n").length - 1;
const rowsLength = length < 2 ? 2 : length > 6 ? 6 : length;
setTextareaRows(rowsLength > 6 ? 6 : rowsLength);
}; };
// submit user input // submit user input
@ -247,6 +253,7 @@ export function Chat(props: {
setUserInput(""); setUserInput("");
setPromptHints([]); setPromptHints([]);
inputRef.current?.focus(); inputRef.current?.focus();
setTextareaRows(2);
}; };
// stop response // stop response
@ -304,7 +311,7 @@ export function Chat(props: {
preview: true, preview: true,
}, },
] ]
: [] : [],
) )
.concat( .concat(
userInput.length > 0 userInput.length > 0
@ -316,7 +323,7 @@ export function Chat(props: {
preview: true, preview: true,
}, },
] ]
: [] : [],
); );
// auto scroll // auto scroll
@ -354,7 +361,7 @@ export function Chat(props: {
const newTopic = prompt(Locale.Chat.Rename, session.topic); const newTopic = prompt(Locale.Chat.Rename, session.topic);
if (newTopic && newTopic !== session.topic) { if (newTopic && newTopic !== session.topic) {
chatStore.updateCurrentSession( chatStore.updateCurrentSession(
(session) => (session.topic = newTopic!) (session) => (session.topic = newTopic!),
); );
} }
}} }}
@ -485,7 +492,7 @@ export function Chat(props: {
ref={inputRef} ref={inputRef}
className={styles["chat-input"]} className={styles["chat-input"]}
placeholder={Locale.Chat.Input(submitKey)} placeholder={Locale.Chat.Input(submitKey)}
rows={4} rows={textareaRows}
onInput={(e) => onInput(e.currentTarget.value)} onInput={(e) => onInput(e.currentTarget.value)}
value={userInput} value={userInput}
onKeyDown={(e) => onInputKeyDown(e as any)} onKeyDown={(e) => onInputKeyDown(e as any)}
@ -603,7 +610,7 @@ export function Home() {
state.newSession, state.newSession,
state.currentSessionIndex, state.currentSessionIndex,
state.removeSession, state.removeSession,
] ],
); );
const loading = !useHasHydrated(); const loading = !useHasHydrated();
const [showSideBar, setShowSideBar] = useState(true); const [showSideBar, setShowSideBar] = useState(true);