Merge pull request #617 from Yidadaa/bugfix-0408

fix: auto grow textarea

app/components/chat.tsx

@@ -1,4 +1,4 @@
-import { useDebouncedCallback } from "use-debounce";
+import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { memo, useState, useRef, useEffect, useLayoutEffect } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
@@ -27,6 +27,7 @@ import {
  getEmojiUrl,
  isMobileScreen,
  selectOrCopy,
+ autoGrowTextArea,
 } from "../utils";
 
 import dynamic from "next/dynamic";
@@ -39,9 +40,7 @@ import { IconButton } from "./button";
 import styles from "./home.module.scss";
 import chatStyle from "./chat.module.scss";
 
-import { Input, Modal, showModal, showToast } from "./ui-lib";
-
-import calcTextareaHeight from "../calcTextareaHeight";
+import { Input, Modal, showModal } from "./ui-lib";
 
 const Markdown = dynamic(
  async () => memo((await import("./markdown")).Markdown),
@@ -333,10 +332,6 @@ function useScrollToBottom() {
 export function Chat(props: {
  showSideBar?: () => void;
  sideBarShowing?: boolean;
- autoSize: {
- minRows: number;
- maxRows?: number;
- };
 }) {
  type RenderMessage = Message & { preview?: boolean };
 
@@ -354,7 +349,6 @@ export function Chat(props: {
  const { submitKey, shouldSubmit } = useSubmitHandler();
  const { scrollRef, setAutoScroll } = useScrollToBottom();
  const [hitBottom, setHitBottom] = useState(false);
- const [textareaStyle, setTextareaStyle] = useState({});
 
  const onChatBodyScroll = (e: HTMLElement) => {
  const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20;
@@ -388,13 +382,26 @@ export function Chat(props: {
  dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
  };
 
- // textarea has an adaptive height
- const resizeTextarea = () => {
- const dom = inputRef.current;
- if (!dom) return;
- const { minRows, maxRows } = props.autoSize;
- setTextareaStyle(calcTextareaHeight(dom, minRows, maxRows));
- };
+ // auto grow input
+ const [inputRows, setInputRows] = useState(2);
+ const measure = useDebouncedCallback(
+ () => {
+ const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
+ const inputRows = Math.min(
+ 5,
+ Math.max(2 + Number(!isMobileScreen()), rows),
+ );
+ setInputRows(inputRows);
+ },
+ 100,
+ {
+ leading: true,
+ trailing: true,
+ },
+ );
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ useEffect(measure, [userInput]);
 
  // only search prompts when user input is short
  const SEARCH_TEXT_LIMIT = 30;
@@ -410,9 +417,6 @@ export function Chat(props: {
  // check if need to trigger auto completion
  if (text.startsWith("/")) {
  let searchText = text.slice(1);
- if (searchText.length === 0) {
- searchText = " ";
- }
  onSearch(searchText);
  }
  }
@@ -527,12 +531,6 @@ export function Chat(props: {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
- // Textarea Adaptive height
- useEffect(() => {
- resizeTextarea();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [userInput]);
-
  return (
  <div className={styles.chat} key={session.id}>
  <div className={styles["window-header"]}>
@@ -688,7 +686,6 @@ export function Chat(props: {
  <textarea
  ref={inputRef}
  className={styles["chat-input"]}
- style={textareaStyle}
  placeholder={Locale.Chat.Input(submitKey)}
  onInput={(e) => onInput(e.currentTarget.value)}
  value={userInput}
@@ -699,6 +696,7 @@ export function Chat(props: {
  setTimeout(() => setPromptHints([]), 500);
  }}
  autoFocus={!props?.sideBarShowing}
+ rows={inputRows}
  />
  <IconButton
  icon={<SendWhiteIcon />}

app/components/home.module.scss

@@ -411,12 +411,6 @@
  outline: none;
 }
 
-@media only screen and (max-width: 600px) {
- .chat-input {
- font-size: 16px;
- }
-}
-
 .chat-input:focus {
  border: 1px solid var(--primary);
 }
@@ -427,7 +421,17 @@
 
  position: absolute;
  right: 30px;
- bottom: 30px;
+ bottom: 32px;
+}
+
+@media only screen and (max-width: 600px) {
+ .chat-input {
+ font-size: 16px;
+ }
+
+ .chat-input-send {
+ bottom: 30px;
+ }
 }
 
 .export-content {

app/components/home.tsx

@@ -189,7 +189,6 @@ function _Home() {
  key="chat"
  showSideBar={() => setShowSideBar(true)}
  sideBarShowing={showSideBar}
- autoSize={{ minRows: 2, maxRows: 6 }}
  />
  )}
  </div>

app/locales/cn.ts

@@ -21,11 +21,11 @@ const cn = {
  Rename: "重命名对话",
  Typing: "正在输入…",
  Input: (submitKey: string) => {
- var inputHints = `输入消息，${submitKey} 发送`;
+ var inputHints = `${submitKey} 发送`;
  if (submitKey === String(SubmitKey.Enter)) {
  inputHints += "，Shift + Enter 换行";
  }
- return inputHints;
+ return inputHints + "，/ 触发补全";
  },
  Send: "发送",
  },
@@ -126,7 +126,7 @@ const cn = {
  Model: "模型 (model)",
  Temperature: {
  Title: "随机性 (temperature)",
- SubTitle: "值越大，回复越随机",
+ SubTitle: "值越大，回复越随机，大于 1 的值可能会导致乱码",
  },
  MaxTokens: {
  Title: "单次回复限制 (max_tokens)",

app/locales/en.ts

@@ -23,11 +23,11 @@ const en: LocaleType = {
  Rename: "Rename Chat",
  Typing: "Typing…",
  Input: (submitKey: string) => {
- var inputHints = `Type something and press ${submitKey} to send`;
+ var inputHints = `${submitKey} to send`;
  if (submitKey === String(SubmitKey.Enter)) {
- inputHints += ", press Shift + Enter to newline";
+ inputHints += ", Shift + Enter to wrap";
  }
- return inputHints;
+ return inputHints + ", / to search prompts";
  },
  Send: "Send",
  },

app/requests.ts

@@ -20,7 +20,11 @@ const makeRequestParam = (
  sendMessages = sendMessages.filter((m) => m.role !== "assistant");
  }
 
- const modelConfig = useChatStore.getState().config.modelConfig;
+ const modelConfig = { ...useChatStore.getState().config.modelConfig };
+
+ // @yidadaa: wont send max_tokens, because it is nonsense for Muggles
+ // @ts-expect-error
+ delete modelConfig.max_tokens;
 
  return {
  messages: sendMessages,

app/store/prompt.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import Fuse from "fuse.js";
+import { getLang } from "../locales";
 
 export interface Prompt {
  id?: number;
@@ -25,11 +26,13 @@ export const SearchService = {
  count: {
  builtin: 0,
  },
+ allBuiltInPrompts: [] as Prompt[],
 
  init(prompts: Prompt[]) {
  if (this.ready) {
  return;
  }
+ this.allBuiltInPrompts = prompts;
  this.engine.setCollection(prompts);
  this.ready = true;
  },
@@ -78,6 +81,11 @@ export const usePromptStore = create<PromptStore>()(
  },
 
  search(text) {
+ if (text.length === 0) {
+ // return all prompts
+ const userPrompts = get().prompts?.values?.() ?? [];
+ return SearchService.allBuiltInPrompts.concat([...userPrompts]);
+ }
  return SearchService.search(text) as Prompt[];
  },
  }),
@@ -92,7 +100,11 @@ export const usePromptStore = create<PromptStore>()(
  fetch(PROMPT_URL)
  .then((res) => res.json())
  .then((res) => {
- const builtinPrompts = [res.en, res.cn]
+ let fetchPrompts = [res.en, res.cn];
+ if (getLang() === "cn") {
+ fetchPrompts = fetchPrompts.reverse();
+ }
+ const builtinPrompts = fetchPrompts
  .map((promptList: PromptList) => {
  return promptList.map(
  ([title, content]) =>