diff --git a/app/components/home.module.scss b/app/components/home.module.scss index 764805d80..d88a3d5ca 100644 --- a/app/components/home.module.scss +++ b/app/components/home.module.scss @@ -414,7 +414,7 @@ background-color: var(--white); color: var(--black); font-family: inherit; - padding: 10px 14px 50px; + padding: 10px 90px 10px 14px; resize: none; outline: none; } diff --git a/app/components/home.tsx b/app/components/home.tsx index de93510db..2ff87b3ee 100644 --- a/app/components/home.tsx +++ b/app/components/home.tsx @@ -108,7 +108,7 @@ export function ChatList() { state.currentSessionIndex, state.selectSession, state.removeSession, - ] + ], ); return ( @@ -192,6 +192,7 @@ export function Chat(props: { const inputRef = useRef(null); const [userInput, setUserInput] = useState(""); const [isLoading, setIsLoading] = useState(false); + const [textareaRows, setTextareaRows] = useState(2); const { submitKey, shouldSubmit } = useSubmitHandler(); // prompt hints @@ -202,7 +203,7 @@ export function Chat(props: { setPromptHints(promptStore.search(text)); }, 100, - { leading: true, trailing: true } + { leading: true, trailing: true }, ); const onPromptSelect = (prompt: Prompt) => { @@ -216,7 +217,7 @@ export function Chat(props: { if (!dom) return; const paddingBottomNum: number = parseInt( window.getComputedStyle(dom).paddingBottom, - 10 + 10, ); dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum; }; @@ -237,6 +238,11 @@ export function Chat(props: { 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 @@ -247,6 +253,7 @@ export function Chat(props: { setUserInput(""); setPromptHints([]); inputRef.current?.focus(); + setTextareaRows(2); }; // stop response @@ -304,7 +311,7 @@ export function Chat(props: { preview: true, }, ] - : [] + : [], ) .concat( userInput.length > 0 @@ -316,7 +323,7 @@ export function Chat(props: { preview: true, }, ] - : [] + : [], ); // auto scroll @@ -354,7 +361,7 @@ export function Chat(props: { const newTopic = prompt(Locale.Chat.Rename, session.topic); if (newTopic && newTopic !== session.topic) { chatStore.updateCurrentSession( - (session) => (session.topic = newTopic!) + (session) => (session.topic = newTopic!), ); } }} @@ -485,7 +492,7 @@ export function Chat(props: { ref={inputRef} className={styles["chat-input"]} placeholder={Locale.Chat.Input(submitKey)} - rows={4} + rows={textareaRows} onInput={(e) => onInput(e.currentTarget.value)} value={userInput} onKeyDown={(e) => onInputKeyDown(e as any)} @@ -603,7 +610,7 @@ export function Home() { state.newSession, state.currentSessionIndex, state.removeSession, - ] + ], ); const loading = !useHasHydrated(); const [showSideBar, setShowSideBar] = useState(true);