From abbad8ee64cbba24ba5e47117e92cd756f5bcc47 Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Thu, 3 Aug 2023 21:08:49 +0800
Subject: [PATCH] Add scroll to bottom button in ChatPanel

- Imported ActionIcon, IconCircleArrowDown, and IconCircleArrowDownFilled in ChatPanel.tsx.
- Added a scroll to bottom button in the chat panel.
---
 src/views/ChatPanel.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/ChatPanel.tsx b/src/views/ChatPanel.tsx
index c5f1298..da66756 100644
--- a/src/views/ChatPanel.tsx
+++ b/src/views/ChatPanel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
-import { Alert, Center, Container, Stack, px } from '@mantine/core';
+import { ActionIcon, Alert, Center, Container, Stack, px } from '@mantine/core';
 import { ScrollArea } from '@mantine/core';
 import { useResizeObserver, useTimeout, useViewportSize } from '@mantine/hooks';
 import messageUtil from '@/util/MessageUtil';
@@ -28,6 +28,7 @@ import {
 import InputMessage from '@/views/components/InputMessage';
 import MessageContainer from './components/MessageContainer';
 import { clearContexts, setValue } from '@/views/reducers/inputSlice';
+import { IconCircleArrowDown, IconCircleArrowDownFilled } from '@tabler/icons-react';
 
 
 const chatPanel = () => {
@@ -108,6 +109,12 @@ const chatPanel = () => {
                 color: 'var(--vscode-editor-foreground)',
                 minWidth: 240
             }}>
+            {!isBottom && <ActionIcon
+                onClick={() => { scrollToBottom() }}
+                title='Bottom'
+                variant='transparent' sx={{ position: "absolute", bottom: 60, right: 20, zIndex: 999 }}>
+                <IconCircleArrowDownFilled size="1.125rem" />
+            </ActionIcon>}
             <ScrollArea
                 sx={{
                     height: generating ? height - px('8rem') : height - px('5rem'),