From c0d57e81667e667dce37116fdac5b7f3f3d9fbdd Mon Sep 17 00:00:00 2001
From: object <objectholos@gmail.com>
Date: Fri, 5 Aug 2022 23:01:59 +0000
Subject: [PATCH] Fix auto-scroll helper chat (Issue #208)

---
 .../guide-tool/views/GuideToolOngoingView.tsx     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx
index 7dd01850..080de332 100644
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx
@@ -1,5 +1,5 @@
 import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionMessageMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, KeyboardEvent, useCallback, useState } from 'react';
+import { FC, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { GetSessionDataManager, GuideToolMessageGroup, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../api';
 import { Base, Button, ButtonGroup, Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
@@ -16,10 +16,18 @@ interface GuideToolOngoingViewProps
 
 export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
 {
+    const scrollDiv = useRef<HTMLDivElement>(null);
+
     const { isGuide = false, userId = 0, userName = null, userFigure = null, isTyping = false, messageGroups = [] } = props;
 
     const [ messageText, setMessageText ] = useState<string>('');
 
+    useEffect(() =>
+    {
+        scrollDiv.current?.scrollIntoView({ block: 'end', behavior: 'smooth' });
+
+    }, [ messageGroups ]);
+
     const visit = useCallback(() =>
     {
         SendMessageComposer(new GuideSessionGetRequesterRoomMessageComposer());
@@ -38,7 +46,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
     useMessageEvent<GuideSessionRequesterRoomMessageEvent>(GuideSessionRequesterRoomMessageEvent, event =>
     {
         const parser = event.getParser();
-        
+
         TryVisitRoom(parser.requesterRoomId);
     });
 
@@ -100,7 +108,8 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                                 </Base> }
                             </Flex>
                         );
-                    }) } 
+                    }) }
+                    <div ref={ scrollDiv } />
                 </Column>
             </Column>
             <Column gap={ 1 }>