Merge pull request #1192 from Yidadaa/bugfix-0501

fixup

app/components/chat.tsx

@@ -725,6 +725,7 @@ export function Chat() {
                     }}
                     fontSize={fontSize}
                     parentRef={scrollRef}
+                    defaultShow={i >= messages.length - 10}
                   />
                 </div>
                 {!isUser && !message.preview && (

app/components/markdown.tsx

@@ -62,11 +62,12 @@ export function Markdown(
     loading?: boolean;
     fontSize?: number;
     parentRef: RefObject<HTMLDivElement>;
+    defaultShow?: boolean;
   } & React.DOMAttributes<HTMLDivElement>,
 ) {
   const mdRef = useRef<HTMLDivElement>(null);
   const renderedHeight = useRef(0);
-  const inView = useRef(false);
+  const inView = useRef(!!props.defaultShow);
 
   const parent = props.parentRef.current;
   const md = mdRef.current;
@@ -90,15 +91,6 @@ export function Markdown(
     }
   };
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (!inView.current) {
-        checkInView();
-      }
-    }, 30);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   checkInView();
 
   return (

app/components/mask.module.scss

@@ -1,16 +1,4 @@
 @import "../styles/animation.scss";
-
-@keyframes search-in {
-  from {
-    opacity: 0;
-    transform: translateY(5vh) scaleX(0.5);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scaleX(1);
-  }
-}
-
 .mask-page {
   height: 100%;
   display: flex;
@@ -23,8 +11,9 @@
     .mask-filter {
       width: 100%;
       max-width: 100%;
-      margin-bottom: 10px;
-      animation: search-in ease 0.3s;
+      margin-bottom: 20px;
+      animation: slide-in ease 0.3s;
+      height: 40px;
 
       display: flex;
 
@@ -32,8 +21,6 @@
         flex-grow: 1;
         max-width: 100%;
         min-width: 0;
-        margin-bottom: 20px;
-        animation: search-in ease 0.3s;
       }
 
       .mask-filter-lang {
@@ -45,10 +32,7 @@
         height: 100%;
         margin-left: 10px;
         box-sizing: border-box;
-
-        button {
-          padding: 10px;
-        }
+        min-width: 80px;
       }
     }
 

app/components/mask.tsx

@@ -291,17 +291,16 @@ export function MaskPage() {
               ))}
             </select>
 
-            <div className={styles["mask-create"]}>
-              <IconButton
-                icon={<AddIcon />}
-                text={Locale.Mask.Page.Create}
-                bordered
-                onClick={() => {
-                  const createdMask = maskStore.create();
-                  setEditingMaskId(createdMask.id);
-                }}
-              />
-            </div>
+            <IconButton
+              className={styles["mask-create"]}
+              icon={<AddIcon />}
+              text={Locale.Mask.Page.Create}
+              bordered
+              onClick={() => {
+                const createdMask = maskStore.create();
+                setEditingMaskId(createdMask.id);
+              }}
+            />
           </div>
 
           <div>

app/components/new-chat.module.scss

@@ -59,10 +59,9 @@
     display: flex;
     justify-content: center;
 
-    .search-bar {
+    .more {
       font-size: 12px;
-      margin-right: 10px;
-      width: 40vw;
+      margin-left: 10px;
     }
   }
 

app/components/new-chat.tsx

@@ -5,10 +5,11 @@ import { EmojiAvatar } from "./emoji";
 import styles from "./new-chat.module.scss";
 
 import LeftIcon from "../icons/left.svg";
-import AddIcon from "../icons/lightning.svg";
+import LightningIcon from "../icons/lightning.svg";
+import EyeIcon from "../icons/eye.svg";
 
 import { useLocation, useNavigate } from "react-router-dom";
-import { createEmptyMask, Mask, useMaskStore } from "../store/mask";
+import { Mask, useMaskStore } from "../store/mask";
 import Locale from "../locales";
 import { useAppConfig, useChatStore } from "../store";
 import { MaskAvatar } from "./mask";
@@ -148,20 +149,22 @@ export function NewChat() {
       <div className={styles["sub-title"]}>{Locale.NewChat.SubTitle}</div>
 
       <div className={styles["actions"]}>
-        <input
-          className={styles["search-bar"]}
-          placeholder={Locale.NewChat.More}
-          type="text"
-          onClick={() => navigate(Path.Masks)}
-        />
-
         <IconButton
           text={Locale.NewChat.Skip}
           onClick={() => startChat()}
-          icon={<AddIcon />}
+          icon={<LightningIcon />}
           type="primary"
           shadow
         />
+
+        <IconButton
+          className={styles["more"]}
+          text={Locale.NewChat.More}
+          onClick={() => navigate(Path.Masks)}
+          icon={<EyeIcon />}
+          bordered
+          shadow
+        />
       </div>
 
       <div className={styles["masks"]}>

app/locales/cn.ts

@@ -224,7 +224,7 @@ const cn = {
     ConfirmNoShow: "确认禁用？禁用后可以随时在设置中重新启用。",
     Title: "挑选一个面具",
     SubTitle: "现在开始，与面具背后的灵魂思维碰撞",
-    More: "搜索更多",
+    More: "查看全部",
   },
 
   UI: {