Merge pull request #617 from Yidadaa/bugfix-0408

fix: auto grow textarea

app/calcTextareaHeight.ts

@@ -1,118 +0,0 @@
-/**
- * fork from element-plus
- * https://github.com/element-plus/element-plus/blob/dev/packages/components/input/src/utils.ts
- */
-
-import { isFirefox } from "./utils";
-
-let hiddenTextarea: HTMLTextAreaElement | undefined = undefined;
-
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  ${isFirefox() ? "" : "overflow:hidden !important;"}
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
-`;
-
-const CONTEXT_STYLE = [
-  "letter-spacing",
-  "line-height",
-  "padding-top",
-  "padding-bottom",
-  "font-family",
-  "font-weight",
-  "font-size",
-  "text-rendering",
-  "text-transform",
-  "width",
-  "text-indent",
-  "padding-left",
-  "padding-right",
-  "border-width",
-  "box-sizing",
-];
-
-type NodeStyle = {
-  contextStyle: string;
-  boxSizing: string;
-  paddingSize: number;
-  borderSize: number;
-};
-
-type TextAreaHeight = {
-  height: string;
-  minHeight?: string;
-};
-
-function calculateNodeStyling(targetElement: Element): NodeStyle {
-  const style = window.getComputedStyle(targetElement);
-
-  const boxSizing = style.getPropertyValue("box-sizing");
-
-  const paddingSize =
-    Number.parseFloat(style.getPropertyValue("padding-bottom")) +
-    Number.parseFloat(style.getPropertyValue("padding-top"));
-
-  const borderSize =
-    Number.parseFloat(style.getPropertyValue("border-bottom-width")) +
-    Number.parseFloat(style.getPropertyValue("border-top-width"));
-
-  const contextStyle = CONTEXT_STYLE.map(
-    (name) => `${name}:${style.getPropertyValue(name)}`,
-  ).join(";");
-
-  return { contextStyle, paddingSize, borderSize, boxSizing };
-}
-
-export default function calcTextareaHeight(
-  targetElement: HTMLTextAreaElement,
-  minRows: number = 2,
-  maxRows?: number,
-): TextAreaHeight {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement("textarea");
-    document.body.appendChild(hiddenTextarea);
-  }
-
-  const { paddingSize, borderSize, boxSizing, contextStyle } =
-    calculateNodeStyling(targetElement);
-
-  hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
-
-  let height = hiddenTextarea.scrollHeight;
-  const result = {} as TextAreaHeight;
-
-  if (boxSizing === "border-box") {
-    height = height + borderSize;
-  } else if (boxSizing === "content-box") {
-    height = height - paddingSize;
-  }
-
-  hiddenTextarea.value = "";
-  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
-  if (minRows) {
-    let minHeight = singleRowHeight * minRows;
-    if (boxSizing === "border-box") {
-      minHeight = minHeight + paddingSize + borderSize;
-    }
-    height = Math.max(minHeight, height);
-    result.minHeight = `${minHeight}px`;
-  }
-  if (maxRows) {
-    let maxHeight = singleRowHeight * maxRows;
-    if (boxSizing === "border-box") {
-      maxHeight = maxHeight + paddingSize + borderSize;
-    }
-    height = Math.min(maxHeight, height);
-  }
-  result.height = `${height}px`;
-  hiddenTextarea.parentNode?.removeChild(hiddenTextarea);
-  hiddenTextarea = undefined;
-
-  return result;
-}

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]) =>

app/utils.ts

@@ -97,3 +97,51 @@ export function getCurrentVersion() {
 export function getEmojiUrl(unified: string, style: EmojiStyle) {
   return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
 }
+
+function getDomContentWidth(dom: HTMLElement) {
+  const style = window.getComputedStyle(dom);
+  const paddingWidth =
+    parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+  const width = dom.clientWidth - paddingWidth;
+  return width;
+}
+
+function getOrCreateMeasureDom(id: string, init?: (dom: HTMLElement) => void) {
+  let dom = document.getElementById(id);
+
+  if (!dom) {
+    dom = document.createElement("span");
+    dom.style.position = "absolute";
+    dom.style.wordBreak = "break-word";
+    dom.style.fontSize = "14px";
+    dom.style.transform = "translateY(-200vh)";
+    dom.style.pointerEvents = "none";
+    dom.style.opacity = "0";
+    dom.id = id;
+    document.body.appendChild(dom);
+    init?.(dom);
+  }
+
+  return dom!;
+}
+
+export function autoGrowTextArea(dom: HTMLTextAreaElement) {
+  const measureDom = getOrCreateMeasureDom("__measure");
+  const singleLineDom = getOrCreateMeasureDom("__single_measure", (dom) => {
+    dom.innerText = "TEXT_FOR_MEASURE";
+  });
+
+  const width = getDomContentWidth(dom);
+  measureDom.style.width = width + "px";
+  measureDom.innerHTML = dom.value.trim().length > 0 ? dom.value : "1";
+
+  const lineWrapCount = Math.max(0, dom.value.split("\n").length - 1);
+  const height = parseFloat(window.getComputedStyle(measureDom).height);
+  const singleLineHeight = parseFloat(
+    window.getComputedStyle(singleLineDom).height,
+  );
+
+  const rows = Math.round(height / singleLineHeight) + lineWrapCount;
+
+  return rows;
+}