From 5010e004743effa59b9ec67f92455c0e5d7d8a51 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 3 Apr 2022 20:44:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=99=AE=E9=80=9A=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E6=B6=88=E6=81=AF=E5=90=8E=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBox/ChatMessageList/NormalList.tsx        | 15 ++++++++++++++-
 web/src/components/ChatBox/index.tsx              |  3 ++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/NormalList.tsx b/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
index 2e443d74..9efa1f53 100644
--- a/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/NormalList.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
-import { useUpdateRef } from 'tailchat-shared';
+import { sharedEvent, useUpdateRef } from 'tailchat-shared';
 import { buildMessageItemRow } from './Item';
 import type { MessageListProps } from './types';
 
@@ -24,6 +24,19 @@ export const NormalMessageList: React.FC<MessageListProps> = React.memo(
       }
     }, [props.messages.length]);
 
+    useEffect(() => {
+      const onSendMessage = () => {
+        // 滚动到底部
+        containerRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+      };
+
+      sharedEvent.on('sendMessage', onSendMessage);
+
+      return () => {
+        sharedEvent.off('sendMessage', onSendMessage);
+      };
+    }, []);
+
     const handleScroll = useCallback(() => {
       if (props.messages.length === 0) {
         return;
diff --git a/web/src/components/ChatBox/index.tsx b/web/src/components/ChatBox/index.tsx
index 5155ddda..5791da2e 100644
--- a/web/src/components/ChatBox/index.tsx
+++ b/web/src/components/ChatBox/index.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { ChatBoxContextProvider, useConverseMessage } from 'tailchat-shared';
 import { AlertErrorView } from '../AlertErrorView';
 import { ChatBoxPlaceholder } from './ChatBoxPlaceholder';
 import { ChatInputBox } from './ChatInputBox';
 import { ChatMessageList } from './ChatMessageList';
+import type { MessageListRef } from './ChatMessageList/types';
 import { ChatReply } from './ChatReply';
 import { useMessageAck } from './useMessageAck';