ishangsf/DeepCodeGeniusWeb-vscode
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add padding to chat container and focus on input on mount

Browse Source 
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.
This commit is contained in:
Rankin Zheng 2023-05-09 12:27:35 +08:00
parent 5bcd1fa42f
commit 3d34a364bc
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/ChatPanel.tsx
View File

@ -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}