54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { useRef, useEffect, useState, useCallback } from 'react'
|
|
|
|
type Status = 'submitted' | 'streaming' | 'ready' | 'error'
|
|
|
|
interface UseMessagesOptions {
|
|
status: Status
|
|
}
|
|
|
|
export function useMessages({ status }: UseMessagesOptions) {
|
|
const [hasSentMessage, setHasSentMessage] = useState(false)
|
|
const [isAtBottom, setIsAtBottom] = useState(true)
|
|
|
|
const messagesContainerRef = useRef<HTMLDivElement>(null)
|
|
const messagesEndRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (status === 'submitted' || status === 'streaming') {
|
|
setHasSentMessage(true)
|
|
}
|
|
}, [status])
|
|
|
|
useEffect(() => {
|
|
const container = messagesContainerRef.current
|
|
if (!container) return
|
|
|
|
const handleScroll = () => {
|
|
const { scrollTop, scrollHeight, clientHeight } = container
|
|
const distanceFromBottom = scrollHeight - scrollTop - clientHeight
|
|
setIsAtBottom(distanceFromBottom <= 100)
|
|
}
|
|
|
|
handleScroll()
|
|
container.addEventListener('scroll', handleScroll)
|
|
return () => container.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior })
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (status === 'ready' || status === 'submitted') {
|
|
scrollToBottom('auto')
|
|
}
|
|
}, [status, scrollToBottom])
|
|
|
|
return {
|
|
containerRef: messagesContainerRef,
|
|
endRef: messagesEndRef,
|
|
isAtBottom,
|
|
scrollToBottom,
|
|
hasSentMessage,
|
|
}
|
|
} |