1
1
import { PaperAirplaneIcon } from '@heroicons/react/24/solid' ;
2
2
import { useAtomValue , useSetAtom } from 'jotai' ;
3
- import { useState } from 'react' ;
3
+ import { useEffect , useRef , useState } from 'react' ;
4
4
import { litlyticsAtom , pipelineAtom } from '~/store/store' ;
5
5
import { Button } from '../catalyst/button' ;
6
6
import { Input } from '../catalyst/input' ;
@@ -33,6 +33,7 @@ function MessageRender({ message }: { message: Message }) {
33
33
}
34
34
35
35
export function Chat ( ) {
36
+ const messageBoxRef = useRef < HTMLDivElement > ( null ) ;
36
37
const litlytics = useAtomValue ( litlyticsAtom ) ;
37
38
const setPipeline = useSetAtom ( pipelineAtom ) ;
38
39
const [ input , setInput ] = useState < string > ( '' ) ;
@@ -44,6 +45,16 @@ export function Chat() {
44
45
} ,
45
46
] ) ;
46
47
48
+ useEffect ( ( ) => {
49
+ // scroll to bottom
50
+ if ( messageBoxRef . current ) {
51
+ messageBoxRef . current . scrollTo ( {
52
+ top : messageBoxRef . current . scrollHeight ,
53
+ behavior : 'smooth' ,
54
+ } ) ;
55
+ }
56
+ } , [ messages ] ) ;
57
+
47
58
const sendMessage = async ( ) => {
48
59
const inputMessage = input ;
49
60
// reset input
@@ -72,7 +83,10 @@ export function Chat() {
72
83
73
84
return (
74
85
< div className = "flex flex-col w-full h-full" >
75
- < div className = "flex flex-1 flex-col gap-4 p-3 pt-20" >
86
+ < div
87
+ ref = { messageBoxRef }
88
+ className = "flex flex-1 flex-col gap-4 p-3 pt-20 max-h-screen overflow-auto"
89
+ >
76
90
{ messages . map ( ( m ) => (
77
91
< MessageRender key = { m . id } message = { m } />
78
92
) ) }
0 commit comments