From 705d67f1faa8be82f4624ab5fb9da05a48ce3379 Mon Sep 17 00:00:00 2001
From: haorwen <haorwen@qq.com>
Date: Sun, 28 Dec 2025 11:04:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=9B=9E=E5=88=B0?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=8A=9F=E8=83=BD=20(#286)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 增加回到底部功能

* chore: bump version to v0.9.42
---
 package.json                                  |  2 +-
 .../chat/Layout/NewMessageBottomTip.tsx       | 27 ++++++++++++-------
 src/routes/chat/Layout/double-down.svg        |  1 +
 3 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 src/routes/chat/Layout/double-down.svg

diff --git a/package.json b/package.json
index e2b7a7be..9638aa86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.9.41",
+  "version": "0.9.42",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
diff --git a/src/routes/chat/Layout/NewMessageBottomTip.tsx b/src/routes/chat/Layout/NewMessageBottomTip.tsx
index 971a38b5..f13420df 100644
--- a/src/routes/chat/Layout/NewMessageBottomTip.tsx
+++ b/src/routes/chat/Layout/NewMessageBottomTip.tsx
@@ -1,6 +1,6 @@
-// import { useState, useEffect } from 'react';
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
+import DoubleDown from "./double-down.svg";
 
 import { useAppSelector } from "../../../app/store";
 import { ChatContext } from "../../../types/common";
@@ -13,7 +13,7 @@ type Props = {
   id: number;
   scrollToBottom?: () => void;
 };
-// linear-gradient(135deg,_#3C8CE7_0%,_#00EAFF_100%)
+
 const NewMessageBottomTip = ({ context, id, scrollToBottom }: Props) => {
   const { t } = useTranslation("chat");
   const readIndex = useAppSelector(
@@ -31,21 +31,28 @@ const NewMessageBottomTip = ({ context, id, scrollToBottom }: Props) => {
     mids,
     readIndex,
     messageData,
-    loginUid
+    loginUid,
   });
-  console.log("unreads", unreads);
+
+  const style =
+    unreads > 0
+      ? { background: "linear-gradient(135deg, #3C8CE7 0%, #00EAFF 100%)" }
+      : { background: "rgba(156, 163, 175, 0.5)" };
 
   return (
     <aside
       className={clsx(
-        `z-[999] absolute bottom-20 right-4
-                                justify-between text-xs
-                                rounded-full py-1 px-3 text-white
-                                bg-gradient-to-tl from-[#3C8CE7] to-[#00EAFF]`,
-        unreads > 0 ? "flex" : "hidden"
+        "z-[999] absolute bottom-20 right-4 justify-center text-xs rounded-full text-white flex items-center cursor-pointer",
+        unreads > 0 ? "py-1 px-3" : "w-8 h-8"
       )}
+      style={style}
+      onClick={scrollToBottom}
     >
-      <button onClick={scrollToBottom}>{t("new_msg", { num: unreads })}</button>
+      {unreads > 0 ? (
+        <span>{t("new_msg", { num: unreads })}</span>
+      ) : (
+        <DoubleDown />
+      )}
     </aside>
   );
 };
diff --git a/src/routes/chat/Layout/double-down.svg b/src/routes/chat/Layout/double-down.svg
new file mode 100644
index 00000000..ca2ed4e9
--- /dev/null
+++ b/src/routes/chat/Layout/double-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-240 240-480l56-56 144 144v-368h80v368l144-144 56 56-240 240Z"/></svg>