From 3d34a364bc17a6b914926c4f7eaba4558cccb78f Mon Sep 17 00:00:00 2001
From: Rankin Zheng <runjin@merico.dev>
Date: Tue, 9 May 2023 12:27:35 +0800
Subject: [PATCH] feat: Add padding to chat container and focus on input on
 mount

Add a padding to the top of the chat container to prevent the first message from being hidden behind the input field. Also, focus on the input field when the chat panel mounts for better user experience.
---
 src/views/ChatPanel.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/views/ChatPanel.tsx b/src/views/ChatPanel.tsx
index a72b50c..e9cbf25 100644
--- a/src/views/ChatPanel.tsx
+++ b/src/views/ChatPanel.tsx
@@ -104,6 +104,10 @@ const chatPanel = () => {
     const scrollToBottom = () =>
         scrollViewport?.current?.scrollTo({ top: scrollViewport.current.scrollHeight, behavior: 'smooth' });
 
+    useEffect(() => {
+        inputRef.current.focus();
+    }, []);
+
     useEffect(() => {
         if (generating) {
             // new a bot message
@@ -250,11 +254,12 @@ const chatPanel = () => {
                 ref={chatContainerRef}
                 sx={{
                     height: '100%',
+                    paddingTop: 10,
                     backgroundColor: theme.colors.gray[0],
                 }}
                 onClick={handleContainerClick}>
                 <ScrollArea
-                    h={height - px('4rem')}
+                    h={height - px('5rem')}
                     type="never"
                     viewportRef={scrollViewport}>
                     {messageList.length > 0 ? messageList : defaultMessages}