Function ThreadScrollButton

packages/@react-spectrum/ai/src/Chat.tsx:323–341

({children}: ThreadScrollButtonProps)

// TODO: wrapper so we can do the "if isNearBottom then hide" logic, could do this via inline styles perhaps
// and ditch the wrapper?
export function ThreadScrollButton({children}: ThreadScrollButtonProps) {
  let {isNearBottom, scrollToBottom, ...buttonProps} = useContext(ThreadScrollButtonContext);
  let ref = useRef<HTMLDivElement>(null);
  let isVisible = !isNearBottom;
  let isExiting = useExitAnimation(ref, isVisible);

  if (!isVisible && !isExiting) {
    return null;
  }

  return (
    <ButtonContext.Provider
      value={{slots: {[DEFAULT_SLOT]: {}, scroll: {onPress: scrollToBottom, ...buttonProps}}}}>
      <ThreadScrollButtonInner domRef={ref} isExiting={isExiting}>
        {children}
      </ThreadScrollButtonInner>
    </ButtonContext.Provider>
  );
}

interface ThreadScrollButtonInnerProps {
  domRef: RefObject<HTMLDivElement | null>;