mirror of https://github.com/buster-so/buster.git
29 lines
914 B
TypeScript
29 lines
914 B
TypeScript
import React, { useMemo, useRef } from 'react';
|
|
import { ChatHeader } from './ChatHeader';
|
|
import { ChatContent } from './ChatContent';
|
|
import { useScroll } from 'ahooks';
|
|
|
|
interface ChatContainerProps {}
|
|
|
|
export const ChatContainer = React.memo(
|
|
React.forwardRef<HTMLDivElement, ChatContainerProps>((props, ref) => {
|
|
const chatContentRef = useRef<HTMLDivElement>(null);
|
|
const scroll = useScroll(chatContentRef);
|
|
|
|
const showScrollOverflow = useMemo(() => {
|
|
if (!chatContentRef.current || !scroll) return false;
|
|
const trigger = 25;
|
|
return scroll.top > trigger;
|
|
}, [chatContentRef, scroll?.top]);
|
|
|
|
return (
|
|
<div ref={ref} className="flex h-full w-full min-w-[295px] flex-col">
|
|
<ChatHeader showScrollOverflow={showScrollOverflow} />
|
|
<ChatContent chatContentRef={chatContentRef} />
|
|
</div>
|
|
);
|
|
})
|
|
);
|
|
|
|
ChatContainer.displayName = 'ChatContainer';
|